<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<link data-require="leaflet@0.7.7" data-semver="0.7.7" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
<script data-require="leaflet@0.7.7" data-semver="0.7.7" src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="https://code.angularjs.org/1.5.7/angular.js" data-semver="1.5.7" data-require="angularjs@1.5.7"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-leaflet-directive/0.10.0/angular-leaflet-directive.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MapController">
<leaflet lf-center="center" markers="markers" width="100%" height="480px"></leaflet>
<button ng-click="autoMode = !autoMode">{{autoMode ? 'Auto' : 'Manual'}} mode</button>
</body>
</html>
var app = angular.module('demoapp', ['leaflet-directive']);
app.controller('MapController', ['$scope', '$timeout', function($scope, $timeout) {
$scope.center = {
lat: 46.43,
lng: 14.06,
zoom: 13
};
$scope.markers = {
jesenice: {
lat: 46.4367,
lng: 14.0526
},
hrusica: {
lat: 46.4489,
lng: 14.0113
},
koroskaBela: {
lat: 46.4262,
lng: 14.0988
},
blejskaDobrava: {
lat: 46.4077,
lng: 14.0989
}
};
var programmaticMapManipulation = false;
$scope.$on('leafletDirectiveMarker.click', function(event, args) {
if ($scope.autoMode) {
var marker = $scope.markers[args.modelName];
programmaticMapManipulation = true;
$scope.center.lat = marker.lat;
$scope.center.lng = marker.lng;
$timeout(function() {
programmaticMapManipulation = false;
});
}
});
$scope.autoMode = true;
$scope.$on('leafletDirectiveMap.movestart', function(event, args) {
if (!programmaticMapManipulation) {
$scope.autoMode = false;
}
});
}]);
/* Styles go here */
[Blogpost](http://www.damirscorner.com/blog/posts/20160626-DistinguishBetweenManualAndProgrammaticMapMovementInLeaflet.html) sample code.