Cipta Peta interaktif berasaskan komuniti setempat menggunakan Geojson

Alhamdulilah, hari ini aku belajar cara membuat komuniti map. yang dimaksudkan komuniti map ialah dimana kita boleh pilih kawasan yang kita nak highlightkan, lihat gambar dibawah yang warna biru itu adalah yang aku maksudkan.

Sumber dari code for amerika https://github.com/codeforamerica/click_that_hood/tree/master/public/data
jika anda baca dari link , malaysia juga tersenarai, jadi apa yang aku buat mula2 aku buka dahulu link dari geojson http://geojson.io/#map=0/73/124 kemudian aku pastekan code untuk malaysia , Buka malaysia.geojson dan pilih butang row untuk view data kemudian right click dan save dalam komputer dahulu.
buka fail malaysia.geojson


Pilih lokasi yang kita mahukan dan dihujung text wajib buang koma.


code dari selangor aku letakkan dalam geojson.io dahulu  kod dekat bawah ini yang aku gunakan


{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#00ff80",
        "marker-size": "medium",
        "marker-symbol": "college"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          101.42206310000006,
          3.083152
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "stroke": "#555555",
        "stroke-width": 2,
        "stroke-opacity": 1,
        "fill": "#555555",
        "fill-opacity": 0.5
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              101.41290664672853,
              3.112748357170424
            ],
            [
              101.39402389526369,
              3.113091173334638
            ],
            [
              101.3931655883789,
              3.0887509491861826
            ],
            [
              101.38629913330078,
              3.075894971535933
            ],
            [
              101.38887405395509,
              3.056696423195779
            ],
            [
              101.44826889038086,
              3.0520681502498332
            ],
            [
              101.4723014831543,
              3.0788090067455465
            ],
            [
              101.45135879516603,
              3.1146338446929045
            ],
            [
              101.42217636108397,
              3.0980071567499787
            ],
            [
              101.41290664672853,
              3.112748357170424
            ]
          ]
        ]
      }
    }
  ]
http://geojson.io/#map=0/73/124
Sumber rujukan
https://othermachines.com/blog/create-interactive-community-map-drupal-7-leaflet
https://en.wikipedia.org/wiki/Shapefile
http://ogre.adc4gis.com/
https://data.edmonton.ca/Geospatial-Boundaries/City-of-Edmonton-Neighbourhood-Boundaries-with-War/jfvj-x253

Comments

Post a Comment