2

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 ] } }
]
}
  • 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. – Evil Genius Nov 19 '15 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 Nov 19 '15 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. – Evil Genius Nov 19 '15 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 Nov 19 '15 at 13:28
1

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

  • 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 Nov 19 '15 at 13:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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