Uncaught InvalidValueError: not a Feature or FeatureCollection

Question

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.

Answer 1

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 **/
      }
    ]
  }

Answer 2

I had the same problem (or at least similar) and solved it by introducing one extra step.

Origin of the data: My semantic Network delivers on a first round request the data about the caves in Southern France in GeoJSON format. This is directly imported via:

map.data.loadGeoJson(theUrl);

As we might want to work independent of the semantic network with these data (the app is a thick client) the caves are locally stored via jStorage. Iterating of the features of the map and storing these objects directly in jStorage failed because of circular references. I made a handcrafted routine (not generic enough but suiting the purpose) to transform the map.data.Feature into a javascript object that could be stored.

When getting the data from the store:

var cave =  $.jStorage.get(key);
map.data.addGeoJson(cave); 

throws the Uncaught InvalidValueError: not a Feature or FeatureCollection error.

But:

var geojson = JSON.parse(cave);
map.data.addGeoJson(geojson);

Works fine.

My interpretation is that the function addGeoJson needs a javascript object and not a string.

Sample geoJson (the orignal "cave") value:

{ "type": "Feature", "geometry": {"type": "Point", "coordinates": [5.368743302306143, 44.0421921072459]},"id": "84.MON.014", "properties": {"nom": "Aven du Grand Guérin", "nid": "7b4703-f387f6f544-0750e59f441be7bb30a7e097c5d725f7", "nature": "Aven", "nodeTime": 1400743203325, "dataId": "5b66137c-1461fdfe5ca-f528764d624db129b32c21fbca0cb8d6", "status": 1}}