StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAccessing Coordinates in a nested geojson file to draw polygons with Google Maps API v3
text
Body
copied!<p>I am having a real pain of trying to draw multiple polygons from a geojson file. Below I have pasted a sample of the geojson file and the javascript used to access it. It seems the main problem I am running into is that I cannot get into that array of coordinates nested in each record as it either returns the error that "coordinates" is undefined or that there is no method "setMap" for undefined. I have been able to return other nested aspects of a similar JSON file (this is a test file, the real one actually has data, just trying to get the polygon drawing here), but getting those coordinates is not working. I am not a javascript master so I can't tell where the code is failing to make the proper access.</p> <p>thanks in advance.</p> <p>the json data looks like this:</p> <pre><code>var data={ "type": "FeatureCollection", "features": [ { "type": "Feature", "id": 1, "properties": { "Name": "", "description": "", "timestamp": "", "begin": "", "end": "", "altitudeMode": "clampToGround", "tessellate": 1, "extrude": -1, "visibility": -1 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -83.126571, 42.348706 ], [ -83.126520, 42.348634 ], [ -83.126516, 42.348635 ], [ -83.126147, 42.348778 ], [ -83.126144, 42.348780 ], [ -83.126195, 42.348852 ], [ -83.126199, 42.348851 ], [ -83.126568, 42.348708 ], [ -83.126571, 42.348706 ] ] ] } }, { "type": "Feature", "id": 2, "properties": { "Name": "", "description": "", "timestamp": "", "begin": "", "end": "", "altitudeMode": "clampToGround", "tessellate": 1, "extrude": -1, "visibility": -1 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -83.132805, 42.356496 ], [ -83.132753, 42.356423 ], [ -83.132751, 42.356424 ], [ -83.132243, 42.356624 ], [ -83.132241, 42.356625 ], [ -83.132294, 42.356698 ], [ -83.132296, 42.356697 ], [ -83.132802, 42.356497 ], [ -83.132805, 42.356496 ] ] ] } }, { "type": "Feature", "id": 3, "properties": { "Name": "", "description": "", "timestamp": "", "begin": "", "end": "", "altitudeMode": "clampToGround", "tessellate": 1, "extrude": -1, "visibility": -1 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -83.126776, 42.351813 ], [ -83.126492, 42.351413 ], [ -83.126189, 42.351525 ], [ -83.126191, 42.351528 ], [ -83.126376, 42.351807 ], [ -83.126776, 42.351813 ] ] ] } } etc... ] } </code></pre> <p>I've got the javascript as below, using the example used at geojason.info: <a href="http://demos.geojason.info/complex-geojson-polygons-google-maps-demo.php" rel="nofollow">http://demos.geojason.info/complex-geojson-polygons-google-maps-demo.php</a></p> <pre><code>var points; var pointsMore; var polygon; var map; function initializeMap() { map = new google.maps.Map(document.getElementById("map_canvas"), { zoom: 11, center: new google.maps.LatLng(42.347727, -83.058014), mapTypeId: google.maps.MapTypeId.TERRAIN }); var polygon = createPolygons(pointsMore); //this is where the problem is...check nesting. polygon.setMap(map); } function createPolygons(pointsMore) { for (var y = 0; y < data.features.length; y++) { var points = data.features[y]; for (var z = 0; points.geometry.length; z++) { var pointsMore = points.geometry[z]; var coords = pointsMore.coordinates; var paths = []; $.each(coords,function(i,n){ $.each(n, function(j,o){ var path = []; $.each(o,function(k,p){ var ll = new google.maps.LatLng(p[1],[0]); path.push(ll); }); paths.push(path); }); }); var polygon = new google.maps.Polygon({ paths: paths, strokeColor: "#FF7800", strokeOpacity: 1, strokeWeight: 2, fillColor: "#46461F", fillOpacity: 0.25 }); return polygon; } } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload