[GIS] Creating Google Maps Polygon from Data Object Using getFeatureById

geojsongoogle-maps-api

First post here, so forgive me if I put a few things in the wrong place.

I am trying to do a Google Maps search for places inside an arbitrary region loaded into a Data object loaded via GeoJSON file, which means I need to then convert the feature in the Data object, but I was not able to use standard methods like getFeatureById() in the way I see other code examples use it. I was able to generate my polygon using the callback function in loadGeoJson(), but according to what I see in the console it looks like my Data object is missing its features. Here's what "worked:"

  function getBuffer() {
      var bufferData = new google.maps.Data();
      bufferData.loadGeoJson(
          "buff_box.geojson", 
           {idPropertyName: 'id'},
           function(featarr) {
            console.log("inside callback: "+ featarr[0].getProperty('name'));
            var bufGeom=featarr[0].getGeometry();
            myBuffer = new google.maps.Polygon({
                paths: bufGeom.getAt(0).getArray(),
                map: myNewMap,
                clickable: false,
                visible: true,
                fillColor: 'green'
            });
        });
       bufferData.toGeoJson(function (data) {
           console.log(JSON.stringify(data));
       });
  }

I saw other code examples online (here and on the Google Maps API site) using getFeatureById(), but this code doesn't work for me, the features seem to be missing from the data object, even if I can have the data object drawn on the screen per this snippet:

    var bufferData = new google.maps.Data();
    bufferData.loadGeoJson("buff_box.geojson", {idPropertyName: "name" });       
    bufferData.setStyle({
      clickable: false,
      visible: true,
      fillColor: 'green'
    });
    bufferData.setMap(myNewMap);

    myBuffer = new google.maps.Polygon({
          paths: bufferData.getFeatureById('box1').getGeometry().getAt(0).getArray(),
          map: myNewMap,
          clickable: false,
          visible: true,
          fillColor: 'blue'
     });

(When I run this the console tells me that bufferData.getFeatureById('box1') is undefined.)

Can anyone tell me what I'm doing wrong? How can I get getFeatureById() to work in this case? If it helps, here is my sample GeoJSON file, which I generated using QGIS, and which looks OK as far as I can tell:

{
   "crs": {
       "properties": {
           "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
       },
       "type": "name"
   },
   "features": [
       {
           "geometry": {
               "coordinates": [
                   [
                       [
                           -75.39081412376228,
                           40.64154483685555
                       ],
                       [
                           -75.42656309320724,
                           40.63540678621582
                       ],
                       [
                           -75.41009527357166,
                           40.60856157397539
                       ],
                       [
                           -75.36850069050213,
                           40.6117930941959
                       ],
                       [
                           -75.39081412376228,
                           40.64154483685555
                       ]
                   ]
               ],
               "type": "Polygon"
           },
           "properties": {
               "id": 1,
               "name": "box1"
           },
           "type": "Feature"
       },
       {
           "geometry": {
               "coordinates": [
                   [
                       [
                           -75.44292079589148,
                           40.61617282000717
                       ],
                       [
                           -75.44640946125355,
                           40.59955529334957
                       ],
                       [
                           -75.42691488537847,
                           40.59351089441089
                       ],
                       [
                           -75.41899179766051,
                           40.60456915354236
                       ],
                       [
                           -75.44292079589148,
                           40.61617282000717
                       ]
                   ]
               ],
               "type": "Polygon"
           },
           "properties": {
               "id": 2,
               "name": "box2"
           },
           "type": "Feature"
       }
   ],
   "type": "FeatureCollection"

}

UPDATE: Looks like the geojson file hadn't finished loading when the rest of the script continued, so there was nothing in the data layer yet. I'm not sure how to get the script to wait until loadGeoJson() is done other than using the callback, so I guess that's the right place to build my polygon.

Best Answer

I think your GeoJSON is malformed!

It does not pass the test with http://geojsonlint.com

When I convert the file in the standard format ESRI shapefile with the command line below, I get exactly the structure you are using with CRS on header of file.

$ ogr2ogr -f "GeoJSON" -t_srs EPSG:4326 cities.geojson esri-shapefile.shp

However, when I convert to the default settings from the command line below, I get the correct structure of GeoJSON standard.

$ ogr2ogr -f "GeoJSON" cities.geojson esri-shapefile.shp

I am using the toolset of gdal.org. If you are using Ubuntu Linux you can install it with the instructions below:

$ apt show gdal-bin 
$ apt-cache policy gdal-bin
$ sudo apt install gdal-bin

To load the GeoJSON file you just need the javascript code below:

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 11,
  center: new google.maps.LatLng(-22.928173, -43.437653)
});
map.data.loadGeoJson('states.geojson');
map.data.setStyle({
  strokeColor: 'red',
  strokeWeight: 1,
  strokeOpacity: 0.8,
  fillColor: 'red',
  fillOpacity: 0.10
});
Related Question