Skip to content
This repository was archived by the owner on Sep 20, 2019. It is now read-only.

Commit d0230d0

Browse files
tombatossalstombatossals
committed
feat(examples): New example of layer+markers with markerclustering usage
1 parent b279b2e commit d0230d0

File tree

1 file changed

+118
-0
lines changed

1 file changed

+118
-0
lines changed

‎examples/markers-clustering-example.html‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<!DOCTYPE html>
2+
<html ng-app="demoapp">
3+
<head>
4+
<script src="../bower_components/angular/angular.min.js"></script>
5+
<script src="../bower_components/leaflet-dist/leaflet.js"></script>
6+
<script src="../bower_components/leaflet.markerclusterer/dist/leaflet.markercluster.js"></script>
7+
<script src="../dist/angular-leaflet-directive.min.js"></script>
8+
<link rel="stylesheet" href="../bower_components/leaflet-dist/leaflet.css" />
9+
<link rel="stylesheet" href="../bower_components/leaflet.markerclusterer/dist/MarkerCluster.css" />
10+
<link rel="stylesheet" href="../bower_components/leaflet.markerclusterer/dist/MarkerCluster.Default.css" />
11+
<script>
12+
var app = angular.module("demoapp", ["leaflet-directive"]);
13+
app.controller("DemoController", [ "$scope", function($scope) {
14+
angular.extend($scope, {
15+
center: {
16+
lat: 24.0391667,
17+
lng: 121.525,
18+
zoom: 6
19+
},
20+
markers: {
21+
taipei: {
22+
layer: "northTaiwan",
23+
lat: 25.0391667,
24+
lng: 121.525,
25+
},
26+
yangmei: {
27+
layer: "northTaiwan",
28+
lat: 24.9166667,
29+
lng: 121.1333333
30+
},
31+
hsinchu: {
32+
layer: "northTaiwan",
33+
lat: 24.8047222,
34+
lng: 120.9713889
35+
},
36+
miaoli: {
37+
layer: "northTaiwan",
38+
lat: 24.5588889,
39+
lng: 120.8219444
40+
},
41+
tainan: {
42+
layer: "southTaiwan",
43+
lat: 22.9933333,
44+
lng: 120.2036111
45+
},
46+
puzi: {
47+
layer: "southTaiwan",
48+
lat: 23.4611,
49+
lng: 120.242
50+
},
51+
kaohsiung: {
52+
layer: "southTaiwan",
53+
lat: 22.6252777778,
54+
lng: 120.3088888889
55+
},
56+
taitun: {
57+
layer: "southTaiwan",
58+
lat: 22.75,
59+
lng: 121.15
60+
}
61+
},
62+
layers: {
63+
baselayers: {
64+
cloudmade: {
65+
name: 'Cloudmade Taiwan map',
66+
type: 'xyz',
67+
url: 'http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png',
68+
layerParams: {
69+
key: '007b9471b4c74da4a6ec7ff43552b16f',
70+
styleId: 7
71+
}
72+
}
73+
},
74+
overlays: {
75+
northTaiwan: {
76+
name: "North cities",
77+
type: "markercluster",
78+
visible: true
79+
},
80+
southTaiwan: {
81+
name: "South cities",
82+
type: "markercluster",
83+
visible: true
84+
}
85+
}
86+
}
87+
});
88+
}]);
89+
</script>
90+
<style>
91+
.angular-leaflet-map {
92+
width: 100%;
93+
height: 320px;
94+
}
95+
.left {
96+
float: left;
97+
width: 58%;
98+
padding-right: 1em;
99+
}
100+
.right {
101+
float: right;
102+
width: 40%;
103+
}
104+
</style>
105+
</head>
106+
<body ng-controller="DemoController">
107+
<leaflet center="center" markers="markers" layers="layers"></leaflet>
108+
<h1>Marker clustering example</h1>
109+
<div class="left">
110+
<p>You can create a marker-clustering group on the map, defining <strong>layers</strong> like this.</p>
111+
<pre ng-bind="layers | json"></pre>
112+
</div>
113+
<div class="right">
114+
<p>And your <strong>markers</strong> definition this way:</p>
115+
<pre ng-bind="markers | json"></pre>
116+
</div>
117+
</body>
118+
</html>

0 commit comments

Comments
 (0)