Skip to content

Commit 18597cb

Browse files
tombatossalstombatossals
committed
feat(controls): Added new example of the search-plugin
1 parent b1b85de commit 18597cb

File tree

1 file changed

+110
-0
lines changed

1 file changed

+110
-0
lines changed

‎examples/0405-controls-search-example.html‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!DOCTYPE html>
2+
<html ng-app="demoapp">
3+
<head>
4+
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
5+
<meta content="utf-8" http-equiv="encoding">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<script src="../bower_components/angular/angular.min.js"></script>
8+
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
9+
<script src="../bower_components/Leaflet.label/dist/leaflet.label.js"></script>
10+
<script src="../bower_components/leaflet-search/dist/leaflet-search.src.js"></script>
11+
<script src="../dist/angular-leaflet-directive.min.js"></script>
12+
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
13+
<link rel="stylesheet" href="../bower_components/leaflet-search/dist/leaflet-search.min.css" />
14+
<link rel="stylesheet" href="../bower_components/Leaflet.label/dist/leaflet.label.css" />
15+
16+
<script>
17+
var app = angular.module("demoapp", ["leaflet-directive"]);
18+
app.controller("ControlsSearchController", [ "$scope", "leafletData", function($scope, leafletData) {
19+
20+
var markersData = [
21+
{"loc":[41.575330,13.102411], "title":"aquamarine"},
22+
{"loc":[41.575730,13.002411], "title":"black"},
23+
{"loc":[41.807149,13.162994], "title":"blue"},
24+
{"loc":[41.507149,13.172994], "title":"chocolate"},
25+
{"loc":[41.847149,14.132994], "title":"coral"},
26+
{"loc":[41.219190,13.062145], "title":"cyan"},
27+
{"loc":[41.344190,13.242145], "title":"darkblue"},
28+
{"loc":[41.679190,13.122145], "title":"darkred"},
29+
{"loc":[41.329190,13.192145], "title":"darkgray"},
30+
{"loc":[41.379290,13.122545], "title":"dodgerblue"},
31+
{"loc":[41.409190,13.362145], "title":"gray"},
32+
{"loc":[41.794008,12.583884], "title":"green"},
33+
{"loc":[41.805008,12.982884], "title":"greenyellow"},
34+
{"loc":[41.536175,13.273590], "title":"red"},
35+
{"loc":[41.516175,13.373590], "title":"rosybrown"},
36+
{"loc":[41.506175,13.173590], "title":"royalblue"},
37+
{"loc":[41.836175,13.673590], "title":"salmon"},
38+
{"loc":[41.796175,13.570590], "title":"seagreen"},
39+
{"loc":[41.436175,13.573590], "title":"seashell"},
40+
{"loc":[41.336175,13.973590], "title":"silver"},
41+
{"loc":[41.236175,13.273590], "title":"skyblue"},
42+
{"loc":[41.546175,13.473590], "title":"yellow"},
43+
{"loc":[41.239190,13.032145], "title":"white"}
44+
];
45+
46+
angular.extend($scope, {
47+
center: {
48+
lat: 41.575330,
49+
lng: 13.102411,
50+
zoom: 8
51+
},
52+
layers: {
53+
baselayers: {
54+
mapbox_light: {
55+
name: 'Mapbox Light',
56+
url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
57+
type: 'xyz',
58+
layerOptions: {
59+
apikey: 'pk.eyJ1IjoiYnVmYW51dm9scyIsImEiOiJLSURpX0pnIn0.2_9NrLz1U9bpwMQBhVk97Q',
60+
mapid: 'bufanuvols.lia22g09'
61+
},
62+
layerParams: {
63+
showOnSelector: false
64+
}
65+
}
66+
},
67+
overlays: {
68+
search: {
69+
name: 'search',
70+
type: 'group',
71+
visible: true,
72+
layerParams: {
73+
showOnSelector: false
74+
}
75+
}
76+
}
77+
},
78+
controls: {},
79+
markers: {}
80+
});
81+
82+
markersData.filter(function(data) {
83+
$scope.markers[data.title] = {
84+
title: data.title,
85+
lat: data.loc[0],
86+
lng: data.loc[1],
87+
layer: 'search',
88+
label: {
89+
message: data.title
90+
}
91+
};
92+
});
93+
94+
leafletData.getLayers().then(function(baselayers) {
95+
console.log(baselayers.overlays.search);
96+
angular.extend($scope.controls, {
97+
search: {
98+
layer: baselayers.overlays.search
99+
}
100+
});
101+
});
102+
}]);
103+
</script>
104+
</head>
105+
<body ng-controller="ControlsSearchController">
106+
<leaflet center="center" controls="controls" markers="markers" layers="layers" width="100%" height="480px"></leaflet>
107+
<h1>Search control example</h1>
108+
<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>
109+
</body>
110+
</html>

0 commit comments

Comments
 (0)