mohsen-angular-leaflet-directive
Version:
angular-leaflet-directive - An AngularJS directive to easily interact with Leaflet maps
111 lines (105 loc) • 5.18 kB
HTML
<html ng-app="demoapp">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<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="../bower_components/Leaflet.label/dist/leaflet.label.js"></script>
<script src="../bower_components/leaflet-search/dist/leaflet-search.src.js"></script>
<script src="../dist/angular-leaflet-directive.min.js"></script>
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="../bower_components/leaflet-search/dist/leaflet-search.min.css" />
<link rel="stylesheet" href="../bower_components/Leaflet.label/dist/leaflet.label.css" />
<script>
var app = angular.module("demoapp", ["leaflet-directive"]);
app.controller("ControlsSearchController", [ "$scope", "leafletData", function($scope, leafletData) {
var markersData = [
{"loc":[41.575330,13.102411], "title":"aquamarine"},
{"loc":[41.575730,13.002411], "title":"black"},
{"loc":[41.807149,13.162994], "title":"blue"},
{"loc":[41.507149,13.172994], "title":"chocolate"},
{"loc":[41.847149,14.132994], "title":"coral"},
{"loc":[41.219190,13.062145], "title":"cyan"},
{"loc":[41.344190,13.242145], "title":"darkblue"},
{"loc":[41.679190,13.122145], "title":"darkred"},
{"loc":[41.329190,13.192145], "title":"darkgray"},
{"loc":[41.379290,13.122545], "title":"dodgerblue"},
{"loc":[41.409190,13.362145], "title":"gray"},
{"loc":[41.794008,12.583884], "title":"green"},
{"loc":[41.805008,12.982884], "title":"greenyellow"},
{"loc":[41.536175,13.273590], "title":"red"},
{"loc":[41.516175,13.373590], "title":"rosybrown"},
{"loc":[41.506175,13.173590], "title":"royalblue"},
{"loc":[41.836175,13.673590], "title":"salmon"},
{"loc":[41.796175,13.570590], "title":"seagreen"},
{"loc":[41.436175,13.573590], "title":"seashell"},
{"loc":[41.336175,13.973590], "title":"silver"},
{"loc":[41.236175,13.273590], "title":"skyblue"},
{"loc":[41.546175,13.473590], "title":"yellow"},
{"loc":[41.239190,13.032145], "title":"white"}
];
angular.extend($scope, {
center: {
lat: 41.575330,
lng: 13.102411,
zoom: 8
},
layers: {
baselayers: {
mapbox_light: {
name: 'Mapbox Light',
url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
type: 'xyz',
layerOptions: {
apikey: 'pk.eyJ1IjoiYnVmYW51dm9scyIsImEiOiJLSURpX0pnIn0.2_9NrLz1U9bpwMQBhVk97Q',
mapid: 'bufanuvols.lia22g09'
},
layerParams: {
showOnSelector: false
}
}
},
overlays: {
search: {
name: 'search',
type: 'group',
visible: true,
layerParams: {
showOnSelector: false
}
}
}
},
controls: {},
markers: {}
});
markersData.filter(function(data) {
$scope.markers[data.title] = {
title: data.title,
lat: data.loc[0],
lng: data.loc[1],
layer: 'search',
label: {
message: data.title
}
};
});
leafletData.getLayers().then(function(baselayers) {
console.log(baselayers.overlays.search);
angular.extend($scope.controls, {
search: {
layer: baselayers.overlays.search
}
});
});
}]);
</script>
</head>
<body ng-controller="ControlsSearchController">
<leaflet lf-center="center" lf-controls="controls" lf-markers="markers" lf-layers="layers" width="100%" height="480px"></leaflet>
<h1>Search control example</h1>
<p>Search for any of the marker names (mouseover to see the name). This is a simple example of use of <a href="http://labs.easyblog.it/maps/leaflet-search/">Leaflet search</a> plugin.</p>
</body>
</html>