Dear fellow programmers,
I try to create a map with leaflet directive. You can see the fiddle here.
fiddle
In the fiddle above, when i drag the map, the marker will always be in the center. But when i zoom in/out (using the scroll), the map is zooming to the area of my mouse, thus changing the coordinate of my marker.
What should i do to make the map zoom to my marker in the center of the map (and not changing the marker coordinate) when I zoom in/out?
Any help is appreciated :)
This is the js code:
var app = angular.module('demoapp', ['leaflet-directive']);
app.controller('DemoController', ['$scope', 'leafletData', function($scope, leafletData) {
angular.extend($scope, {
center: {
lat: 51.505,
lng: -0.09,
zoom: 5
},
markers: {
marker: {
lat: 51.505,
lng: -0.09,
draggable: false
}
},
defaults: {
zoomControl: false
}
})
$scope.$on('leafletDirectiveMap.move', function(event, args) {
var map = args.leafletEvent.target;
var center = map.getCenter();
// Update the marker.
$scope.markers = {
marker: {
draggable: false,
lat: center.lat,
lng: center.lng,
draggable: false
}
};
});
}]);