Readme/Example updates

This commit is contained in:
danzel
2012-07-18 11:55:21 +12:00
parent db3b7f2fc2
commit e0bcc5e56c
2 changed files with 24 additions and 4 deletions
+23 -3
View File
@@ -4,7 +4,7 @@ Leaflet.markercluster
Provides Marker Clustering functionality for Leaflet
## Using the plugin
See the included example for usage. Or [check it out online here](http://danzel.github.com/Leaflet.markercluster/example/marker-clustering.html)
See the included examples for usage. Or [check out the most basic example](http://danzel.github.com/Leaflet.markercluster/example/marker-clustering.html) or the [everything example](http://danzel.github.com/Leaflet.markercluster/example/marker-clustering-everything.html).
Create a new MarkerClusterGroup, add your markers to it, then add it to the map
@@ -30,7 +30,6 @@ var markers = new L.MarkerClusterGroup({ options: {
```
### Events
If you register for click, mouseover, etc events on the MarkerClusterGroup you will get callbacks for both individual markers and clusters.
Set your callback up as follows to handle both cases:
@@ -44,7 +43,28 @@ markers.on('click', function (a) {
});
```
### Getting the bounds of a cluster
When you recieve an event from a cluster you can query it for the bounds.
See [example/marker-clustering-convexhull.html](http://danzel.github.com/Leaflet.markercluster/example/marker-clustering-convexhull.html) for a working example.
```javascript
markers.on('click', function (a) {
if (a.layer instanceof L.MarkerCluster) {
map.addLayer(new L.Polygon(a.layer.getConvexHull()));
}
});
```
### Zooming to the bounds of a cluster
When you recieve an event from a cluster you can zoom to its bounds in one easy step.
See [marker-clustering-zoomtobounds.html](http://danzel.github.com/Leaflet.markercluster/example/marker-clustering-zoomtobounds.html) for a working example.
```javascript
markers.on('click', function (a) {
if (a.layer instanceof L.MarkerCluster) {
a.layer.zoomToBounds();
}
});
```
### License
Leaflet.markercluster is free software, and may be redistributed under the MIT-LICENSE.
+1 -1
View File
@@ -19,7 +19,7 @@
<body>
<div id="map"></div>
<span>Mouse over a cluster to see the bounds of its children and click a cluster to zoom to those bounds</span>
<script type="text/javascript">
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',