google-mapsgoogle-maps-api-3mapsgeojson

Uncaught InvalidValueError: not a Feature or FeatureCollection


After seeing a recent video by the Google Devs I decided to do a regional map of the UK. There were a couple of possibilities mentioned on this site that I've since had to dismiss*

So I ended up using this site (example page of data downloads): http://mapit.mysociety.org/area/11804.html

Notice the GeoJSON download as the third link down? Its about a 1Mb file size. When I first tried using it with my map:

function initMap(){
    var ukc = new google.maps.LatLng(54.8, -4.6);
    var mapOptions = {
        zoom: 5,
        center: ukc
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    map.data.loadGeoJson('http://local.mapsite.com:8080/app/jsondata/eastern.json');
}

$(document).ready(function(){
    initMap();
});

I got the above error: Uncaught InvalidValueError: not a Feature or FeatureCollection

Fix Attempt 1 - Google it

Googling the error came back with nothing useful.

Fix Attempt 2 - Shrink it

I thought maybe it was the sheer size of the beast so I shrank it using mapshaper.org to a more manageable 10K. Still no luck!

Fix Attempt 3 - Lint it

Maybe my GeoJSON was badly formatted? But how could it be considering it was right there working on mapit.org but I found this wonderful site for linting GeoJSON data: http://geojsonlint.com/ - The linting worked! Apparently the GeoJSON worked so well that it drew my polygon of East Anglia on the UK in all its glory (note geojsonlint uses OpenStreetMap). But still No Luck

Fix Attempt 4 - TopoJson

Hoping I could combine the regions and compress at the same time I thought desperately that topojson would work. I tried - I still got that same error. Here's a link to my topojson file shared on Google Drive: someregions.json No luck.

Fix Attempt 5 - Add Feature code to start of JSON

The current GeoJSON file starts {"bbox":[-0.745702,51.448473,1.767999,52.98991],"type":"GeometryCollection","geometries":...

I added:

{"type": "Feature", "bbox":[-0.745702,51.448473,1.767999,52.98991],"type":"GeometryCollection","geometries":

Fix Attempt 6

Retry different regions as they donm't contain the bbox parameter near the start but simply start { "type": "Polygon", "coordinates": [ [ [ -3.155785, 53.427385 ], [ -3.151533, 53.427328 ], [...

Still no luck.

In (Failed) Conclusion

Even though I proved my file was small enough, linted and worked elsewhere I still got those infuriating error messages from the console when attempting to put them on my map.

Uncaught InvalidValueError: not a Feature or FeatureCollection

Here is my shrunk GeoJSON file publically shared via GDrive: https://drive.google.com/file/d/0B42Aec8RKcHtNVNZZUxqV0Y5Rkk/edit?usp=sharing

My next attempts will involve topojson to compress all regions into one with internal borders but I wanted to check here first to see if anyone knows what my problem could be? Because that may be another few hours of futile energy wasted.

* Attempting to use Ordanance Survey data failed as they provided SHD data and not SHP as stated in a previous question on the subject. So I couldn't convert it into GeoJSON using ogr2ogr.


Solution

  • The specification for GeoJSON can be found at http://geojson.org/geojson-spec.html Relevant (though experimental) Google Maps API documentation can be found at https://developers.google.com/maps/documentation/javascript/3.exp/reference#Data

    So it looks like for GeoJSON to be acceptable by Google Maps, you need to wrap a Polygon (or similar) returned by MapIt in a Feature or FeatureCollection, here's an example for bermuda-triangle:

      { "type": "FeatureCollection",
        "features": [
          { "type": "Feature",
             "geometry": {
               "type": "Polygon",
               "coordinates": 
                  [
                    [
                      [-80.190262,25.774252],
                      [-66.118292,18.466465],
                      [-64.75737,32.321384],
                      [-80.190262,25.774252]
                    ]
                  ]
             }
          }
        ]
      }
    

    for the data provided by http://mapit.mysociety.org/area/11804.html it has to be:

      { "type": "FeatureCollection",
        "features": [
          { "type": "Feature",
             "geometry": /** paste here the complete output of 
                             http://mapit.mysociety.org/area/11804.geojson **/
          }
        ]
      }