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) {

Now my code:

    $scope.centerPoint = function () {
    leafletData.getMap().then(function (map) {
        var lalo = [];
        var coord = $scope.geojson.data.features[0].geometry.coordinates;
        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 ] } }
  • 1
    Are you sure you should be passing in an array of lat/lons to map.setView? The code from the example you provided uses map.setBounds instead of map.setView. Commented Nov 19, 2015 at 12:04
  • @EvilGenius: that doesn't matter, see leafletjs.com/reference.html#latlng where it says All Leaflet methods that accept LatLng objects also accept them in a simple Array form and simple object form (unless noted otherwise)
    – til_b
    Commented Nov 19, 2015 at 12:56
  • 1
    @til_b Right, but I thought 'simple array form' is just the coordinate values in an array, not the LatLon object(s) in an array. Commented Nov 19, 2015 at 13:01
  • I thought you meant [51.4, 7.4] by "simple array form", because you wrote "lat/lons" and not "LatLng", but you meant [L.LatLng(51.4, 7.4)].
    – til_b
    Commented Nov 19, 2015 at 13:28

1 Answer 1


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



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

  • 1
    Thanks a lot! This indeed did the trick! Quite simple solution but like I said I'm a beginner! Therefore it's great to have communties like GIS.Stackexchange!!!
    – olektro
    Commented Nov 19, 2015 at 13:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.