0

I am working on a project where I need to pull GeoJSON from my .NET API via a jQuery ajax call. When I try to assign the data to a variable, and then load it into Google Maps like this:

 map.data.addGeoJson(data);

It throws an error saying:

js:70InvalidValueError: not a Feature or FeatureCollection

If I were to take that same response that the API gives, and paste it directly into the html file (so assign the same value to the JS variable data) it works fine and the map renders

My guess is maybe there is an encoding issue? I even output the response to a div, copied that div's values, pasted it in, and it worked. It seems to only be when I directly assign the value from the API that it throws an error.

Any ideas what I could do to format this or get it working correctly? Is the script "breaking" b/c of formatting or something when it's being directly written out in JavaScript?

Thanks so much!

Edit: My data that comes back from the API is already wrapped in a feature collection:

{"type": "FeatureCollection", "features": [{"id": 5280, "type": "Feature", "geometry": {"type": "MultiPolygon", "coordinates": [[[[-73.431919, 40.989009], [-73.423452, 40.990793], [-73.398054, 40.996147], [-73.389588, 40.997932], [-73.388429, 40.998151], [-73.384952, 40.99881], [-73.383794, 40.99903], [-73.383516, 40.999082], [-73.382685, 40.99924], [-73.382408, 40.999293], [-73.38156, 40.999453], [-73.379019, 40.999935], [-73.378172, 41.000097], [-73.377449, 41.000289], [-73.375282, 41.000867], [-73.37456, 41.00106], [-73.358967, 41.004214], [-73.312189, 41.013675], [-73.296597, 41.01683], [-73.296564, 41.016837], [-73.295532, 41.017045], [-73.292437, 41.017671], [-73.291406, 41.01788], [-73.288203, 41.018528], [-73.278594, 41.020471], [-73.275392, 41.02112], [-73.274206, 41.021338], [-73.273019, 41.021556], [-73.270225, 41.022069], [-73.261288, 41.023711], [-73.254724, 41.024916], [-73.249557, 41.025866], [-73.24916, 41.025957], [-73.247968, 41.026233], [-73.247572, 41.026326], [-73.246328, 41.026614], [-73.242596, 41.027478], [-73.241353, 41.027767], ... end

Just a reminder, if I paste the output directly into a variable, it works. If I have the variable equal the response from the API, it fails.

Mike-751031
  • 47
  • 1
  • 8

1 Answers1

0

Check out this GeoJson page , this GoogleMapsAPI page where it states

addGeoJson(geoJson:Object, options?:Data.GeoJsonOptions)

Adds GeoJSON features to the collection. Give this method a parsed JSON. The imported features are returned. Throws an exception if the GeoJSON could not be imported.

and this SO question where the accepted answer is wrapping your object like so :

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

Edit: Try this

var geojson = JSON.parse(data); 
map.data.addGeoJson(geojson);
Community
  • 1
  • 1
Tsimp. Dim
  • 76
  • 13
  • @tsimp-dim thanks for those links, great finds. Any ideas why my code wouldn't work though? It seems I already have them wrapped in a feature collection (see my stuff above). Unless you think I can't wrap it in a feature collection from code, and I actually need to just return the geometry itself without a feature? – Mike-751031 Jul 18 '17 at 17:29
  • Are you sure you parse the data you get? What if you try var geojson = JSON.parse(cave); map.data.addGeoJson(geojson); – Tsimp. Dim Jul 18 '17 at 17:31
  • THAT'S IT! YOU GOT IT! Thank you :) Any chance you could update your answer to just mention this so others can see it? THANK YOU! – Mike-751031 Jul 18 '17 at 17:46
  • Done. Glad I could help! – Tsimp. Dim Jul 18 '17 at 21:16