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

Commit 4dacd3d

Browse files
committed
feat(documentation): Added more "markers" attribute documentation.
1 parent 8b7f928 commit 4dacd3d

File tree

1 file changed

+55
-0
lines changed

1 file changed

+55
-0
lines changed

doc/markers-attribute.md

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,58 @@ Let's see an example of this feature on [this demo](http://tombatossals.github.i
7070

7171
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.
7272

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

Comments
 (0)