leaflet-markercluster
Advanced tools
Comparing version 0.2.0 to 0.2.1
{ | ||
"name": "leaflet-markercluster", | ||
"version": "0.2.0", | ||
"version": "0.2.1", | ||
"description": "Provides Beautiful Animated Marker Clustering functionality for Leaflet", | ||
@@ -5,0 +5,0 @@ "main": "leaflet.markercluster-src.js", |
139
README.md
@@ -1,124 +0,59 @@ | ||
Leaflet.markercluster | ||
===================== | ||
# WARNING: Deprecated package | ||
Provides Beautiful Animated Marker Clustering functionality for Leaflet | ||
## Use the official [Leaflet.markercluster](https://www.npmjs.com/package/leaflet.markercluster) (with a dot) package instead | ||
*Requires Leaflet 0.4.2 or newer* | ||
It is published and maintained by [danzel](https://www.npmjs.com/~danzel), the | ||
original author of [Leaflet.markercluster](https://github.com/Leaflet/Leaflet.markercluster) | ||
plugin. | ||
## Using the plugin | ||
See the included examples for usage. | ||
```bash | ||
$ npm uninstall leaflet-markercluster --save | ||
The [realworld example](http://danzel.github.com/Leaflet.markercluster/example/marker-clustering-realworld.388.html) is a good place to start, it uses all of the defaults of the clusterer. | ||
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 | ||
# The closest version is 0.3.0: | ||
$ npm install leaflet.markercluster@0.3.0 --save | ||
### Usage | ||
Create a new MarkerClusterGroup, add your markers to it, then add it to the map | ||
```javascript | ||
var markers = new L.MarkerClusterGroup(); | ||
markers.addLayer(new L.Marker(getRandomLatLng(map))); | ||
... Add more layers ... | ||
map.addLayer(markers); | ||
``` | ||
### Defaults | ||
By default the Clusterer enables some nice defaults for you: | ||
showCoverageOnHover: When you mouse over a cluster it shows the bounds of its markers. | ||
zoomToBoundsOnClick: When you click a cluster we zoom to its bounds. | ||
spiderfyOnMaxZoom: When you click a cluster at the bottom zoom level we spiderfy it so you can see all of its markers. | ||
You can disable any of these as you want in the options when you create the MarkerClusterGroup: | ||
```javascript | ||
var markers = new L.MarkerClusterGroup({ spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false }); | ||
``` | ||
## Explanation | ||
### 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 css if you go this way. | ||
You are passed a MarkerCluster object, you'll probably want to use getChildCount() or getAllChildMarkers() to work out the icon to show | ||
This "unofficial" package has been published by an unknown soul back in 2013. | ||
```javascript | ||
var markers = new L.MarkerClusterGroup({ options: { | ||
iconCreateFunction: function(cluster) { | ||
return new L.DivIcon({ html: '<b>' + cluster.getChildCount() + '</b>' }); | ||
} | ||
}}); | ||
``` | ||
Check out the [custom example](http://danzel.github.com/Leaflet.markercluster/example/marker-clustering-custom.html) for an example of this. | ||
It has never been updated since then unfortunately. | ||
### All Options | ||
Enabled by default (boolean options): | ||
* **zoomToBoundsOnClick**: When you mouse over a cluster it shows the bounds of its markers. | ||
* **showCoverageOnHover**: When you click a cluster we zoom to its bounds. | ||
* **spiderfyOnMaxZoom**: When you click a cluster at the bottom zoom level we spiderfy it so you can see all of its markers. | ||
Whereas the corresponding repository on GitHub has gone through many minor and | ||
major releases, and an "official" npm package has been published and is still | ||
currently maintained. | ||
Other options | ||
* **animateAddingMarkers**: If set to true then adding individual markers to the MarkerClusterGroup after it has been added to the map will add the marker and animate it in to the cluster. Defaults to false as this gives better performance when bulk adding markers. | ||
* **disableClusteringAtZoom**: If set, at this zoom level and below markers will not be clustered. This defaults to disabled. [See Example](http://danzel.github.com/Leaflet.markercluster/example/marker-clustering-realworld-maxzoom.388.html) | ||
* **maxClusterRadius**: The maximum radius that a cluster will cover from the central marker (in pixels). Default 80. Decreasing will make more smaller clusters. | ||
* **polygonOptions**: Options to pass when creating the L.Polygon to show the bounds of a cluster | ||
* **singleMarkerMode**: If set to true, overrides the icon for all added markers to make them appear as a 1 size cluster | ||
* **spiderfyDistanceMultiplier**: Increase from 1 to increase the distance away from the center that spiderfied markers are placed. Use if you are using big marker icons. | ||
This `0.2.1` version is actually the same as the `0.2.0` that had been originally | ||
published, but with this modified README. | ||
The change of version is only to be able to publish to npm. | ||
## Events | ||
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'. | ||
So that users who keep on downloading this `leaflet-markercluster` (with a dash) | ||
package will not suddenly get a broken build, but receive the deprecation notice. | ||
And any future visitor of this page will get the information to use the | ||
"official" package instead. | ||
Set your callback up as follows to handle both cases: | ||
```javascript | ||
markers.on('click', function (a) { | ||
console.log('marker ' + a.layer); | ||
}); | ||
## New versions | ||
markers.on('clusterclick', function (a) { | ||
console.log('cluster ' + a.layer.getAllChildMarkers().length); | ||
}); | ||
``` | ||
[Leaflet](http://leafletjs.com/) and | ||
[Leaflet.markercluster](https://github.com/Leaflet/Leaflet.markercluster) | ||
have gone through many minor and major releases since this "unofficial" package | ||
has been published. | ||
## Methods | ||
You might be interested in trying leaflet@0.7.7 + leaflet.markercluster@0.5.0, | ||
or leaflet@1.0.3 + leaflet.markercluster@1.0.4 (latest releases as of time of | ||
writing). | ||
### 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('clusterclick', function (a) { | ||
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('clusterclick', function (a) { | ||
a.layer.zoomToBounds(); | ||
}); | ||
``` | ||
## Note about leaflet-engine package | ||
### Adding and removing Markers | ||
addLayer, removeLayer and clearLayers are supported and they should work for most uses. | ||
Exact same story applies for [leaflet-engine](https://www.npmjs.com/package/leaflet-engine) | ||
package. | ||
### Bulk adding and removing Markers | ||
addLayers and removeLayers are bulk methods for adding and removing markers and should be favoured over the single versions when doing bulk addition/removal of markers. Each takes an array of markers | ||
It is an "unofficial" package (published by the same unknown soul back in 2013). | ||
If you are removing a lot of markers it will almost definitely be better to call clearLayers then call addLayers to add the markers you don't want to remove back in. See [#59](https://github.com/danzel/Leaflet.markercluster/issues/59#issuecomment-9320628) for details. | ||
### Other Methods | ||
```` | ||
hasLayer(layer): Returns true if the given layer (marker) is in the MarkerClusterGroup | ||
zoomToShowLayer(layer, callback): Zooms to show the given marker (spidifying if required), calls the callback when the marker is visible on the map | ||
addLayers(layerArray): Adds the markers in the given array from the MarkerClusterGroup in an efficent bulk method. | ||
removeLayers(layerArray): Removes the markers in the given array from the MarkerClusterGroup in an efficent bulk method. | ||
```` | ||
## Handling LOTS of markers | ||
The Clusterer can handle 10000 or even 50000 markers (in chrome). IE9 has some issues with 50000. | ||
[realworld 10000 example](http://danzel.github.com/Leaflet.markercluster/example/marker-clustering-realworld.10000.html) | ||
[realworld 50000 example](http://danzel.github.com/Leaflet.markercluster/example/marker-clustering-realworld.50000.html) | ||
Performance optimizations could be done so these are handled more gracefully (Running the initial clustering over multiple JS calls rather than locking the browser for a long time) | ||
### License | ||
Leaflet.markercluster is free software, and may be redistributed under the MIT-LICENSE. | ||
You should use the "official" [leaflet](https://www.npmjs.com/package/leaflet) | ||
npm package instead. It is published and maintained by the main authors of | ||
Leaflet. |
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Non-existent author
Supply chain riskThe package was published by an npm account that no longer exists.
Found 1 instance in 1 package
97907
12
0
60
1