2

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.

1

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
});
  • Thanks for the response Fernando, I did not know about geojsonlint.com. However, I just cut & pasted my file from the post above into their validator, and it worked fine. I'm not sure why it didn't work for you. I'll have to experiment with ogr2ogr, which I have but rarely use. – Don Aug 6 '16 at 23:58
  • The method loadGeoJson is asyncronous, then try to surround the code after it with the setInterval method with a 500 millisecond or switch to the addGeoJson method that is synchronous. – Fernando Santucci Aug 7 '16 at 4:11
  • Thanks for that! I suspected that the fact that loadGeoJson is asynchronous was what was causing my problem, and my workaround was to use the callback to add the data to my polygon. I'll give addGeoJson a try. – Don Aug 7 '16 at 12:19
0

i think the problem you're hitting @Don is that feature ids will remain undefined if they are not explicitly set (docs) in the options object passed as the second parameter, like this:

map.data.loadGeoJson(
    "cb_2018_us_cbsa_20m.geojson",
    {
        idPropertyName: "CBSAFP"
    },
    features => {}
);

also, i think the callback that can be provided as loadGeoJson's third parameter is called after the data has been downloaded and parsed, so that's not the problem. i didn't see any explicit mention in the docs that this is the case, but it would make sense, follows common conventions (like jquery ajax), and fits my observation.

good luck!

  • Thanks! My code examples did actually use idPropertyName, one example setting it to 'id' (which is default if idPropertyName is not called), and the other setting it to 'name'. My problem turned out to be that I was not waiting for the asynchronous call to return -- I was originally not using the callback -- and was trying to build my polygon from a geojson feature that hadn't loaded yet. When I made my polygon inside the callback, everything was fine. You can see it here as "Demo Map," which is now unfortunately outdated. – Don Jun 30 at 0:18

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.