[GIS] Zoom to GeoJSON point feature in leaflet

angularjsgeojsonjavascriptleaflet

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:

enter image description here

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

Best Answer

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/ .

Related Question