More

Zoom to GeoJSON point feature in leaflet


I'm relatively new to Web Mapping and trying to develop a litte Application with Angular JS and the angular-leaflet-directive. In this application I will work with a GeoJSON point layer representing different stations of a field trip. What i want to achieve is to have a button and zoom to a specific point/marker when you click on it.

I've already seen this example and was trying to reproduce the functionality for a GeoJSON point layer instead of a multipolygon.

Specific functionality in example code:

$scope.centerJSON = function() { leafletData.getMap().then(function(map) { var latlngs = []; for (var i in $scope.geojson.data.features[0].geometry.coordinates) { var coord = $scope.geojson.data.features[0].geometry.coordinates[i]; for (var j in coord) { var points = coord[j]; for (var k in points) { latlngs.push(L.GeoJSON.coordsToLatLng(points[k])); } } } map.fitBounds(latlngs); }); };

Now my code:

$scope.centerPoint = function () { leafletData.getMap().then(function (map) { var lalo = []; console.log(lalo); var coord = $scope.geojson.data.features[0].geometry.coordinates; console.log(coord); lalo.push(L.GeoJSON.coordsToLatLng(coord)); console.log(lalo); map.setView(lalo, 18); }); };

which gives the following error in firebug console:

Does anyone of you know why the setView method doesn't like my LatLng object? If I manually fill in a LatLng object like below it just works fine:

map.setView(new L.LatLng(51.4, 7.4), 15);

My GeoJSON looks like this and has only one point in it for testing purposes:

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "id": 5 }, "geometry": { "type": "Point", "coordinates": [ 7.483522475876038, 51.487886145585634 ] } } ] }

In your code lalo is an array of LatLng objects. Changing the line

lalo.push(L.GeoJSON.coordsToLatLng(coord));

to

lalo = L.GeoJSON.coordsToLatLng(coord);

, so lalo will be a single LatLng object, should do the trick.

See fiddle at http://jsfiddle.net/1eh1nn9y/1/ .