mohsen-angular-leaflet-directive
Version:
angular-leaflet-directive - An AngularJS directive to easily interact with Leaflet maps
195 lines (185 loc) • 8.1 kB
HTML
<html ng-app="demoapp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
<script src="../dist/angular-leaflet-directive.min.js"></script>
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
<style type="text/css">
p, h4 { margin: 10px 0; padding: 0; }
body { margin: 5px; }
body, html { height: 100%; }
div#control {
z-index: 100;
position: absolute;
bottom: 1em;
left: 1em;
background: white;
padding: .4em 1em;
opacity: .8;
border-radius: 8px;
}
input[type=number] { width: 90px }
div.angular-leaflet-map {
width: 100%;
height: 100%;
}
</style>
<script>
var app = angular.module("demoapp", ["leaflet-directive"]);
app.controller('PathsAdvancedController', [ '$scope', function($scope) {
$scope.addMarker = function() {
var m_key = document.getElementById('new_mm_name').value;
if ($scope.markers[m_key]) return;
$scope.markers[m_key] = {
lat: document.getElementById('new_mm_lat').value,
lng: document.getElementById('new_mm_lng').value,
draggable: true
};
$scope.paths.p1.latlngs.push($scope.markers[m_key]);
};
$scope.deleteMarker = function(m_key) {
var marker = $scope.markers[m_key];
for (var pkey in $scope.paths) {
for (var j in $scope.paths[pkey].latlngs) {
var p = $scope.paths[pkey].latlngs[j];
if (p === marker) {
$scope.paths[pkey].latlngs.splice(j, 1);
}
}
}
delete $scope.markers[m_key];
};
angular.extend($scope, {
// set up map center
cen: {
lat: 53,
lng: -3,
zoom: 6
},
// set up multiple markers on map
markers: {
London : {
lat: 51.50,
lng: -0.082,
draggable: false
},
Manchester: {
lat: 53.48,
lng: -2.24,
draggable: true
},
Lincoln: {
lat: 53.230495,
lng: -0.53936,
draggable: true
},
Northhampton: {
lat: 52.237892,
lng: -0.90087,
draggable: true
},
Worcester: {
lat: 52.187404,
lng: -2.20275,
draggable: true
},
York: {
lat: 53.959317,
lng: -1.08215,
draggable: true
}
}
});
angular.extend($scope, {
paths: {
p1: {
color: '#008000',
weight: 4,
latlngs: [ $scope.markers.London, $scope.markers.Manchester ]
},
p2: {
weight: 3,
opacity: 0.5,
latlngs: [
[ $scope.markers.London, $scope.markers.Lincoln ],
[ $scope.markers.Manchester, $scope.markers.Worcester]
],
type: 'multiPolyline'
},
c1: {
weight: 2,
color: '#ff612f',
latlngs: $scope.markers.Northhampton,
radius: 10000,
type: 'circle'
},
c2: {
weight: 2,
color: '#ff612f',
latlngs: $scope.markers.Lincoln,
radius: 50,
type: 'circleMarker'
},
pg1: {
latlngs: [ $scope.markers.London, $scope.markers.Worcester, $scope.markers.Lincoln ],
stroke: false,
fillColor: '#ff69b4',
type: 'polygon'
},
pg2: {
weight: 1,
color: '#2e3974',
latlngs: [
[ $scope.markers.London, $scope.markers.Worcester, $scope.markers.Northhampton ],
[ $scope.markers.Manchester, $scope.markers.Lincoln, $scope.markers.York ]
],
type: 'multiPolygon'
},
r1: {
latlngs: [ $scope.markers.Lincoln, $scope.markers.York ],
type: 'rectangle'
}
}
});
} ]);
</script>
</head>
<body ng-controller="PathsAdvancedController">
<leaflet lf-center="cen" lf-markers="markers" lf-paths="paths"></leaflet>
<h1>Advanced Paths Example</h1>
<div id="control">
<div class="panel">
<h3>Center</h3>
lat: <input type="number" step="any" ng-model="cen.lat" size="8"/>
lng: <input type="number" step="any" ng-model="cen.lng" size="8"/>
zoom: <input type="number" ng-model="cen.zoom" size="8"/>
</div>
<div class="panel">
<h3>Markers</h3>
<div ng-repeat="(name, m) in markers">
<p><b>{{name}}</b> ({{ !m.draggable && 'not ' || '' }}draggable):<p>
<input type="checkbox" ng-model="m.draggable"/>
lat: <input type="number" ng-disabled="!m.draggable" ng-model="m.lat"/>
lng: <input type="number" ng-disabled="!m.draggable" ng-model="m.lng"/>
<input type="button" value="del" ng-click="deleteMarker(name)"/>
</div>
<input id="new_mm_name" type="text" placeholder="name" size="8"/>
<input id="new_mm_lat" type="text" placeholder="lat" size="10"/>
<input id="new_mm_lng" type="text" placeholder="lng" size="10"/>
<input type="button" value="Add marker"
ng-click="addMarker()"/>
</div>
<div class="panel">
<h3>Paths</h3>
<div ng-repeat="path in paths">
<p style="display: inline;">color: <input type="color" ng-model="path.color" /> weight: <input type="number" ng-model="path.weight" /></p>
<ul>
<li ng-repeat="p in path.latlngs">(point {{$index}}) lat: <strong>{{ p.lat | number: 4 }}</strong> lng: <strong>{{ p.lng | number: 4}}</strong></li>
</ul>
</div>
</div>
</div>
</body>
</html>