3

I have my geoJson format like this:

statesData.features.push({  
   "type":"Feature",
   "id":"AFG",
   "properties":{  
      "name":"Afghanistan"
   },
   "geometry":{  
      "type":"Polygon",
      "coordinates":[  
         [  
            [  
               61.210817,
               35.650072
            ],
            [  
               62.230651,
               35.270664
            ],
            [  
               62.984662,
               35.404041
            ],

I am trying to read those coordinates and set them as 

        var coord = statesData.features[0].geometry.coordinates;
        lalo = L.GeoJSON.coordsToLatLng(coord);
        map.setView(lalo, 18);

The documentation says:

coordsToLatLng( coords ) Function that will be used for converting GeoJSON coordinates to LatLng points (if not specified, coords will be assumed to be WGS84 — standard [longitude, latitude] values in degrees).

But I am getting this error in console

Uncaught Error: Invalid LatLng object: (undefined, 61.210817,35.650072,62.230651,35.270664,62.984662,35.404041...

UPDATE

The first answer is correct as it solves the issue above, however, it zooms the map to the first set of coordinates while what I am really trying to achieve is to be able to load the page with the map auto zoomed to a polygon (I only load one polygon).

This example is the closest i could find

Community
  • 1
  • 1
rob.m
  • 9,843
  • 19
  • 73
  • 162
  • The coordinates is an array of coordinates, inside an array, inside an array. Isn't that at least one array too many? Can `setView()` handle more than one coordinate? – JJJ Mar 16 '17 at 16:17
  • @JJJ I am trying to auto zoom to a polygon – rob.m Mar 16 '17 at 16:17
  • There is also a [`coordsToLatLngs()`](http://leafletjs.com/reference.html#geojson-coordstolatlngs) function (note the plural "s") which can handle a `coordinates` array (`[[[],[],...],[[],[],...]]`). The `coordsToLatLng()` will only translate one coordinate. You will have to select one of the lat/lng pairs in `coordinates`. `setView()` will also only use one coordinate (lat/lng). – Andreas Mar 16 '17 at 17:06

2 Answers2

2

Thanks to the answer I got from here the solution is to use leaflet layerGroup.

Following leaflet example as that is what I am using, based on their code and the other answer i got, this is what worked for me. The php bit is what I use to get the country name I need as per my project. The following gets a name, compares it if there is a name in the geoJson like that and if so, centers and zooms the map to that polygon:

geojson = L.geoJson(statesData, {
  style: style,
  onEachFeature: onEachFeature
}).addTo(map);

<?php 
    $myCountry = usp_get_meta(false, 'usp-custom-3');
    $fixedname = ucfirst($myCountry); 
?>

geojson.eachLayer(function (layer) {
  if (layer.feature.properties.name === "<?php echo $fixedname; ?>") {
    // Zoom to that layer.
    map.fitBounds(layer.getBounds());
  }
});
Community
  • 1
  • 1
rob.m
  • 9,843
  • 19
  • 73
  • 162
1

You are passing an array of arrays of arrays as a parameter. coordsToLatLng doesn't expect that. It only expects one array, being it the coordinates: https://www.dartdocs.org/documentation/leaflet/0.0.1-beta.1/leaflet.layer/GeoJSON/coordsToLatLng.html

So your code has to be actually:

var coord = statesData.features[0].geometry.coordinates[0][0];
lalo = L.GeoJSON.coordsToLatLng(coord);
map.setView(lalo, 18);

This will get the coordinates of your first point inside your double-array. Btw, I'm pretty sure that double-array is not what you really want.

Jorge Fuentes González
  • 11,568
  • 4
  • 44
  • 64
  • I don't actually, i am simply adding a polygon dynamically to a country and when i load the page I am trying to zoom in to that polygon, i tried fitBounds and read all over the places and I can't get my head around, until i got this far but ain't' working :( – rob.m Mar 16 '17 at 16:21
  • 1
    @rob.m Yes but, from where comes that array? That's a 3 dimensional array, kinda unexpected thing here. If you are creating that array manually, then you are doing it wrong for sure. You are doing `coordinates: [ [ [x,y],[x,y],[x,y] ] ]` when it should be surely `coordinates: [ [x,y],[x,y],[x,y] ]` – Jorge Fuentes González Mar 16 '17 at 16:26
  • this is geoJson not json – rob.m Mar 16 '17 at 16:28
  • That's the format of a polygon, as defined in ([RFC7946](https://tools.ietf.org/html/rfc7946)): [geojson.org](http://geojson.org/geojson-spec.html#examples)/[wikipedia](https://en.wikipedia.org/wiki/GeoJSON#Geometries) – Andreas Mar 16 '17 at 16:31
  • @Andreas exactly, and by using the suggested answer, meaning only getting the first coordinates out of a polygon, the position is wrong. I need somehow to zoom to fitBounds of that polygon drawn with those arrays – rob.m Mar 16 '17 at 16:32
  • @rob.m So a polygon is a set of coordinates, right? And the docs says that the function accepts coordinates as parameters, not polygons. So you have to work it out manually by processing the output of each coordinate or find another function that accepts polygons. You have to update your question actually xD – Jorge Fuentes González Mar 16 '17 at 16:34
  • @JorgeFuentesGonzález yes you are right, updated the question. issue remains tho :( – rob.m Mar 16 '17 at 16:38
  • 1
    @rob.m Yeah, let's see if a more experienced user brings a bit of light here. – Jorge Fuentes González Mar 16 '17 at 16:40