Currently we have some license issues. We are working on it.

Commit 4a7a6f3f authored by dmorley's avatar dmorley
Browse files

change to leaflet

parent 9c57a95f
# Build Folders (you can keep bin if you'd like, to store dlls and pdbs)
# mstest test results
language: node_js
- 0.10
\ No newline at end of file
(all changes without author notice are by [@danzel](
## Master
##0.4 (2013-12-19)
### Improvements
* Fix Quick Zoom in/out causing everything to disappear in Firefox (Reported by [@paulovieira]( [#140](
* Slow the expand/contract animation down from 200ms to 300ms
### Bugfixes
* Fix some cases zoomToShowLayer wouldn't work (Reported by [@absemetov]( [#203]( [#228]( [#286](
##0.3 (2013-12-18)
### Improvements
* Work better with custom projections (by [@andersarstrand]( [#74](
* Add custom getBounds that works (Reported by [@2803media](
* Allow spacing spiderfied icons further apart (Reported by [@stevevance]( [#100](
* Add custom eachLayer that works (Reported by [@cilogi]( [#102](
* Add an option (removeOutsideVisibleBounds) to prevent removing clusters that are outside of the visible bounds (by [@wildhoney]( [#103](
* Add getBounds method to cluster (Reported by [@nderambure]( [#88](
* Lots of unit tests
* Support having Circle / CircleMarker as child markers
* Add factory methods (Reported by [@mourner]( [#21](
* Add getVisibleParent method to allow getting the visible parent cluster or the marker if it is visible. (By [@littleiffel]( [#102](
* Allow adding non-clusterable things to a MarkerClusterGroup, we don't cluster them. (Reported by [@benbalter]( [#195](
* removeLayer supports taking a FeatureGroup (Reported by [@pabloalcaraz]( [#236](
* DistanceGrid tests, QuickHull tests and improvements (By [@tmcw]( [#247]( [#248]( [#249](
* Implemented getLayers (Reported by [@metajungle]( [#222](
* zoomToBounds now only zooms in as far as it needs to to get all of the markers on screen if this is less zoom than zooming to the actual bounds would be (Reported by [@adamyonk]( [#185](
* Keyboard accessibility improvements (By [@Zombienaute]( [#273](
* IE Specific css in the default styles is no longer a separate file (By [@frankrowe]( [#280](
* Improve usability with small maps (Reported by [@JSCSJSCS]( [#144](
* Implement FeatureGroup.getLayer (Reported by [@newmanw]( [#244](
### Bugfixes
* Fix singleMarkerMode when you aren't on the map (by [@duncanparkes]( [#77](
* Fix clearLayers when you aren't on the map (by [@duncanparkes]( [#79](
* IE10 Bug fix (Reported by [@theLundquist]( [#86](
* Fixes for hasLayer after removing a layer (Reported by [@cvisto]( [#44](
* Fix clearLayers not unsetting __parent of the markers, preventing them from being re-added. (Reported by [@apuntovanini]( [#99](
* Fix map.removeLayer(markerClusterGroup) not working (Reported by [@Driklyn]( [#108](
* Fix map.addLayers not updating cluster icons (Reported by [@Driklyn]( [#114](
* Fix spiderfied clusters breaking if a marker is added to them (Reported by [@Driklyn]( [#114](
* Don't show coverage for spiderfied clusters as it will be wrong. (Reported by [@ajbeaven]( [#95](
* Improve zoom in/out immediately making all everything disappear, still issues in Firefox [#140](
* Fix animation not stopping with only one marker. (Reported by [@Driklyn]( [#146](
* Various fixes for new leaflet (Reported by [@PeterAronZentai]( [#159](
* Fix clearLayers when we are spiderfying (Reported by [@skullbooks]( [#162](
* Fix removing layers in certain situations (Reported by [@bpavot]( [#160](
* Support calling hasLayer with null (by [@l0c0luke]( [#170](
* Lots of fixes for removing a MarkerClusterGroup from the map (Reported by [@annetdeboer]( [#200](
* Throw error when being added to a map with no maxZoom.
* Fixes for markers not appearing after a big zoom (Reported by [@arnoldbird]( [#216]( (Reported by [@mathilde-pellerin]( [#260](
* Fix coverage polygon not being removed when a MarkerClusterGroup is removed (Reported by [@ZeusTheTrueGod]( [#245](
* Fix getVisibleParent when no parent is visible (Reported by [@ajbeaven]( [#265](
* Fix spiderfied markers not hiding on a big zoom (Reported by [@Vaesive]( [#268](
* Fix clusters not hiding on a big zoom (Reported by [@versusvoid]( [#281](
* Don't fire multiple clustermouseover/off events due to child divs in the cluster marker (Reported by [@heidemn]( [#252](
## 0.2 (2012-10-11)
### Improvements
* Add addLayers/removeLayers bulk add and remove functions that perform better than the individual methods
* Allow customising the polygon generated for showing the area a cluster covers (by [@yohanboniface]( [#68](
* Add zoomToShowLayer method to zoom down to a marker then call a callback once it is visible
* Add animateAddingMarkers to allow disabling animations caused when adding/removing markers
* Add hasLayer
* Pass the L.MarkerCluster to iconCreateFunction to give more flexibility deciding the icon
* Make addLayers support geojson layers
* Allow disabling clustering at a given zoom level
* Allow styling markers that are added like they were clusters of size 1
### Bugfixes
* Support when leaflet is configured to use canvas rather than SVG
* Fix some potential crashes in zoom handlers
* Tidy up when we are removed from the map
## 0.1 (2012-08-16)
Initial Release!
Leaflet.markercluster building, testing and linting scripts.
To use, install Node, then run the following commands in the project root:
npm install -g jake
npm install
To check the code for errors and build Leaflet from source, run "jake".
To run the tests, run "jake test".
For a custom build, open build/build.html in the browser and follow the instructions.
var build = require('./build/build.js');
desc('Check Leaflet.markercluster source for errors with JSHint');
task('lint', build.lint);
desc('Combine and compress Leaflet.markercluster source files');
task('build', ['lint'],;
desc('Run PhantomJS tests');
task('test', ['lint'], build.test);
task('default', ['build']);
\ No newline at end of file
Copyright 2012 David Leaver
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
Provides Beautiful Animated Marker Clustering functionality for [Leaflet](, a JS library for interactive maps.
*Requires Leaflet 0.7.0 or newer.*
For a Leaflet 0.5 compatible version, [Download b128e950](<br>
For a Leaflet 0.4 compatible version, [Download the 0.2 release](
## Using the plugin
Install with Bower: `bower install leaflet.markercluster`
See the included examples for usage.
The [realworld example]( is a good place to start, it uses all of the defaults of the clusterer.
Or check out the [custom example]( 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
var markers = new L.MarkerClusterGroup();
markers.addLayer(new L.Marker(getRandomLatLng(map)));
... Add more layers ...
### 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. (*Note: the spiderfy occurs at the current zoom level if all items within the cluster are physically located at the same latitude and longitude.*)
* **removeOutsideVisibleBounds**: Clusters and markers too far from the viewport are removed from the map for performance.
You can disable any of these as you want in the options when you create the MarkerClusterGroup:
var markers = new L.MarkerClusterGroup({ spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false });
### 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
var markers = new L.MarkerClusterGroup({
iconCreateFunction: function(cluster) {
return new L.DivIcon({ html: '<b>' + cluster.getChildCount() + '</b>' });
Check out the [custom example]( for an example of this.
### All Options
Enabled by default (boolean options):
* **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. (*Note: the spiderfy occurs at the current zoom level if all items within the cluster are physically located at the same latitude and longitude.*)
* **removeOutsideVisibleBounds**: Clusters and markers too far from the viewport are removed from the map for performance.
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. addLayers does not support this, only addLayer with individual Markers.
* **disableClusteringAtZoom**: If set, at this zoom level and below markers will not be clustered. This defaults to disabled. [See Example](
* **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.
* **polygonOptions**: Options to pass when creating the L.Polygon(points, options) 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 (Default:1)
* **iconCreateFunction**: Function used to create the cluster icon [See default as example](
## Events
If you register for click, mouseover, etc events just related to Markers in the cluster.
To receive events for clusters listen to 'cluster' + 'eventIWant', ex: 'clusterclick', 'clustermouseover'.
Set your callback up as follows to handle both cases:
markers.on('click', function (a) {
console.log('marker ' + a.layer);
markers.on('clusterclick', function (a) {
console.log('cluster ' + a.layer.getAllChildMarkers().length);
#### Additional MarkerClusterGroup Events
- **animationend**: Fires when marker clustering/unclustering animation has completed
- **spiderfied**: Fires when overlapping markers get spiderified
## Methods
### Getting the bounds of a cluster
When you receive an event from a cluster you can query it for the bounds.
See [example/marker-clustering-convexhull.html]( for a working example.
markers.on('clusterclick', function (a) {
map.addLayer(new L.Polygon(a.layer.getConvexHull()));
### Zooming to the bounds of a cluster
When you receive an event from a cluster you can zoom to its bounds in one easy step.
If all of the markers will appear at a higher zoom level, that zoom level is zoomed to instead.
See [marker-clustering-zoomtobounds.html]( for a working example.
markers.on('clusterclick', function (a) {
### Getting the visible parent of a marker
If you have a marker in your MarkerClusterGroup and you want to get the visible parent of it (Either itself or a cluster it is contained in that is currently visible on the map).
This will return null if the marker and its parent clusters are not visible currently (they are not near the visible viewpoint)
var visibleOne = markerClusterGroup.getVisibleParent(myMarker);
### Adding and removing Markers
addLayer, removeLayer and clearLayers are supported and they should work for most uses.
### 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
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]( 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](
[realworld 50000 example](
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.
[![Build Status](](
"name": "leaflet.markercluster",
"version": "0.4.0",
"homepage": "",
"authors": [
"Dave Leaver <>"
"description": "Marker Clustering plugin for Leaflet.",
"main": [
"license": "MIT",
"ignore": [
"dependencies": {
"leaflet": ">= 0.7.0"
\ No newline at end of file
var fs = require('fs'),
jshint = require('jshint'),
UglifyJS = require('uglify-js'),
deps = require('./deps.js').deps,
hintrc = require('./hintrc.js').config;
function lintFiles(files) {
var errorsFound = 0,
i, j, len, len2, src, errors, e;
for (i = 0, len = files.length; i < len; i++) {
jshint.JSHINT(fs.readFileSync(files[i], 'utf8'), hintrc, i ? {L: true} : null);
errors = jshint.JSHINT.errors;
for (j = 0, len2 = errors.length; j < len2; j++) {
e = errors[j];
console.log(files[i] + '\tline ' + e.line + '\tcol ' + e.character + '\t ' + e.reason);
errorsFound += len2;
return errorsFound;
function getFiles(compsBase32) {
var memo = {},
if (compsBase32) {
comps = parseInt(compsBase32, 32).toString(2).split('');
console.log('Managing dependencies...');
function addFiles(srcs) {
for (var j = 0, len = srcs.length; j < len; j++) {
memo[srcs[j]] = true;
for (var i in deps) {
if (comps) {
if (parseInt(comps.pop(), 2) === 1) {
console.log('\t* ' + i);
} else {
console.log('\t ' + i);
} else {
var files = [];
for (var src in memo) {
files.push('src/' + src);
return files;
exports.getFiles = getFiles;
exports.lint = function () {
var files = getFiles();
console.log('Checking for JS errors...');
var errorsFound = lintFiles(files);
if (errorsFound > 0) {
console.log(errorsFound + ' error(s) found.\n');
} else {
console.log('\tCheck passed');
function getSizeDelta(newContent, oldContent) {
if (!oldContent) {
return 'new';
var newLen = newContent.replace(/\r\n?/g, '\n').length,
oldLen = oldContent.replace(/\r\n?/g, '\n').length,
delta = newLen - oldLen;
return (delta >= 0 ? '+' : '') + delta;
function loadSilently(path) {
try {
return fs.readFileSync(path, 'utf8');
} catch (e) {
return null;
function combineFiles(files) {
var content = '';
for (var i = 0, len = files.length; i < len; i++) {
content += fs.readFileSync(files[i], 'utf8') + '\n\n';
return content;
} = function (compsBase32, buildName) {
var files = getFiles(compsBase32);
console.log('Concatenating ' + files.length + ' files...');
var copy = fs.readFileSync('src/copyright.js', 'utf8'),
intro = '(function (window, document, undefined) {',
outro = '}(window, document));',
newSrc = copy + intro + combineFiles(files) + outro,
pathPart = 'dist/leaflet.markercluster' + (buildName ? '-' + buildName : ''),
srcPath = pathPart + '-src.js',
oldSrc = loadSilently(srcPath),
srcDelta = getSizeDelta(newSrc, oldSrc);
console.log('\tUncompressed size: ' + newSrc.length + ' bytes (' + srcDelta + ')');
if (newSrc === oldSrc) {
console.log('\tNo changes');
} else {
fs.writeFileSync(srcPath, newSrc);
console.log('\tSaved to ' + srcPath);
var path = pathPart + '.js',
oldCompressed = loadSilently(path),
newCompressed = copy + UglifyJS.minify(newSrc, {
warnings: true,
fromString: true
delta = getSizeDelta(newCompressed, oldCompressed);
console.log('\tCompressed size: ' + newCompressed.length + ' bytes (' + delta + ')');
if (newCompressed === oldCompressed) {
console.log('\tNo changes');
} else {
fs.writeFileSync(path, newCompressed);
console.log('\tSaved to ' + path);
exports.test = function() {
var karma = require('karma'),
testConfig = {configFile : __dirname + '/../spec/karma.conf.js'};
testConfig.browsers = ['PhantomJS'];
if (isArgv('--chrome')) {
if (isArgv('--safari')) {
if (isArgv('--ff')) {
if (isArgv('--ie')) {
if (isArgv('--cov')) {
testConfig.preprocessors = {
'../src/**/*.js': 'coverage'
testConfig.coverageReporter = {
type : 'html',
dir : 'coverage/'
testConfig.reporters = ['coverage'];
function isArgv(optName) {
return process.argv.indexOf(optName) !== -1;
var deps = {
Core: {
src: ['MarkerClusterGroup.js',
desc: 'The core of the library.'
QuickHull: {
src: ['MarkerCluster.QuickHull.js'],
desc: 'ConvexHull generation. Used to show the area outline of the markers within a cluster.',
heading: 'QuickHull'
Spiderfier: {
src: ['MarkerCluster.Spiderfier.js'],
desc: 'Provides the ability to show all of the child markers of a cluster.',
heading: 'Spiderfier'
if (typeof exports !== 'undefined') {
exports.deps = deps;
exports.config = {
// environment
"browser": true,
"node": true,
"predef": ['L', 'define'],
"strict": false,
// code style
"bitwise": true,
"camelcase": true,
"curly": true,
"eqeqeq": true,
"forin": false,
"immed": true,
"latedef": true,
"newcap": true,
"noarg": true,
"noempty": true,
"nonew": true,
"undef": true,
"unused": true,
//"quotmark": "single",
// whitespace
"indent": 4,
"trailing": true,
"white": true,
"smarttabs": true,
//"maxlen": 120
// code simplicity - not enforced but nice to check from time to time
// "maxstatements": 20,
// "maxcomplexity": 5
// "maxparams": 4,
// "maxdepth": 4