[Pkg-javascript-commits] [leaflet-markercluster] 88/479: Do another pass on the README to bring it up to date with the events changes etc.
Jonas Smedegaard
dr at jones.dk
Thu Oct 16 16:00:13 UTC 2014
This is an automated email from the git hooks/post-receive script.
js pushed a commit to branch master
in repository leaflet-markercluster.
commit ad9ee303a53febcb87790cd2bd01ff4f49bc6a80
Author: danzel <danzel at localhost.geek.nz>
Date: Tue Jul 24 14:22:30 2012 +1200
Do another pass on the README to bring it up to date with the events changes etc.
---
README.md | 46 +++++++++++++++++++------------
example/marker-clustering-convexhull.html | 1 -
2 files changed, 29 insertions(+), 18 deletions(-)
diff --git a/README.md b/README.md
index 66bed24..d918071 100644
--- a/README.md
+++ b/README.md
@@ -4,8 +4,11 @@ Leaflet.markercluster
Provides Marker Clustering functionality for Leaflet
## Using the plugin
-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).
+See the included examples for usage.
+The [everything example](http://danzel.github.com/Leaflet.markercluster/example/marker-clustering-everything.html) is a good place to start, it utilises the MarkerCluser.Default class to provide all of the default functionality.
+Or check out the [custom example](http://danzel.github.com/Leaflet.markercluster/example/marker-clustering-custom.html) for how to customise the behaviour and appearance of the clusterer
+### Usage
Create a new MarkerClusterGroup, add your markers to it, then add it to the map
```javascript
@@ -15,11 +18,21 @@ markers.addLayer(new L.Marker(getRandomLatLng(map)));
map.addLayer(markers);
```
-For the complete example see example/marker-clustering.html
+### Defaults
+As a safe default you can use the included MarkerCluster.Default.(css/js) to provide default behaviour and appearance of the clusters.
-### Customising the Clustered Marker
+Include the .Default files (or use the prebuilt version) and create a MarkerClusterGroup as follows:
+```javascript
+var markers = new L.MarkerClusterGroup();
+L.MarkerClusterDefault.bindEvents(map, markers);
+... Add markers to the MarkerClusterGroup ...
+map.addLayer(markers);
+```
+
+### Customising the Clustered Markers
As an option to MarkerClusterGroup you can provide your own function for creating the Icon for the clustered markers.
The default implementation changes color at bounds of 10 and 100, but more advanced uses may require customising this.
+You do not need to include the .Default files if you go this way.
```javascript
var markers = new L.MarkerClusterGroup({ options: {
@@ -28,18 +41,21 @@ var markers = new L.MarkerClusterGroup({ options: {
}
}});
```
+Check out the [custom example](http://danzel.github.com/Leaflet.markercluster/example/marker-clustering-custom.html) for an example of this.
### Events
-If you register for click, mouseover, etc events on the MarkerClusterGroup you will get callbacks for both individual markers and clusters.
+If you register for click, mouseover, etc events just related to Markers in the cluster.
+To recieve events for clusters listen to 'cluster' + 'eventIWant', ex: 'clusterclick', 'clustermouseover'.
+
Set your callback up as follows to handle both cases:
```javascript
markers.on('click', function (a) {
- if (a.layer instanceof L.MarkerCluster) {
- console.log('cluster ' + a.layer.getAllChildMarkers().length);
- } else {
- console.log('marker ' + a.layer);
- }
+ console.log('marker ' + a.layer);
+});
+
+markers.on('clusterclick', function (a) {
+ console.log('cluster ' + a.layer.getAllChildMarkers().length);
});
```
@@ -47,10 +63,8 @@ markers.on('click', function (a) {
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()));
- }
+markers.on('clusterclick', function (a) {
+ map.addLayer(new L.Polygon(a.layer.getConvexHull()));
});
```
@@ -58,10 +72,8 @@ markers.on('click', function (a) {
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();
- }
+markers.on('clusterclick', function (a) {
+ a.layer.zoomToBounds();
});
```
diff --git a/example/marker-clustering-convexhull.html b/example/marker-clustering-convexhull.html
index bfad234..b8f5a83 100644
--- a/example/marker-clustering-convexhull.html
+++ b/example/marker-clustering-convexhull.html
@@ -55,7 +55,6 @@
var polygon;
- var polygonCluster;
markers.on('clustermouseover', function (a) {
console.log('cluster ' + a.layer.getAllChildMarkers().length);
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/leaflet-markercluster.git
More information about the Pkg-javascript-commits
mailing list