mohsen-angular-leaflet-directive
Version:
angular-leaflet-directive - An AngularJS directive to easily interact with Leaflet maps
155 lines (138 loc) • 5.59 kB
HTML
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
<script src="../bower_components/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
<script src="../dist/angular-leaflet-directive_dev_mapped.js"></script>
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="../bower_components/leaflet.markercluster/dist/MarkerCluster.Default.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div{
margin:10px;
}
</style>
<script>
angular.module('demoApp', ['leaflet-directive'])
.controller('Ctrl', ['$scope', 'leafletData', '$timeout', function($scope, leafletData, $timeout) {
angular.extend($scope, {
center: {
lat: 48.879633,
lng: 2.331717,
zoom: 14
},
layers: {
baselayers: {
osm: {
name: 'OpenStreetMap',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
type: 'xyz'
}
},
overlays: {
mapdescription: {
name: 'Markers added',
type: 'group',
visible: true
},
points: {
name: 'Points of interest',
type: 'group',
visible: true
}
}
},
defaultIcon: {},
markers: {
"mapdescription": [],
"points": [{
"layer": "points",
"lat": 48.879633,
"lng": 2.331717,
"message": "MALL 1"
}, {
"layer": "points",
"lat": 48.879318,
"lng": 2.33151,
"message": "MALL 2"
}]
}
});
$timeout(function(){
//move a point to see if it moves on the map
$scope.markers.points[1] = {
layer: "points",
lat: 48.889318,
lng: 2.33151,
message: "MALL 2"
};
},2000);
$scope.$on("leafletDirectiveMap.click", function(event, args) {
if(args.model.mapId != 'map1') return;
var leafEvent = args.leafletEvent;
// console.log("before", $scope.markers.mapdescription, $scope.markers.points);
$scope.markers.mapdescription.push({
layer: 'mapdescription',
lat: leafEvent.latlng.lat,
lng: leafEvent.latlng.lng,
draggable: true,
icon: ''
});
// console.log("after", $scope.markers.mapdescription, $scope.markers.points);
});
$scope.$on("leafletDirectiveMarker.contextmenu", function(event, args) {
var marker_index = parseInt(args.modelName.replace('mapdescription.', ''));
$scope.markers.mapdescription.splice(marker_index, 1);
});
}])
.controller('Ctrl2', ['$scope', 'leafletData', function($scope, leafletData) {
angular.extend($scope, {
center: {
lat: 48.879633,
lng: 2.331717,
zoom: 15
},
layers: {
baselayers: {
osm: {
name: 'OpenStreetMap',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
type: 'xyz'
}
}
},
defaultIcon: {},
markers: [{
"lat": 48.879633,
"lng": 2.331717,
"message": "MALL 1"
}, {
"lat": 48.879318,
"lng": 2.33151,
"message": "MALL 2"
}]
});
$scope.$on("leafletDirectiveMap.click", function(event, args) {
if(args.model.mapId != 'map2') return;
var leafEvent = args.leafletEvent;
$scope.markers.push({
lat: leafEvent.latlng.lat,
lng: leafEvent.latlng.lng,
draggable: true,
icon: ''
});
});
}]);
</script>
</head>
<body >
<div ng-controller="Ctrl">
<leaflet id="map1" width="100%" height="480px" lf-center="center" lf-markers="markers" lf-markers-nested="true" lf-layers="layers"></leaflet>
</div>
<div ng-controller="Ctrl2">
<leaflet id="map2" width="100%" height="480px" lf-center="center" lf-markers="markers" lf-layers="layers"></leaflet>
</div>
</body>
</html>