1

I'll be generating my JSON file using PHP and SQL for displaying around 200 polygons, on a map. I've managed to test the concept with two polygons but still struggling.

I'm not experienced with JS or Google Maps - I've pulled the following code together from examples found online. I have my index.php and my google.json file.

I need to colour each polygon individually. But I'd like to make it so when I click on the polygon, I get data back about that specific polygon which is in JSON file.

My index file is:

<!DOCTYPE html>
<html>
  <head>
    <title>Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 13,

          center: {lat: 53.9501613048558, lng: -0.643479919243011}
        });

        // Load GeoJSON.
        map.data.loadGeoJson(
            'google.json');

        map.data.setStyle(function(feature) {
            color = feature.getProperty('color');

          return /** @type {!google.maps.Data.StyleOptions} */({
            fillColor: color,
            strokeColor: color,
            strokeWeight: 1
          });
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
    </script>
  </body>
</html>

My JSON file is:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "fieldName": "Stocking Leg",
        "fieldCrop": "Winter Wheat",
        "fieldVariety": "Grafton",
        "fieldStatus": "Harvested",
        "color": "#1e90ff"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [-0.643479919243011, 53.9501613048558],
            [-0.642645446436936, 53.9483895367576],
            [-0.625693522453763, 53.9510139164959],
            [-0.625306277647221, 53.9514932747089],
            [-0.625016149462924, 53.9520263452236],
            [-0.624998018731098, 53.9525556565762],
            [-0.625171417997934, 53.9530850531173],
            [-0.625613972758022, 53.9539476858879],
            [-0.626217569230656, 53.955176301559],
            [-0.633168168313894, 53.9535096676893],
            [-0.63374234052594, 53.9534186065716],
            [-0.63390932853535, 53.9536070812356],
            [-0.634955894348712, 53.9560641425603],
            [-0.640436415897256, 53.9549583053821],
            [-0.638585491507859, 53.9511381541014],
            [-0.643479919243011, 53.9501613048558]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "fieldName": "Intack",
        "fieldCrop": "Spring Barley",
        "fieldVariety": "Concerto",
        "fieldStatus": "Harvested",
        "color": "#2eb135"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [-0.617968241188281, 53.9512883816321],
            [-0.612792386992653, 53.9512241054838],
            [-0.612501876074391, 53.9551814164901],
            [-0.613857941942498, 53.9552899653844],
            [-0.61450376422531, 53.9553804011769],
            [-0.615635502801195, 53.9554756093288],
            [-0.617624878375518, 53.9554987820677],
            [-0.617968241188281, 53.9512883816321]
          ]
        ]
      }
    }

  ]
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.