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 (http://tombatossals.github.io/angul...000-viewer.html#/basic/geojson-center-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; 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 ] } }]}Thanks in advance!!!
أكثر...
I've already seen this example (http://tombatossals.github.io/angul...000-viewer.html#/basic/geojson-center-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; 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 ] } }]}Thanks in advance!!!
أكثر...