mohsen-angular-leaflet-directive
Version:
angular-leaflet-directive - An AngularJS directive to easily interact with Leaflet maps
54 lines (53 loc) • 1.94 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>
.legend {
font: 14px/16px Arial, Helvetica, sans-serif;
background: rgba(255,255,255, 0.9);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
padding: 6px 8px;
width: 180px;
line-height: 18px;
color: #555;
}
.legend i {
width: 16px;
height: 16px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
</style>
<script>
var app = angular.module("demoapp", ["leaflet-directive"]);
app.controller('BasicLegendController', [ '$scope', function($scope) {
angular.extend($scope, {
london: {
lat: 51.505,
lng: -0.09,
zoom: 12
},
legend: {
position: 'bottomleft',
colors: [ '#ff0000', '#28c9ff', '#0000ff', '#ecf386' ],
labels: [ 'National Cycle Route', 'Regional Cycle Route', 'Local Cycle Network', 'Cycleway' ]
},
defaults: {
tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png"
}
});
} ]);
</script>
</head>
<body ng-controller="BasicLegendController">
<leaflet lf-center="london" lf-legend="legend" lf-defaults="defaults" width="100%" height="480px"></leaflet>
<h1>Legend example</h1>
</body>
</html>