You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Sep 20, 2019. It is now read-only.
Copy file name to clipboardExpand all lines: doc/markers-attribute.md
+55Lines changed: 55 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -70,3 +70,58 @@ Let's see an example of this feature on [this demo](http://tombatossals.github.i
70
70
71
71
This special rendering can be accomplished defining overlays of type _group_ and with _name_ property, and the markers will need a special property _layer_ with the name of the overlay we've previously defined.
72
72
73
+
Marker clustering without overlays
74
+
----------------------------------
75
+
We can use the [marker clustering plugin](https://github.com/Leaflet/Leaflet.markercluster) of Leaflet to group our markers depending of the zoom we're using. This can be accomplished by simply setting the _type_ property of the marker to the value _group_. Example:
76
+
77
+
```
78
+
markers: {
79
+
battersea: {
80
+
group: 'london',
81
+
lat: 51.4638,
82
+
lng: -0.1677
83
+
},
84
+
stoke: {
85
+
group: 'london',
86
+
lat: 51.5615,
87
+
lng: -0.0731
88
+
}
89
+
```
90
+
91
+
You can see an example running this [here](http://tombatossals.github.io/angular-leaflet-directive/examples/markers-clustering-without-overlays-example.html)
92
+
93
+
Marker clustering with overlays
94
+
-------------------------------
95
+
We can mix the overlays functionality with the marker clustering, grouping our markers by overlays. See this example:
96
+
97
+
```
98
+
layers: {
99
+
baselayers: { ... },
100
+
overlays: {
101
+
northTaiwan: {
102
+
name: "North cities",
103
+
type: "markercluster",
104
+
visible: true
105
+
}
106
+
}
107
+
}
108
+
109
+
markers: {
110
+
taipei: {
111
+
layer: "northTaiwan",
112
+
lat: 25.0391667,
113
+
lng: 121.525,
114
+
},
115
+
yangmei: {
116
+
layer: "northTaiwan",
117
+
lat: 24.9166667,
118
+
lng: 121.1333333
119
+
},
120
+
hsinchu: {
121
+
layer: "northTaiwan",
122
+
lat: 24.8047222,
123
+
lng: 120.9713889
124
+
},
125
+
```
126
+
127
+
You can see the complete example [here](http://tombatossals.github.io/angular-leaflet-directive/examples/markers-clustering-example.html)
0 commit comments