![\"Marketplace](\"http://www.x-services.nl/github-images/telerik-verified-plugins-marketplace.png\") | \n For a quick demo app and easy code samples, check out the plugin page at the Verified Plugins Marketplace: http://plugins.telerik.com/plugin/calendar | \n
\nFor a Leaflet 0.5 compatible version, [Download b128e950](https://github.com/Leaflet/Leaflet.markercluster/archive/b128e950d8f5d7da5b60bd0aa9a88f6d3dd17c98.zip)
\nFor a Leaflet 0.4 compatible version, [Download the 0.2 release](https://github.com/Leaflet/Leaflet.markercluster/archive/0.2.zip)\n\n\n## Table of Contents\n * [Using the plugin](#using-the-plugin)\n * [Building, testing and linting scripts](#building-testing-and-linting-scripts)\n * [Examples](#examples)\n * [Usage](#usage)\n * [Options](#options)\n * [Defaults](#defaults)\n * [Customising the Clustered Markers](#customising-the-clustered-markers)\n * [Customising Spiderfy shape positions](#customising-spiderfy-shape-positions)\n * [All Options](#all-options)\n * [Enabled by default (boolean options)](#enabled-by-default-boolean-options)\n * [Other options](#other-options)\n * [Chunked addLayers options](#chunked-addlayers-options)\n * [Events](#events)\n * [Additional MarkerClusterGroup Events](#additional-markerclustergroup-events)\n * [Methods](#methods)\n * [Group methods](#group-methods)\n * [Adding and removing Markers](#adding-and-removing-markers)\n * [Bulk adding and removing Markers](#bulk-adding-and-removing-markers)\n * [Getting the visible parent of a marker](#getting-the-visible-parent-of-a-marker)\n * [Refreshing the clusters icon](#refreshing-the-clusters-icon)\n * [Other Group Methods](#other-group-methods)\n * [Clusters methods](#clusters-methods)\n * [Getting the bounds of a cluster](#getting-the-bounds-of-a-cluster)\n * [Zooming to the bounds of a cluster](#zooming-to-the-bounds-of-a-cluster)\n * [Other clusters methods](#other-clusters-methods)\n * [Handling LOTS of markers](#handling-lots-of-markers)\n * [License](#license)\n * [Sub-plugins](#sub-plugins)\n\n\n## Using the plugin\nInclude the plugin CSS and JS files on your page after Leaflet files, using your method of choice:\n* [Download the `v1.4.1` release](https://github.com/Leaflet/Leaflet.markercluster/archive/v1.4.1.zip)\n* Use unpkg CDN: `https://unpkg.com/leaflet.markercluster@1.4.1/dist/`\n* Install with npm: `npm install leaflet.markercluster`\n\nIn each case, use files in the `dist` folder:\n* `MarkerCluster.css`\n* `MarkerCluster.Default.css` (not needed if you use your own `iconCreateFunction` instead of the default one)\n* `leaflet.markercluster.js` (or `leaflet.markercluster-src.js` for the non-minified version)\n\n### Building, testing and linting scripts\nInstall jake `npm install -g jake` then run `npm install`\n* To check the code for errors and build Leaflet from source, run `jake`.\n* To run the tests, run `jake test`.\n\n### Examples\nSee the included examples for usage.\n\nThe [realworld example](https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html) is a good place to start, it uses all of the defaults of the clusterer.\nOr check out the [custom example](https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-custom.html) for how to customise the behaviour and appearance of the clusterer\n\n### Usage\nCreate a new MarkerClusterGroup, add your markers to it, then add it to the map\n\n```javascript\nvar markers = L.markerClusterGroup();\nmarkers.addLayer(L.marker(getRandomLatLng(map)));\n... Add more layers ...\nmap.addLayer(markers);\n```\n\n## Options\n### Defaults\nBy default the Clusterer enables some nice defaults for you:\n* **showCoverageOnHover**: When you mouse over a cluster it shows the bounds of its markers.\n* **zoomToBoundsOnClick**: When you click a cluster we zoom to its bounds.\n* **spiderfyOnMaxZoom**: When you click a cluster at the bottom zoom level we spiderfy it so you can see all of its markers. (*Note: the spiderfy occurs at the current zoom level if all items within the cluster are still clustered at the maximum zoom level or at zoom specified by `disableClusteringAtZoom` option*)\n* **removeOutsideVisibleBounds**: Clusters and markers too far from the viewport are removed from the map for performance.\n* **spiderLegPolylineOptions**: Allows you to specify [PolylineOptions](http://leafletjs.com/reference.html#polyline-options) to style spider legs. By default, they are `{ weight: 1.5, color: '#222', opacity: 0.5 }`.\n\nYou can disable any of these as you want in the options when you create the MarkerClusterGroup:\n```javascript\nvar markers = L.markerClusterGroup({\n\tspiderfyOnMaxZoom: false,\n\tshowCoverageOnHover: false,\n\tzoomToBoundsOnClick: false\n});\n```\n\n### Customising the Clustered Markers\nAs an option to MarkerClusterGroup you can provide your own function for creating the Icon for the clustered markers.\nThe default implementation changes color at bounds of 10 and 100, but more advanced uses may require customising this.\nYou do not need to include the .Default css if you go this way.\nYou are passed a MarkerCluster object, you'll probably want to use `getChildCount()` or `getAllChildMarkers()` to work out the icon to show.\n\n```javascript\nvar markers = L.markerClusterGroup({\n\ticonCreateFunction: function(cluster) {\n\t\treturn L.divIcon({ html: '' + cluster.getChildCount() + '' });\n\t}\n});\n```\n\nCheck out the [custom example](https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-custom.html) for an example of this.\n\nIf you need to update the clusters icon (e.g. they are based on markers real-time data), use the method [refreshClusters()](#refreshing-the-clusters-icon).\n\n### Customising Spiderfy shape positions\nYou can also provide a custom function as an option to MarkerClusterGroup to override the spiderfy shape positions. The example below implements linear spiderfy positions which overrides the default circular shape.\n\n```javascript\nvar markers = L.markerClusterGroup({\n\tspiderfyShapePositions: function(count, centerPt) {\n var distanceFromCenter = 35,\n markerDistance = 45,\n lineLength = markerDistance * (count - 1),\n lineStart = centerPt.y - lineLength / 2,\n res = [],\n i;\n\n res.length = count;\n\n for (i = count - 1; i >= 0; i--) {\n res[i] = new Point(centerPt.x + distanceFromCenter, lineStart + markerDistance * i);\n }\n\n return res;\n }\n});\n```\n\n### All Options\n#### Enabled by default (boolean options)\n* **showCoverageOnHover**: When you mouse over a cluster it shows the bounds of its markers.\n* **zoomToBoundsOnClick**: When you click a cluster we zoom to its bounds.\n* **spiderfyOnMaxZoom**: When you click a cluster at the bottom zoom level we spiderfy it so you can see all of its markers. (*Note: the spiderfy occurs at the current zoom level if all items within the cluster are still clustered at the maximum zoom level or at zoom specified by `disableClusteringAtZoom` option*).\n* **removeOutsideVisibleBounds**: Clusters and markers too far from the viewport are removed from the map for performance.\n* **animate**: Smoothly split / merge cluster children when zooming and spiderfying. If `L.DomUtil.TRANSITION` is false, this option has no effect (no animation is possible).\n\n#### Other options\n* **animateAddingMarkers**: If set to true (and `animate` option is also true) then adding individual markers to the MarkerClusterGroup after it has been added to the map will add the marker and animate it into the cluster. Defaults to false as this gives better performance when bulk adding markers. addLayers does not support this, only addLayer with individual Markers.\n* **disableClusteringAtZoom**: If set, at this zoom level and below, markers will not be clustered. This defaults to disabled. [See Example](https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld-maxzoom.388.html). Note: you may be interested in disabling `spiderfyOnMaxZoom` option when using `disableClusteringAtZoom`.\n* **maxClusterRadius**: The maximum radius that a cluster will cover from the central marker (in pixels). Default 80. Decreasing will make more, smaller clusters. You can also use a function that accepts the current map zoom and returns the maximum cluster radius in pixels.\n* **polygonOptions**: Options to pass when creating the L.Polygon(points, options) to show the bounds of a cluster. Defaults to empty, which lets Leaflet use the [default Path options](http://leafletjs.com/reference.html#path-options).\n* **singleMarkerMode**: If set to true, overrides the icon for all added markers to make them appear as a 1 size cluster. Note: the markers are not replaced by cluster objects, only their icon is replaced. Hence they still react to normal events, and option `disableClusteringAtZoom` does not restore their previous icon (see [#391](https://github.com/Leaflet/Leaflet.markercluster/issues/391)).\n* **spiderLegPolylineOptions**: Allows you to specify [PolylineOptions](http://leafletjs.com/reference.html#polyline-options) to style spider legs. By default, they are `{ weight: 1.5, color: '#222', opacity: 0.5 }`.\n* **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 (Default: 1).\n* **iconCreateFunction**: Function used to create the cluster icon. See [the default implementation](https://github.com/Leaflet/Leaflet.markercluster/blob/15ed12654acdc54a4521789c498e4603fe4bf781/src/MarkerClusterGroup.js#L542) or the [custom example](https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-custom.html).\n* **spiderfyShapePositions**: Function used to override spiderfy default shape positions. \n* **clusterPane**: Map pane where the cluster icons will be added. Defaults to L.Marker's default (currently 'markerPane'). [See the pane example](https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-pane.html).\n\n#### Chunked addLayers options\nOptions for the [addLayers](#bulk-adding-and-removing-markers) method. See [#357](https://github.com/Leaflet/Leaflet.markercluster/issues/357) for explanation on how the chunking works.\n* **chunkedLoading**: Boolean to split the addLayer**s** processing in to small intervals so that the page does not freeze.\n* **chunkInterval**: Time interval (in ms) during which addLayers works before pausing to let the rest of the page process. In particular, this prevents the page from freezing while adding a lot of markers. Defaults to 200ms.\n* **chunkDelay**: Time delay (in ms) between consecutive periods of processing for addLayers. Default to 50ms.\n* **chunkProgress**: Callback function that is called at the end of each chunkInterval. Typically used to implement a progress indicator, e.g. [code in RealWorld 50k](https://github.com/Leaflet/Leaflet.markercluster/blob/master/example/marker-clustering-realworld.50000.html#L33-L49). Defaults to null. Arguments:\n 1. Number of processed markers\n 2. Total number of markers being added\n 3. Elapsed time (in ms)\n\n## Events\nLeaflet events like `click`, `mouseover`, etc. are just related to _Markers_ in the cluster.\nTo receive events for clusters, listen to `'cluster' + '
| \n For a quick demo app and easy code samples, check out the plugin page at the Verified Plugins Marketplace: http://plugins.telerik.com/plugin/calendar | \n
\nFor a Leaflet 0.5 compatible version, [Download b128e950](https://github.com/Leaflet/Leaflet.markercluster/archive/b128e950d8f5d7da5b60bd0aa9a88f6d3dd17c98.zip)
\nFor a Leaflet 0.4 compatible version, [Download the 0.2 release](https://github.com/Leaflet/Leaflet.markercluster/archive/0.2.zip)\n\n\n## Table of Contents\n * [Using the plugin](#using-the-plugin)\n * [Building, testing and linting scripts](#building-testing-and-linting-scripts)\n * [Examples](#examples)\n * [Usage](#usage)\n * [Options](#options)\n * [Defaults](#defaults)\n * [Customising the Clustered Markers](#customising-the-clustered-markers)\n * [Customising Spiderfy shape positions](#customising-spiderfy-shape-positions)\n * [All Options](#all-options)\n * [Enabled by default (boolean options)](#enabled-by-default-boolean-options)\n * [Other options](#other-options)\n * [Chunked addLayers options](#chunked-addlayers-options)\n * [Events](#events)\n * [Additional MarkerClusterGroup Events](#additional-markerclustergroup-events)\n * [Methods](#methods)\n * [Group methods](#group-methods)\n * [Adding and removing Markers](#adding-and-removing-markers)\n * [Bulk adding and removing Markers](#bulk-adding-and-removing-markers)\n * [Getting the visible parent of a marker](#getting-the-visible-parent-of-a-marker)\n * [Refreshing the clusters icon](#refreshing-the-clusters-icon)\n * [Other Group Methods](#other-group-methods)\n * [Clusters methods](#clusters-methods)\n * [Getting the bounds of a cluster](#getting-the-bounds-of-a-cluster)\n * [Zooming to the bounds of a cluster](#zooming-to-the-bounds-of-a-cluster)\n * [Other clusters methods](#other-clusters-methods)\n * [Handling LOTS of markers](#handling-lots-of-markers)\n * [License](#license)\n * [Sub-plugins](#sub-plugins)\n\n\n## Using the plugin\nInclude the plugin CSS and JS files on your page after Leaflet files, using your method of choice:\n* [Download the `v1.4.1` release](https://github.com/Leaflet/Leaflet.markercluster/archive/v1.4.1.zip)\n* Use unpkg CDN: `https://unpkg.com/leaflet.markercluster@1.4.1/dist/`\n* Install with npm: `npm install leaflet.markercluster`\n\nIn each case, use files in the `dist` folder:\n* `MarkerCluster.css`\n* `MarkerCluster.Default.css` (not needed if you use your own `iconCreateFunction` instead of the default one)\n* `leaflet.markercluster.js` (or `leaflet.markercluster-src.js` for the non-minified version)\n\n### Building, testing and linting scripts\nInstall jake `npm install -g jake` then run `npm install`\n* To check the code for errors and build Leaflet from source, run `jake`.\n* To run the tests, run `jake test`.\n\n### Examples\nSee the included examples for usage.\n\nThe [realworld example](https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html) is a good place to start, it uses all of the defaults of the clusterer.\nOr check out the [custom example](https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-custom.html) for how to customise the behaviour and appearance of the clusterer\n\n### Usage\nCreate a new MarkerClusterGroup, add your markers to it, then add it to the map\n\n```javascript\nvar markers = L.markerClusterGroup();\nmarkers.addLayer(L.marker(getRandomLatLng(map)));\n... Add more layers ...\nmap.addLayer(markers);\n```\n\n## Options\n### Defaults\nBy default the Clusterer enables some nice defaults for you:\n* **showCoverageOnHover**: When you mouse over a cluster it shows the bounds of its markers.\n* **zoomToBoundsOnClick**: When you click a cluster we zoom to its bounds.\n* **spiderfyOnMaxZoom**: When you click a cluster at the bottom zoom level we spiderfy it so you can see all of its markers. (*Note: the spiderfy occurs at the current zoom level if all items within the cluster are still clustered at the maximum zoom level or at zoom specified by `disableClusteringAtZoom` option*)\n* **removeOutsideVisibleBounds**: Clusters and markers too far from the viewport are removed from the map for performance.\n* **spiderLegPolylineOptions**: Allows you to specify [PolylineOptions](http://leafletjs.com/reference.html#polyline-options) to style spider legs. By default, they are `{ weight: 1.5, color: '#222', opacity: 0.5 }`.\n\nYou can disable any of these as you want in the options when you create the MarkerClusterGroup:\n```javascript\nvar markers = L.markerClusterGroup({\n\tspiderfyOnMaxZoom: false,\n\tshowCoverageOnHover: false,\n\tzoomToBoundsOnClick: false\n});\n```\n\n### Customising the Clustered Markers\nAs an option to MarkerClusterGroup you can provide your own function for creating the Icon for the clustered markers.\nThe default implementation changes color at bounds of 10 and 100, but more advanced uses may require customising this.\nYou do not need to include the .Default css if you go this way.\nYou are passed a MarkerCluster object, you'll probably want to use `getChildCount()` or `getAllChildMarkers()` to work out the icon to show.\n\n```javascript\nvar markers = L.markerClusterGroup({\n\ticonCreateFunction: function(cluster) {\n\t\treturn L.divIcon({ html: '' + cluster.getChildCount() + '' });\n\t}\n});\n```\n\nCheck out the [custom example](https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-custom.html) for an example of this.\n\nIf you need to update the clusters icon (e.g. they are based on markers real-time data), use the method [refreshClusters()](#refreshing-the-clusters-icon).\n\n### Customising Spiderfy shape positions\nYou can also provide a custom function as an option to MarkerClusterGroup to override the spiderfy shape positions. The example below implements linear spiderfy positions which overrides the default circular shape.\n\n```javascript\nvar markers = L.markerClusterGroup({\n\tspiderfyShapePositions: function(count, centerPt) {\n var distanceFromCenter = 35,\n markerDistance = 45,\n lineLength = markerDistance * (count - 1),\n lineStart = centerPt.y - lineLength / 2,\n res = [],\n i;\n\n res.length = count;\n\n for (i = count - 1; i >= 0; i--) {\n res[i] = new Point(centerPt.x + distanceFromCenter, lineStart + markerDistance * i);\n }\n\n return res;\n }\n});\n```\n\n### All Options\n#### Enabled by default (boolean options)\n* **showCoverageOnHover**: When you mouse over a cluster it shows the bounds of its markers.\n* **zoomToBoundsOnClick**: When you click a cluster we zoom to its bounds.\n* **spiderfyOnMaxZoom**: When you click a cluster at the bottom zoom level we spiderfy it so you can see all of its markers. (*Note: the spiderfy occurs at the current zoom level if all items within the cluster are still clustered at the maximum zoom level or at zoom specified by `disableClusteringAtZoom` option*).\n* **removeOutsideVisibleBounds**: Clusters and markers too far from the viewport are removed from the map for performance.\n* **animate**: Smoothly split / merge cluster children when zooming and spiderfying. If `L.DomUtil.TRANSITION` is false, this option has no effect (no animation is possible).\n\n#### Other options\n* **animateAddingMarkers**: If set to true (and `animate` option is also true) then adding individual markers to the MarkerClusterGroup after it has been added to the map will add the marker and animate it into the cluster. Defaults to false as this gives better performance when bulk adding markers. addLayers does not support this, only addLayer with individual Markers.\n* **disableClusteringAtZoom**: If set, at this zoom level and below, markers will not be clustered. This defaults to disabled. [See Example](https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld-maxzoom.388.html). Note: you may be interested in disabling `spiderfyOnMaxZoom` option when using `disableClusteringAtZoom`.\n* **maxClusterRadius**: The maximum radius that a cluster will cover from the central marker (in pixels). Default 80. Decreasing will make more, smaller clusters. You can also use a function that accepts the current map zoom and returns the maximum cluster radius in pixels.\n* **polygonOptions**: Options to pass when creating the L.Polygon(points, options) to show the bounds of a cluster. Defaults to empty, which lets Leaflet use the [default Path options](http://leafletjs.com/reference.html#path-options).\n* **singleMarkerMode**: If set to true, overrides the icon for all added markers to make them appear as a 1 size cluster. Note: the markers are not replaced by cluster objects, only their icon is replaced. Hence they still react to normal events, and option `disableClusteringAtZoom` does not restore their previous icon (see [#391](https://github.com/Leaflet/Leaflet.markercluster/issues/391)).\n* **spiderLegPolylineOptions**: Allows you to specify [PolylineOptions](http://leafletjs.com/reference.html#polyline-options) to style spider legs. By default, they are `{ weight: 1.5, color: '#222', opacity: 0.5 }`.\n* **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 (Default: 1).\n* **iconCreateFunction**: Function used to create the cluster icon. See [the default implementation](https://github.com/Leaflet/Leaflet.markercluster/blob/15ed12654acdc54a4521789c498e4603fe4bf781/src/MarkerClusterGroup.js#L542) or the [custom example](https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-custom.html).\n* **spiderfyShapePositions**: Function used to override spiderfy default shape positions. \n* **clusterPane**: Map pane where the cluster icons will be added. Defaults to L.Marker's default (currently 'markerPane'). [See the pane example](https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-pane.html).\n\n#### Chunked addLayers options\nOptions for the [addLayers](#bulk-adding-and-removing-markers) method. See [#357](https://github.com/Leaflet/Leaflet.markercluster/issues/357) for explanation on how the chunking works.\n* **chunkedLoading**: Boolean to split the addLayer**s** processing in to small intervals so that the page does not freeze.\n* **chunkInterval**: Time interval (in ms) during which addLayers works before pausing to let the rest of the page process. In particular, this prevents the page from freezing while adding a lot of markers. Defaults to 200ms.\n* **chunkDelay**: Time delay (in ms) between consecutive periods of processing for addLayers. Default to 50ms.\n* **chunkProgress**: Callback function that is called at the end of each chunkInterval. Typically used to implement a progress indicator, e.g. [code in RealWorld 50k](https://github.com/Leaflet/Leaflet.markercluster/blob/master/example/marker-clustering-realworld.50000.html#L33-L49). Defaults to null. Arguments:\n 1. Number of processed markers\n 2. Total number of markers being added\n 3. Elapsed time (in ms)\n\n## Events\nLeaflet events like `click`, `mouseover`, etc. are just related to _Markers_ in the cluster.\nTo receive events for clusters, listen to `'cluster' + '