[Pkg-javascript-commits] [leaflet-markercluster] 02/02: Import upstream version 0.2+dfsg.1
Jonas Smedegaard
js at moszumanska.debian.org
Tue Jan 28 17:54:51 UTC 2014
This is an automated email from the git hooks/post-receive script.
js pushed a commit to annotated tag upstream/0.2+dfsg.1
in repository leaflet-markercluster.
commit fd372b965dd187c1dc51aec19ad93760fb945f38
Author: Andrew Harvey <andrew.harvey4 at gmail.com>
Date: Sat Nov 24 14:55:55 2012 +1100
Import upstream version 0.2+dfsg.1
---
CHANGELOG.md | 29 +
Jakefile.js | 67 ++
MIT-LICENCE.txt | 20 +
README.md | 123 ++++
build/build.html | 243 +++++++
build/build.js | 79 ++
build/deps.js | 25 +
build/hint.js | 30 +
build/hintrc.js | 47 ++
dist/MarkerCluster.Default.css | 38 +
dist/MarkerCluster.Default.ie.css | 22 +
dist/MarkerCluster.css | 6 +
example/marker-clustering-convexhull.html | 82 +++
example/marker-clustering-custom.html | 108 +++
example/marker-clustering-everything.html | 81 +++
.../marker-clustering-realworld-maxzoom.388.html | 46 ++
.../marker-clustering-realworld-mobile.388.html | 45 ++
example/marker-clustering-realworld.10000.html | 46 ++
example/marker-clustering-realworld.388.html | 46 ++
example/marker-clustering-realworld.50000.html | 53 ++
example/marker-clustering-singlemarkermode.html | 61 ++
example/marker-clustering-spiderfier.html | 61 ++
example/marker-clustering-zoomtobounds.html | 61 ++
example/marker-clustering-zoomtoshowlayer.html | 60 ++
example/marker-clustering.html | 89 +++
example/mobile.css | 6 +
example/old-bugs/add-1000-after.html | 84 +++
example/old-bugs/add-markers-offscreen.html | 53 ++
example/old-bugs/add-remove-before-addtomap.html | 63 ++
example/old-bugs/remove-add-clustering.html | 75 ++
example/old-bugs/remove-when-spiderfied.html | 63 ++
example/old-bugs/setView-doesnt-remove.html | 70 ++
.../zoomtoshowlayer-doesnt-need-to-zoom.html | 64 ++
example/screen.css | 5 +
src/DistanceGrid.js | 120 ++++
src/MarkerCluster.QuickHull.js | 124 ++++
src/MarkerCluster.Spiderfier.js | 381 ++++++++++
src/MarkerCluster.js | 335 +++++++++
src/MarkerClusterGroup.js | 791 +++++++++++++++++++++
39 files changed, 3802 insertions(+)
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..f1b71a5
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,29 @@
+Leaflet.markercluster
+=====================
+
+(all changes without author notice are by [@danzel](https://github.com/danzel))
+
+## 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](https://github.com/yohanboniface)) [#68](https://github.com/danzel/Leaflet.markercluster/issues/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!
\ No newline at end of file
diff --git a/Jakefile.js b/Jakefile.js
new file mode 100644
index 0000000..db873d4
--- /dev/null
+++ b/Jakefile.js
@@ -0,0 +1,67 @@
+var build = require('./build/build.js'),
+ lint = require('./build/hint.js');
+
+var COPYRIGHT = '/*\n Copyright (c) 2012, Smartrak, David Leaver\n' +
+ ' Leaflet.markercluster is an open-source JavaScript library for Marker Clustering on leaflet powered maps.\n' +
+ ' https://github.com/danzel/Leaflet.markercluster\n*/\n';
+
+desc('Check Leaflet.markercluster source for errors with JSHint');
+task('lint', function () {
+
+ var files = build.getFiles();
+
+ console.log('Checking for JS errors...');
+
+ var errorsFound = lint.jshint(files);
+
+ if (errorsFound > 0) {
+ console.log(errorsFound + ' error(s) found.\n');
+ fail();
+ } else {
+ console.log('\tCheck passed');
+ }
+});
+
+desc('Combine and compress Leaflet.markercluster source files');
+task('build', ['lint'], function (compsBase32, buildName) {
+
+ var files = build.getFiles(compsBase32);
+
+ console.log('Concatenating ' + files.length + ' files...');
+
+ var content = build.combineFiles(files),
+ newSrc = COPYRIGHT + content,
+
+ pathPart = 'dist/leaflet.markercluster' + (buildName ? '-' + buildName : ''),
+ srcPath = pathPart + '-src.js',
+
+ oldSrc = build.load(srcPath),
+ srcDelta = build.getSizeDelta(newSrc, oldSrc);
+
+ console.log('\tUncompressed size: ' + newSrc.length + ' bytes (' + srcDelta + ')');
+
+ if (newSrc === oldSrc) {
+ console.log('\tNo changes');
+ } else {
+ build.save(srcPath, newSrc);
+ console.log('\tSaved to ' + srcPath);
+ }
+
+ console.log('Compressing...');
+
+ var path = pathPart + '.js',
+ oldCompressed = build.load(path),
+ newCompressed = COPYRIGHT + build.uglify(content),
+ delta = build.getSizeDelta(newCompressed, oldCompressed);
+
+ console.log('\tCompressed size: ' + newCompressed.length + ' bytes (' + delta + ')');
+
+ if (newCompressed === oldCompressed) {
+ console.log('\tNo changes');
+ } else {
+ build.save(path, newCompressed);
+ console.log('\tSaved to ' + path);
+ }
+});
+
+task('default', ['build']);
diff --git a/MIT-LICENCE.txt b/MIT-LICENCE.txt
new file mode 100644
index 0000000..19af068
--- /dev/null
+++ b/MIT-LICENCE.txt
@@ -0,0 +1,20 @@
+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.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..1e6d287
--- /dev/null
+++ b/README.md
@@ -0,0 +1,123 @@
+Leaflet.markercluster
+=====================
+
+Provides Beautiful Animated Marker Clustering functionality for Leaflet
+
+*Requires Leaflet 0.4.2 or newer*
+
+## Using the plugin
+See the included examples for usage.
+
+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
+
+### 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:
+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.
+
+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 });
+```
+
+### 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
+
+```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.
+
+### 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.
+
+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
+
+## 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'.
+
+Set your callback up as follows to handle both cases:
+
+```javascript
+markers.on('click', function (a) {
+ console.log('marker ' + a.layer);
+});
+
+markers.on('clusterclick', function (a) {
+ console.log('cluster ' + a.layer.getAllChildMarkers().length);
+});
+```
+
+## Methods
+
+### 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();
+});
+```
+
+### 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](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.
diff --git a/build/build.html b/build/build.html
new file mode 100644
index 0000000..bf94db3
--- /dev/null
+++ b/build/build.html
@@ -0,0 +1,243 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet.markercluster Build Helper</title>
+
+ <script type="text/javascript" src="deps.js"></script>
+
+ <style type="text/css">
+ body {
+ font: 12px/1.4 Verdana, sans-serif;
+ text-align: center;
+ padding: 2em 0;
+ }
+ #container {
+ text-align: left;
+ margin: 0 auto;
+ width: 780px;
+ }
+ #deplist {
+ list-style: none;
+ padding: 0;
+ }
+ #deplist li {
+ padding-top: 7px;
+ padding-bottom: 7px;
+ border-bottom: 1px solid #ddd;
+ }
+ #deplist li.heading {
+ border: none;
+ background: #ddd;
+ padding: 5px 10px;
+ margin-top: 25px;
+ border-radius: 5px;
+ }
+ #deplist input {
+ float: left;
+ margin-right: 5px;
+ display: inline;
+ }
+ #deplist label {
+ float: left;
+ width: 160px;
+ font-weight: bold;
+ }
+ #deplist div {
+ display: table-cell;
+ height: 1%;
+ }
+ #deplist .desc {
+ }
+
+ #deplist .deps {
+ color: #777;
+ }
+
+ #command {
+ width: 100%;
+ }
+ #command2 {
+ width: 200px;
+ }
+
+ #toolbar {
+ padding-bottom: 10px;
+ border-bottom: 1px solid #ddd;
+ }
+
+ h2 {
+ margin-top: 2em;
+ }
+ </style>
+</head>
+<body>
+ <div id="container">
+ <h1>Leaflet.markercluster Build Helper</h1>
+
+ <p id="toolbar">
+ <a id="select-all" href="#all">Select All</a> |
+ <a id="deselect-all" href="#none">Deselect All</a>
+ </p>
+
+ <ul id="deplist"></ul>
+
+ <h2>Building using Node and UglifyJS</h2>
+ <ol>
+ <li><a href="http://nodejs.org/#download">Download and install Node</a></li>
+ <li>Run this in the command line:<br />
+ <pre><code>npm install -g jake
+npm install jshint
+npm install uglify-js</code></pre></li>
+ <li>Run this command inside the Leaflet.markercluster directory: <br /><input type="text" id="command2" />
+ </ol>
+ <h2>Building using Closure Compiler</h2>
+ <ol>
+ <li><a href="http://closure-compiler.googlecode.com/files/compiler-latest.zip">Download Closure Compiler</a>, extract it into <code>closure-compiler</code> directory</li>
+ <li>Run this command in the root Leaflet directory: <br /><input type="text" id="command" /></li>
+ </ol>
+ </div>
+
+ <script type="text/javascript">
+ var deplist = document.getElementById('deplist'),
+ commandInput = document.getElementById('command'),
+ commandInput2 = document.getElementById('command2');
+
+ document.getElementById('select-all').onclick = function() {
+ var checks = deplist.getElementsByTagName('input');
+ for (var i = 0; i < checks.length; i++) {
+ checks[i].checked = true;
+ }
+ updateCommand();
+ return false;
+ };
+
+ document.getElementById('deselect-all').onclick = function() {
+ var checks = deplist.getElementsByTagName('input');
+ for (var i = 0; i < checks.length; i++) {
+ if (!checks[i].disabled) {
+ checks[i].checked = false;
+ }
+ }
+ updateCommand();
+ return false;
+ };
+
+ function updateCommand() {
+ var files = {};
+ var checks = deplist.getElementsByTagName('input');
+ var compsStr = '';
+
+ for (var i = 0, len = checks.length; i < len; i++) {
+ if (checks[i].checked) {
+ var srcs = deps[checks[i].id].src;
+ for (var j = 0, len2 = srcs.length; j < len2; j++) {
+ files[srcs[j]] = true;
+ }
+ compsStr = '1' + compsStr;
+ } else {
+ compsStr = '0' + compsStr;
+ }
+ }
+
+ var command = 'java -jar closure-compiler/compiler.jar ';
+ for (var src in files) {
+ command += '--js src/' + src + ' ';
+ }
+ command += '--js_output_file dist/leaflet-custom.js';
+
+ commandInput.value = command;
+
+ commandInput2.value = 'jake build[' + parseInt(compsStr, 2).toString(32) + ',custom]';
+ }
+
+ function inputSelect() {
+ this.focus();
+ this.select();
+ };
+
+ commandInput.onclick = inputSelect;
+ commandInput2.onclick = inputSelect;
+
+ function onCheckboxChange() {
+ if (this.checked) {
+ var depDeps = deps[this.id].deps;
+ if (depDeps) {
+ for (var i = 0; i < depDeps.length; i++) {
+ var check = document.getElementById(depDeps[i]);
+ if (!check.checked) {
+ check.checked = true;
+ check.onchange();
+ }
+ }
+ }
+ } else {
+ var checks = deplist.getElementsByTagName('input');
+ for (var i = 0; i < checks.length; i++) {
+ var dep = deps[checks[i].id];
+ if (!dep.deps) { continue; }
+ for (var j = 0; j < dep.deps.length; j++) {
+ if (dep.deps[j] === this.id) {
+ if (checks[i].checked) {
+ checks[i].checked = false;
+ checks[i].onchange();
+ }
+ }
+ }
+ }
+ }
+ updateCommand();
+ }
+
+ for (var name in deps) {
+ var li = document.createElement('li');
+
+ if (deps[name].heading) {
+ var heading = document.createElement('li');
+ heading.className = 'heading';
+ heading.appendChild(document.createTextNode(deps[name].heading));
+ deplist.appendChild(heading);
+ }
+
+ var div = document.createElement('div');
+
+ var label = document.createElement('label');
+
+ var check = document.createElement('input');
+ check.type = 'checkbox';
+ check.id = name;
+ label.appendChild(check);
+ check.onchange = onCheckboxChange;
+
+ if (name == 'Core') {
+ check.checked = true;
+ check.disabled = true;
+ }
+
+ label.appendChild(document.createTextNode(name));
+ label.htmlFor = name;
+
+ li.appendChild(label);
+
+ var desc = document.createElement('span');
+ desc.className = 'desc';
+ desc.appendChild(document.createTextNode(deps[name].desc));
+
+ var depText = deps[name].deps && deps[name].deps.join(', ');
+ if (depText) {
+ var depspan = document.createElement('span');
+ depspan.className = 'deps';
+ depspan.appendChild(document.createTextNode('Deps: ' + depText));
+ }
+
+ div.appendChild(desc);
+ div.appendChild(document.createElement('br'));
+ if (depText) { div.appendChild(depspan); }
+
+ li.appendChild(div);
+
+ deplist.appendChild(li);
+ }
+ updateCommand();
+ </script>
+</body>
+</html>
diff --git a/build/build.js b/build/build.js
new file mode 100644
index 0000000..355e740
--- /dev/null
+++ b/build/build.js
@@ -0,0 +1,79 @@
+var fs = require('fs'),
+ uglifyjs = require('uglify-js'),
+ deps = require('./deps.js').deps;
+
+exports.getFiles = function (compsBase32) {
+ var memo = {},
+ comps;
+
+ 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);
+ addFiles(deps[i].src);
+ } else {
+ console.log('\t ' + i);
+ }
+ } else {
+ addFiles(deps[i].src);
+ }
+ }
+
+ var files = [];
+
+ for (var src in memo) {
+ files.push('src/' + src);
+ }
+
+ return files;
+};
+
+exports.uglify = function (code) {
+ var pro = uglifyjs.uglify;
+
+ var ast = uglifyjs.parser.parse(code);
+ ast = pro.ast_mangle(ast, {mangle: true});
+ ast = pro.ast_squeeze(ast);
+ ast = pro.ast_squeeze_more(ast);
+
+ return pro.gen_code(ast) + ';';
+};
+
+exports.combineFiles = function (files) {
+ var content = '(function (window, undefined) {\n\n';
+ for (var i = 0, len = files.length; i < len; i++) {
+ content += fs.readFileSync(files[i], 'utf8') + '\n\n';
+ }
+ return content + '\n\n}(this));';
+};
+
+exports.save = function (savePath, compressed) {
+ return fs.writeFileSync(savePath, compressed, 'utf8');
+};
+
+exports.load = function (loadPath) {
+ try {
+ return fs.readFileSync(loadPath, 'utf8');
+ } catch (e) {
+ return null;
+ }
+};
+
+exports.getSizeDelta = function (newContent, oldContent) {
+ if (!oldContent) {
+ return 'new';
+ }
+ var delta = newContent.length - oldContent.length;
+ return (delta >= 0 ? '+' : '') + delta;
+};
\ No newline at end of file
diff --git a/build/deps.js b/build/deps.js
new file mode 100644
index 0000000..6a466ea
--- /dev/null
+++ b/build/deps.js
@@ -0,0 +1,25 @@
+var deps = {
+
+ Core: {
+ src: ['MarkerClusterGroup.js',
+ 'MarkerCluster.js',
+ 'DistanceGrid.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;
+}
diff --git a/build/hint.js b/build/hint.js
new file mode 100644
index 0000000..464bbe1
--- /dev/null
+++ b/build/hint.js
@@ -0,0 +1,30 @@
+var jshint = require('jshint').JSHINT,
+ fs = require('fs'),
+ config = require('./hintrc.js').config;
+
+function jshintSrc(path, src) {
+ jshint(src, config);
+
+ var errors = jshint.errors,
+ i, len, e, line;
+
+ for (i = 0, len = errors.length; i < len; i++) {
+ e = errors[i];
+ //console.log(e.evidence);
+ console.log(path + '\tline ' + e.line + '\tcol ' + e.character + '\t ' + e.reason);
+ }
+
+ return len;
+}
+
+exports.jshint = function (files) {
+ var errorsFound = 0;
+
+ for (var i = 0, len = files.length; i < len; i++) {
+ var src = fs.readFileSync(files[i], 'utf8');
+
+ errorsFound += jshintSrc(files[i], src);
+ }
+
+ return errorsFound;
+};
\ No newline at end of file
diff --git a/build/hintrc.js b/build/hintrc.js
new file mode 100644
index 0000000..d05d406
--- /dev/null
+++ b/build/hintrc.js
@@ -0,0 +1,47 @@
+exports.config = {
+ "browser": true,
+ "node": true,
+ "predef": ["L"],
+
+ "debug": false,
+ "devel": false,
+
+ "es5": false,
+ "strict": false,
+ "globalstrict": false,
+
+ "asi": false,
+ "laxbreak": false,
+ "bitwise": true,
+ "boss": false,
+ "curly": true,
+ "eqnull": false,
+ "evil": false,
+ "expr": false,
+ "forin": true,
+ "immed": true,
+ "latedef": true,
+ "loopfunc": false,
+ "noarg": true,
+ "regexp": true,
+ "regexdash": false,
+ "scripturl": false,
+ "shadow": false,
+ "supernew": false,
+ "undef": true,
+ "funcscope": false,
+
+ "newcap": true,
+ "noempty": true,
+ "nonew": true,
+ "nomen": false,
+ "onevar": false,
+ "plusplus": false,
+ "sub": false,
+ "indent": 4,
+
+ "eqeqeq": true,
+ "trailing": true,
+ "white": true,
+ "smarttabs": true
+};
diff --git a/dist/MarkerCluster.Default.css b/dist/MarkerCluster.Default.css
new file mode 100644
index 0000000..90558dd
--- /dev/null
+++ b/dist/MarkerCluster.Default.css
@@ -0,0 +1,38 @@
+.marker-cluster-small {
+ background-color: rgba(181, 226, 140, 0.6);
+ }
+.marker-cluster-small div {
+ background-color: rgba(110, 204, 57, 0.6);
+ }
+
+.marker-cluster-medium {
+ background-color: rgba(241, 211, 87, 0.6);
+ }
+.marker-cluster-medium div {
+ background-color: rgba(240, 194, 12, 0.6);
+ }
+
+.marker-cluster-large {
+ background-color: rgba(253, 156, 115, 0.6);
+ }
+.marker-cluster-large div {
+ background-color: rgba(241, 128, 23, 0.6);
+ }
+
+.marker-cluster {
+ background-clip: padding-box;
+ border-radius: 20px;
+ }
+.marker-cluster div {
+ width: 30px;
+ height: 30px;
+ margin-left: 5px;
+ margin-top: 5px;
+
+ text-align: center;
+ border-radius: 15px;
+ font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
+ }
+.marker-cluster span {
+ line-height: 30px;
+ }
\ No newline at end of file
diff --git a/dist/MarkerCluster.Default.ie.css b/dist/MarkerCluster.Default.ie.css
new file mode 100644
index 0000000..1d0de51
--- /dev/null
+++ b/dist/MarkerCluster.Default.ie.css
@@ -0,0 +1,22 @@
+ /* IE 6-8 fallback colors */
+.marker-cluster-small {
+ background-color: rgb(181, 226, 140);
+ }
+.marker-cluster-small div {
+ background-color: rgb(110, 204, 57);
+ }
+
+.marker-cluster-medium {
+ background-color: rgb(241, 211, 87);
+ }
+.marker-cluster-medium div {
+ background-color: rgb(240, 194, 12);
+ }
+
+.marker-cluster-large {
+ background-color: rgb(253, 156, 115);
+ }
+.marker-cluster-large div {
+ background-color: rgb(241, 128, 23);
+}
+
diff --git a/dist/MarkerCluster.css b/dist/MarkerCluster.css
new file mode 100644
index 0000000..a915c1a
--- /dev/null
+++ b/dist/MarkerCluster.css
@@ -0,0 +1,6 @@
+.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
+ -webkit-transition: -webkit-transform 0.25s ease-out, opacity 0.25s ease-in;
+ -moz-transition: -moz-transform 0.25s ease-out, opacity 0.25s ease-in;
+ -o-transition: -o-transform 0.25s ease-out, opacity 0.25s ease-in;
+ transition: transform 0.25s ease-out, opacity 0.25s ease-in;
+ }
diff --git a/example/marker-clustering-convexhull.html b/example/marker-clustering-convexhull.html
new file mode 100644
index 0000000..e7c7ac8
--- /dev/null
+++ b/example/marker-clustering-convexhull.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
+ <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="screen.css" />
+
+ <link rel="stylesheet" href="../dist/MarkerCluster.css" />
+ <link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="../dist/MarkerCluster.Default.ie.css" /><![endif]-->
+ <script src="../dist/leaflet.markercluster-src.js"></script>
+</head>
+<body>
+
+ <div id="map"></div>
+ <button id="populate">Populate 1 marker</button>
+ <button id="remove">Remove 1 marker</button>
+
+ <script type="text/javascript">
+
+ var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
+ cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
+ cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
+ latlng = new L.LatLng(50.5, 30.51);
+
+ var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
+
+ var markers = new L.MarkerClusterGroup({ spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false });
+
+ function populate() {
+ for (var i = 0; i < 100; i++) {
+ var m = new L.Marker(getRandomLatLng(map));
+ markers.addLayer(m);
+ }
+ return false;
+ }
+ function getRandomLatLng(map) {
+ var bounds = map.getBounds(),
+ southWest = bounds.getSouthWest(),
+ northEast = bounds.getNorthEast(),
+ lngSpan = northEast.lng - southWest.lng,
+ latSpan = northEast.lat - southWest.lat;
+
+ return new L.LatLng(
+ southWest.lat + latSpan * Math.random(),
+ southWest.lng + lngSpan * Math.random());
+ }
+
+
+ var polygon;
+ markers.on('clustermouseover', function (a) {
+ if (polygon) {
+ map.removeLayer(polygon);
+ }
+ polygon = new L.Polygon(a.layer.getConvexHull());
+ map.addLayer(polygon);
+ });
+
+ markers.on('clustermouseout', function (a) {
+ if (polygon) {
+ map.removeLayer(polygon);
+ polygon = null;
+ }
+ });
+
+ map.on('zoomend', function () {
+ if (polygon) {
+ map.removeLayer(polygon);
+ polygon = null;
+ }
+ });
+
+
+ populate();
+ map.addLayer(markers);
+ </script>
+</body>
+</html>
diff --git a/example/marker-clustering-custom.html b/example/marker-clustering-custom.html
new file mode 100644
index 0000000..7b836ea
--- /dev/null
+++ b/example/marker-clustering-custom.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
+ <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="screen.css" />
+
+ <link rel="stylesheet" href="../dist/MarkerCluster.css" />
+ <script src="../dist/leaflet.markercluster-src.js"></script>
+
+ <style>
+ .mycluster {
+ width: 40px;
+ height: 40px;
+ background-color: greenyellow;
+ text-align: center;
+ font-size: 24px;
+ }
+
+ </style>
+</head>
+<body>
+
+ <div id="map"></div>
+
+ <script type="text/javascript">
+
+ var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
+ cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
+ cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
+ latlng = new L.LatLng(50.5, 30.51);
+
+ var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
+
+
+ //Custom radius and icon create function
+ var markers = new L.MarkerClusterGroup({
+ maxClusterRadius: 120,
+ iconCreateFunction: function (cluster) {
+ return new L.DivIcon({ html: cluster.getChildCount(), className: 'mycluster', iconSize: new L.Point(40, 40) });
+ },
+ //Disable all of the defaults:
+ spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false
+ });
+
+
+ function populate() {
+ for (var i = 0; i < 100; i++) {
+ var m = new L.Marker(getRandomLatLng(map));
+ markers.addLayer(m);
+ }
+ return false;
+ }
+ function populateRandomVector() {
+ for (var i = 0, latlngs = [], len = 20; i < len; i++) {
+ latlngs.push(getRandomLatLng(map));
+ }
+ var path = new L.Polyline(latlngs);
+ map.addLayer(path);
+ }
+ function getRandomLatLng(map) {
+ var bounds = map.getBounds(),
+ southWest = bounds.getSouthWest(),
+ northEast = bounds.getNorthEast(),
+ lngSpan = northEast.lng - southWest.lng,
+ latSpan = northEast.lat - southWest.lat;
+
+ return new L.LatLng(
+ southWest.lat + latSpan * Math.random(),
+ southWest.lng + lngSpan * Math.random());
+ }
+
+ populate();
+ map.addLayer(markers);
+
+
+
+ var shownLayer, polygon;
+
+ function removePolygon() {
+ if (shownLayer) {
+ shownLayer.setOpacity(1);
+ shownLayer = null;
+ }
+ if (polygon) {
+ map.removeLayer(polygon);
+ polygon = null;
+ }
+ };
+
+ markers.on('clustermouseover', function (a) {
+ removePolygon();
+
+ a.layer.setOpacity(0.2);
+ shownLayer = a.layer;
+ polygon = new L.Polygon(a.layer.getConvexHull());
+ map.addLayer(polygon);
+ });
+ markers.on('clustermouseout', removePolygon);
+ map.on('zoomend', removePolygon);
+
+ </script>
+</body>
+</html>
diff --git a/example/marker-clustering-everything.html b/example/marker-clustering-everything.html
new file mode 100644
index 0000000..f63b0bb
--- /dev/null
+++ b/example/marker-clustering-everything.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
+ <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="screen.css" />
+
+ <link rel="stylesheet" href="../dist/MarkerCluster.css" />
+ <link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="../dist/MarkerCluster.Default.ie.css" /><![endif]-->
+ <script src="../dist/leaflet.markercluster-src.js"></script>
+</head>
+<body>
+
+ <div id="map"></div>
+ <button id="populate">Populate 1 marker</button>
+ <button id="remove">Remove 1 marker</button>
+ <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',
+ cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
+ cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
+ latlng = new L.LatLng(50.5, 30.51);
+
+ var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
+
+ var markers = new L.MarkerClusterGroup({ animateAddingMarkers : true });
+ var markersList = [];
+
+ function populate() {
+ for (var i = 0; i < 100; i++) {
+ var m = new L.Marker(getRandomLatLng(map));
+ markersList.push(m);
+ markers.addLayer(m);
+ }
+ return false;
+ }
+ function getRandomLatLng(map) {
+ var bounds = map.getBounds(),
+ southWest = bounds.getSouthWest(),
+ northEast = bounds.getNorthEast(),
+ lngSpan = northEast.lng - southWest.lng,
+ latSpan = northEast.lat - southWest.lat;
+
+ return new L.LatLng(
+ southWest.lat + latSpan * Math.random(),
+ southWest.lng + lngSpan * Math.random());
+ }
+
+ populate();
+ map.addLayer(markers);
+
+ for (var i = 0; i < 100; i++) {
+ markers.addLayer(markersList[i]);
+ }
+
+ //Ugly add/remove code
+ L.DomUtil.get('populate').onclick = function () {
+ var bounds = map.getBounds(),
+ southWest = bounds.getSouthWest(),
+ northEast = bounds.getNorthEast(),
+ lngSpan = northEast.lng - southWest.lng,
+ latSpan = northEast.lat - southWest.lat;
+ var m = new L.Marker(new L.LatLng(
+ southWest.lat + latSpan * 0.5,
+ southWest.lng + lngSpan * 0.5));
+ markersList.push(m);
+ markers.addLayer(m);
+ };
+ L.DomUtil.get('remove').onclick = function () {
+ markers.removeLayer(markersList.pop());
+ };
+
+ </script>
+</body>
+</html>
diff --git a/example/marker-clustering-realworld-maxzoom.388.html b/example/marker-clustering-realworld-maxzoom.388.html
new file mode 100644
index 0000000..b6d9ecb
--- /dev/null
+++ b/example/marker-clustering-realworld-maxzoom.388.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
+ <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="screen.css" />
+
+ <link rel="stylesheet" href="../dist/MarkerCluster.css" />
+ <link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="../dist/MarkerCluster.Default.ie.css" /><![endif]-->
+ <script src="../dist/leaflet.markercluster-src.js"></script>
+ <script src="realworld.388.js"></script>
+
+</head>
+<body>
+
+ <div id="map"></div>
+ <span>Markers will show on the bottom 2 zoom levels even though the markers would normally cluster.</span>
+ <script type="text/javascript">
+
+ var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
+ cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade, Points © 2012 LINZ',
+ cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 17, attribution: cloudmadeAttribution}),
+ latlng = new L.LatLng(-37.82, 175.24);
+
+ var map = new L.Map('map', {center: latlng, zoom: 13, layers: [cloudmade]});
+
+ var markers = new L.MarkerClusterGroup({ disableClusteringAtZoom: 17 });
+
+ for (var i = 0; i < addressPoints.length; i++) {
+ var a = addressPoints[i];
+ var title = a[2];
+ var marker = new L.Marker(new L.LatLng(a[0], a[1]), { title: title });
+ marker.bindPopup(title);
+ markers.addLayer(marker);
+ }
+
+ map.addLayer(markers);
+
+ </script>
+</body>
+</html>
diff --git a/example/marker-clustering-realworld-mobile.388.html b/example/marker-clustering-realworld-mobile.388.html
new file mode 100644
index 0000000..39aad98
--- /dev/null
+++ b/example/marker-clustering-realworld-mobile.388.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
+ <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+ <link rel="stylesheet" href="mobile.css" />
+
+ <link rel="stylesheet" href="../dist/MarkerCluster.css" />
+ <link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="../dist/MarkerCluster.Default.ie.css" /><![endif]-->
+ <script src="../dist/leaflet.markercluster-src.js"></script>
+ <script src="realworld.388.js"></script>
+</head>
+<body>
+
+ <div id="map"></div>
+
+ <script type="text/javascript">
+
+ var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
+ cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade, Points © 2012 LINZ',
+ cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
+ latlng = new L.LatLng(-37.821, 175.22);
+
+ var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
+
+ var markers = new L.MarkerClusterGroup();
+
+ for (var i = 0; i < addressPoints.length; i++) {
+ var a = addressPoints[i];
+ var title = a[2];
+ var marker = new L.Marker(new L.LatLng(a[0], a[1]), { title: title });
+ marker.bindPopup(title);
+ markers.addLayer(marker);
+ }
+
+ map.addLayer(markers);
+
+ </script>
+</body>
+</html>
diff --git a/example/marker-clustering-realworld.10000.html b/example/marker-clustering-realworld.10000.html
new file mode 100644
index 0000000..d6108af
--- /dev/null
+++ b/example/marker-clustering-realworld.10000.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
+ <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="screen.css" />
+
+ <link rel="stylesheet" href="../dist/MarkerCluster.css" />
+ <link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="../dist/MarkerCluster.Default.ie.css" /><![endif]-->
+ <script src="../dist/leaflet.markercluster-src.js"></script>
+
+ <script src="realworld.10000.js"></script>
+
+</head>
+<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',
+ cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade, Points © 2012 LINZ',
+ cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 17, attribution: cloudmadeAttribution}),
+ latlng = new L.LatLng(-37.89, 175.46);
+ var map = new L.Map('map', {center: latlng, zoom: 13, layers: [cloudmade]});
+
+ var markers = new L.MarkerClusterGroup();
+
+ for (var i = 0; i < addressPoints.length; i++) {
+ var a = addressPoints[i];
+ var title = a[2];
+ var marker = new L.Marker(new L.LatLng(a[0], a[1]), { title: title });
+ marker.bindPopup(title);
+ markers.addLayer(marker);
+ }
+
+ map.addLayer(markers);
+
+ </script>
+</body>
+</html>
diff --git a/example/marker-clustering-realworld.388.html b/example/marker-clustering-realworld.388.html
new file mode 100644
index 0000000..d7c5855
--- /dev/null
+++ b/example/marker-clustering-realworld.388.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
+ <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="screen.css" />
+
+ <link rel="stylesheet" href="../dist/MarkerCluster.css" />
+ <link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="../dist/MarkerCluster.Default.ie.css" /><![endif]-->
+ <script src="../dist/leaflet.markercluster-src.js"></script>
+ <script src="realworld.388.js"></script>
+
+</head>
+<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',
+ cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade, Points © 2012 LINZ',
+ cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 17, attribution: cloudmadeAttribution}),
+ latlng = new L.LatLng(-37.82, 175.24);
+
+ var map = new L.Map('map', {center: latlng, zoom: 13, layers: [cloudmade]});
+
+ var markers = new L.MarkerClusterGroup();
+
+ for (var i = 0; i < addressPoints.length; i++) {
+ var a = addressPoints[i];
+ var title = a[2];
+ var marker = new L.Marker(new L.LatLng(a[0], a[1]), { title: title });
+ marker.bindPopup(title);
+ markers.addLayer(marker);
+ }
+
+ map.addLayer(markers);
+
+ </script>
+</body>
+</html>
diff --git a/example/marker-clustering-realworld.50000.html b/example/marker-clustering-realworld.50000.html
new file mode 100644
index 0000000..185b154
--- /dev/null
+++ b/example/marker-clustering-realworld.50000.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
+ <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="screen.css" />
+
+ <link rel="stylesheet" href="../dist/MarkerCluster.css" />
+ <link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="../dist/MarkerCluster.Default.ie.css" /><![endif]-->
+ <script src="../dist/leaflet.markercluster-src.js"></script>
+
+ <script src="realworld.50000.1.js"></script>
+ <script src="realworld.50000.2.js"></script>
+
+</head>
+<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',
+ cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade, Points © 2012 LINZ',
+ cloudmade = new L.TileLayer(cloudmadeUrl, { maxZoom: 17, attribution: cloudmadeAttribution }),
+ latlng = new L.LatLng(-37.79, 175.27);
+
+ var map = new L.Map('map', { center: latlng, zoom: 13, layers: [cloudmade] });
+
+ var markers = new L.MarkerClusterGroup();
+
+ for (var i = 0; i < addressPoints.length; i++) {
+ var a = addressPoints[i];
+ var title = a[2];
+ var marker = new L.Marker(new L.LatLng(a[0], a[1]), { title: title });
+ marker.bindPopup(title);
+ markers.addLayer(marker);
+ }
+ for (var i = 0; i < addressPoints2.length; i++) {
+ var a = addressPoints[i];
+ var title = a[2];
+ var marker = new L.Marker(new L.LatLng(a[0], a[1]), { title: title });
+ marker.bindPopup(title);
+ markers.addLayer(marker);
+ }
+
+ map.addLayer(markers);
+ </script>
+</body>
+</html>
diff --git a/example/marker-clustering-singlemarkermode.html b/example/marker-clustering-singlemarkermode.html
new file mode 100644
index 0000000..60eef82
--- /dev/null
+++ b/example/marker-clustering-singlemarkermode.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
+ <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="screen.css" />
+
+ <link rel="stylesheet" href="../dist/MarkerCluster.css" />
+ <link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="../dist/MarkerCluster.Default.ie.css" /><![endif]-->
+ <script src="../dist/leaflet.markercluster-src.js"></script>
+</head>
+<body>
+
+ <div id="map"></div>
+ <span>Click a cluster to zoom to its bounds</span>
+
+ <script type="text/javascript">
+
+ var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
+ cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
+ cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
+ latlng = new L.LatLng(50.5, 30.51);
+
+ var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
+
+ var markers = new L.MarkerClusterGroup({ singleMarkerMode: true});
+
+ function populate() {
+ for (var i = 0; i < 100; i++) {
+ var m = new L.Marker(getRandomLatLng(map));
+ markers.addLayer(m);
+ }
+ return false;
+ }
+ function getRandomLatLng(map) {
+ var bounds = map.getBounds(),
+ southWest = bounds.getSouthWest(),
+ northEast = bounds.getNorthEast(),
+ lngSpan = northEast.lng - southWest.lng,
+ latSpan = northEast.lat - southWest.lat;
+
+ return new L.LatLng(
+ southWest.lat + latSpan * Math.random(),
+ southWest.lng + lngSpan * Math.random());
+ }
+
+ markers.on('clusterclick', function (a) {
+ a.layer.zoomToBounds();
+ });
+
+ populate();
+ map.addLayer(markers);
+
+ </script>
+</body>
+</html>
diff --git a/example/marker-clustering-spiderfier.html b/example/marker-clustering-spiderfier.html
new file mode 100644
index 0000000..c0d60a0
--- /dev/null
+++ b/example/marker-clustering-spiderfier.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
+ <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="screen.css" />
+
+ <link rel="stylesheet" href="../dist/MarkerCluster.css" />
+ <link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="../dist/MarkerCluster.Default.ie.css" /><![endif]-->
+ <script src="../dist/leaflet.markercluster-src.js"></script>
+</head>
+<body>
+
+ <div id="map"></div>
+ <button id="populate">Populate 1 marker</button>
+ <button id="remove">Remove 1 marker</button>
+
+ <script type="text/javascript">
+
+ var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
+ cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
+ cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
+ latlng = new L.LatLng(50.5, 30.51);
+
+ var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
+
+ var markers = new L.MarkerClusterGroup({ spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false });
+
+ function populate() {
+ for (var i = 0; i < 100; i++) {
+ var m = new L.Marker(getRandomLatLng(map));
+ markers.addLayer(m);
+ }
+ return false;
+ }
+ function getRandomLatLng(map) {
+ var bounds = map.getBounds(),
+ southWest = bounds.getSouthWest(),
+ northEast = bounds.getNorthEast(),
+ lngSpan = northEast.lng - southWest.lng,
+ latSpan = northEast.lat - southWest.lat;
+
+ return new L.LatLng(
+ southWest.lat + latSpan * Math.random(),
+ southWest.lng + lngSpan * Math.random());
+ }
+
+ markers.on('clusterclick', function (a) {
+ a.layer.spiderfy();
+ });
+
+ populate();
+ map.addLayer(markers);
+ </script>
+</body>
+</html>
diff --git a/example/marker-clustering-zoomtobounds.html b/example/marker-clustering-zoomtobounds.html
new file mode 100644
index 0000000..b5fb002
--- /dev/null
+++ b/example/marker-clustering-zoomtobounds.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
+ <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="screen.css" />
+
+ <link rel="stylesheet" href="../dist/MarkerCluster.css" />
+ <link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="../dist/MarkerCluster.Default.ie.css" /><![endif]-->
+ <script src="../dist/leaflet.markercluster-src.js"></script>
+</head>
+<body>
+
+ <div id="map"></div>
+ <span>Click a cluster to zoom to its bounds</span>
+
+ <script type="text/javascript">
+
+ var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
+ cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
+ cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
+ latlng = new L.LatLng(50.5, 30.51);
+
+ var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
+
+ var markers = new L.MarkerClusterGroup({spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false});
+
+ function populate() {
+ for (var i = 0; i < 100; i++) {
+ var m = new L.Marker(getRandomLatLng(map));
+ markers.addLayer(m);
+ }
+ return false;
+ }
+ function getRandomLatLng(map) {
+ var bounds = map.getBounds(),
+ southWest = bounds.getSouthWest(),
+ northEast = bounds.getNorthEast(),
+ lngSpan = northEast.lng - southWest.lng,
+ latSpan = northEast.lat - southWest.lat;
+
+ return new L.LatLng(
+ southWest.lat + latSpan * Math.random(),
+ southWest.lng + lngSpan * Math.random());
+ }
+
+ markers.on('clusterclick', function (a) {
+ a.layer.zoomToBounds();
+ });
+
+ populate();
+ map.addLayer(markers);
+
+ </script>
+</body>
+</html>
diff --git a/example/marker-clustering-zoomtoshowlayer.html b/example/marker-clustering-zoomtoshowlayer.html
new file mode 100644
index 0000000..2b35229
--- /dev/null
+++ b/example/marker-clustering-zoomtoshowlayer.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
+ <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="screen.css" />
+
+ <link rel="stylesheet" href="../dist/MarkerCluster.css" />
+ <link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="../dist/MarkerCluster.Default.ie.css" /><![endif]-->
+ <script src="../dist/leaflet.markercluster-src.js"></script>
+ <script src="realworld.388.js"></script>
+
+</head>
+<body>
+
+ <div id="map"></div>
+ <button id="doit">Zoom to marker</button>
+ <span>When clicked we will zoom down to a marker, spiderfying if required to show it and then open its popup</span>
+ <script type="text/javascript">
+
+ var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
+ cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade, Points © 2012 LINZ',
+ cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 17, attribution: cloudmadeAttribution}),
+ latlng = new L.LatLng(-37.82, 175.24);
+
+ var map = new L.Map('map', {center: latlng, zoom: 13, layers: [cloudmade]});
+
+ var markers = new L.MarkerClusterGroup();
+ var markerList = [];
+
+ function populate() {
+ for (var i = 0; i < addressPoints.length; i++) {
+ var a = addressPoints[i];
+ var title = a[2];
+ var marker = new L.Marker(new L.LatLng(a[0], a[1]), { title: title });
+ marker.bindPopup(title);
+ markers.addLayer(marker);
+ markerList.push(marker);
+ }
+ }
+
+ populate();
+
+ map.addLayer(markers);
+
+ document.getElementById('doit').onclick = function () {
+ var m = markerList[Math.floor(Math.random() * markerList.length)];
+ markers.zoomToShowLayer(m, function () {
+ m.openPopup();
+ });
+ };
+
+ </script>
+</body>
+</html>
diff --git a/example/marker-clustering.html b/example/marker-clustering.html
new file mode 100644
index 0000000..cc18fb9
--- /dev/null
+++ b/example/marker-clustering.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
+ <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="screen.css" />
+
+ <link rel="stylesheet" href="../dist/MarkerCluster.css" />
+ <link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="../dist/MarkerCluster.Default.ie.css" /><![endif]-->
+ <script src="../dist/leaflet.markercluster-src.js"></script>
+</head>
+<body>
+
+ <div id="map"></div>
+ <button id="populate">Populate 1 marker</button>
+ <button id="remove">Remove 1 marker</button>
+
+ <script type="text/javascript">
+
+ var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
+ cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
+ cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
+ latlng = new L.LatLng(50.5, 30.51);
+
+ var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
+
+ var markers = new L.MarkerClusterGroup();
+ var markersList = [];
+
+ function populate() {
+ for (var i = 0; i < 100; i++) {
+ var m = new L.Marker(getRandomLatLng(map));
+ markersList.push(m);
+ markers.addLayer(m);
+ }
+ return false;
+ }
+ function populateRandomVector() {
+ for (var i = 0, latlngs = [], len = 20; i < len; i++) {
+ latlngs.push(getRandomLatLng(map));
+ }
+ var path = new L.Polyline(latlngs);
+ map.addLayer(path);
+ }
+ function getRandomLatLng(map) {
+ var bounds = map.getBounds(),
+ southWest = bounds.getSouthWest(),
+ northEast = bounds.getNorthEast(),
+ lngSpan = northEast.lng - southWest.lng,
+ latSpan = northEast.lat - southWest.lat;
+
+ return new L.LatLng(
+ southWest.lat + latSpan * Math.random(),
+ southWest.lng + lngSpan * Math.random());
+ }
+
+ markers.on('clusterclick', function (a) {
+ alert('cluster ' + a.layer.getAllChildMarkers().length);
+ });
+ markers.on('click', function (a) {
+ alert('marker ' + a.layer);
+ });
+
+ populate();
+ map.addLayer(markers);
+
+ L.DomUtil.get('populate').onclick = function () {
+ var bounds = map.getBounds(),
+ southWest = bounds.getSouthWest(),
+ northEast = bounds.getNorthEast(),
+ lngSpan = northEast.lng - southWest.lng,
+ latSpan = northEast.lat - southWest.lat;
+ var m = new L.Marker(new L.LatLng(
+ southWest.lat + latSpan * 0.5,
+ southWest.lng + lngSpan * 0.5));
+ markersList.push(m);
+ markers.addLayer(m);
+ };
+ L.DomUtil.get('remove').onclick = function () {
+ markers.removeLayer(markersList.pop());
+ };
+ </script>
+</body>
+</html>
diff --git a/example/mobile.css b/example/mobile.css
new file mode 100644
index 0000000..c59a527
--- /dev/null
+++ b/example/mobile.css
@@ -0,0 +1,6 @@
+html, body, #map {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+}
\ No newline at end of file
diff --git a/example/old-bugs/add-1000-after.html b/example/old-bugs/add-1000-after.html
new file mode 100644
index 0000000..03fbb88
--- /dev/null
+++ b/example/old-bugs/add-1000-after.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
+ <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet-src.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="../screen.css" />
+
+ <link rel="stylesheet" href="../../dist/MarkerCluster.css" />
+ <link rel="stylesheet" href="../../dist/MarkerCluster.Default.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="../../dist/MarkerCluster.Default.ie.css" /><![endif]-->
+ <script src="../../src/DistanceGrid.js"></script>
+ <script src="../../src/MarkerCluster.js"></script>
+ <script src="../../src/MarkerClusterGroup.js"></script>
+ <script src="../../src/MarkerCluster.QuickHull.js"></script>
+ <script src="../../src/MarkerCluster.Spiderfier.js"></script>
+</head>
+<body>
+
+ <div id="map"></div>
+ <button id="doit">Add 1000 Markers</button><br/>
+ <span>Bug <a href="https://github.com/danzel/Leaflet.markercluster/issues/51">#51</a>. Click the button. It will add 1000 markers to the map. this should be fast, but previously in (non-IE browsers) it was very slow.</span><br/>
+ <span>Bug <a href="https://github.com/danzel/Leaflet.markercluster/issues/43">#43</a>. Improving performance more.</span><br/>
+ <span id="time"></span>
+ <script type="text/javascript">
+
+ var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
+ cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
+ cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
+ latlng = new L.LatLng(50.5, 30.51);
+
+ var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
+
+ var markers = new L.MarkerClusterGroup();
+ var markersList = [];
+
+ function getRandomLatLng(map) {
+ var bounds = map.getBounds(),
+ southWest = bounds.getSouthWest(),
+ northEast = bounds.getNorthEast(),
+ lngSpan = northEast.lng - southWest.lng,
+ latSpan = northEast.lat - southWest.lat;
+
+ return new L.LatLng(
+ southWest.lat + latSpan * Math.random(),
+ southWest.lng + lngSpan * Math.random());
+ }
+
+ function populate(length) {
+ var prestart = +new Date();
+ var list = [], i;
+ for (i = 0; i < length; i++) {
+ var m = new L.Marker(getRandomLatLng(map));
+ list.push(m);
+ }
+
+ var start = +new Date();
+
+ markers.addLayers(list);
+
+ var end = +new Date();
+
+ document.getElementById('time').innerHTML = 'Creating 1000 markers took: ' + (start - prestart) + 'ms . Appending 1000 markers took: ' + (end - start) + 'ms';
+
+ return false;
+ }
+
+ populate(1000);
+ var start = +new Date();
+ map.addLayer(markers);
+ var end = +new Date();
+ document.getElementById('time').innerHTML += ' . Adding to map took: ' + (end - start) + 'ms';
+
+ //Ugly add/remove code
+ L.DomUtil.get('doit').onclick = function () {
+ populate(1000);
+ };
+
+ </script>
+</body>
+</html>
diff --git a/example/old-bugs/add-markers-offscreen.html b/example/old-bugs/add-markers-offscreen.html
new file mode 100644
index 0000000..f0573db
--- /dev/null
+++ b/example/old-bugs/add-markers-offscreen.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
+ <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet-src.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="../screen.css" />
+
+ <link rel="stylesheet" href="../../dist/MarkerCluster.css" />
+ <link rel="stylesheet" href="../../dist/MarkerCluster.Default.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="../../dist/MarkerCluster.Default.ie.css" /><![endif]-->
+ <script src="../../src/DistanceGrid.js"></script>
+ <script src="../../src/MarkerCluster.js"></script>
+ <script src="../../src/MarkerClusterGroup.js"></script>
+ <script src="../../src/MarkerCluster.QuickHull.js"></script>
+ <script src="../../src/MarkerCluster.Spiderfier.js"></script>
+</head>
+<body>
+
+ <div id="map"></div>
+ <button id="populate">Populate 1 marker</button>
+ <span>Bug <a href="https://github.com/danzel/Leaflet.markercluster/issues/69">#69</a>. Click the button 2+ times. Zoom out. Should just be a single cluster but instead one of the child markers is still visible.</span><br/>
+ <script type="text/javascript">
+
+ var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
+ cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
+ cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
+ latlng = new L.LatLng(50.5, 30.51);
+
+ var map = new L.Map('map', {center: new L.LatLng(50.41, 30.51), zoom: 17, layers: [cloudmade]});
+
+ var markers = new L.MarkerClusterGroup({ animateAddingMarkers : true });
+ var markersList = [];
+
+ function populate() {
+ var m = new L.Marker(latlng);
+ markersList.push(m);
+ markers.addLayer(m);
+ return false;
+ }
+
+ map.addLayer(markers);
+
+ //Ugly add/remove code
+ L.DomUtil.get('populate').onclick = function () {
+ populate();
+ };
+ </script>
+</body>
+</html>
diff --git a/example/old-bugs/add-remove-before-addtomap.html b/example/old-bugs/add-remove-before-addtomap.html
new file mode 100644
index 0000000..2de3a7f
--- /dev/null
+++ b/example/old-bugs/add-remove-before-addtomap.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
+ <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet-src.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="../screen.css" />
+
+ <link rel="stylesheet" href="../../dist/MarkerCluster.css" />
+ <link rel="stylesheet" href="../../dist/MarkerCluster.Default.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="../../dist/MarkerCluster.Default.ie.css" /><![endif]-->
+ <script src="../../src/DistanceGrid.js"></script>
+ <script src="../../src/MarkerCluster.js"></script>
+ <script src="../../src/MarkerClusterGroup.js"></script>
+ <script src="../../src/MarkerCluster.QuickHull.js"></script>
+ <script src="../../src/MarkerCluster.Spiderfier.js"></script>
+</head>
+<body>
+
+ <div id="map"></div>
+ <span>Bug <a href="https://github.com/danzel/Leaflet.markercluster/issues/64">#64</a>. Nothing should appear on the map.</span><br/>
+ <span id="time"></span>
+ <script type="text/javascript">
+
+ var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
+ cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
+ cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
+ latlng = new L.LatLng(50.5, 30.51);
+
+ var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
+
+ var markers = new L.MarkerClusterGroup();
+
+ function getRandomLatLng(map) {
+ var bounds = map.getBounds(),
+ southWest = bounds.getSouthWest(),
+ northEast = bounds.getNorthEast(),
+ lngSpan = northEast.lng - southWest.lng,
+ latSpan = northEast.lat - southWest.lat;
+
+ return new L.LatLng(
+ southWest.lat + latSpan * Math.random(),
+ southWest.lng + lngSpan * Math.random());
+ }
+
+ function populate(length) {
+ var list = [], i;
+ for (i = 0; i < length; i++) {
+ var m = new L.Marker(getRandomLatLng(map));
+ markers.addLayer(m);
+ markers.removeLayer(m);
+ }
+ }
+
+ populate(1000);
+ map.addLayer(markers);
+
+ </script>
+</body>
+</html>
diff --git a/example/old-bugs/remove-add-clustering.html b/example/old-bugs/remove-add-clustering.html
new file mode 100644
index 0000000..7ee36fc
--- /dev/null
+++ b/example/old-bugs/remove-add-clustering.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
+ <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet-src.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="../screen.css" />
+
+ <link rel="stylesheet" href="../../dist/MarkerCluster.css" />
+ <link rel="stylesheet" href="../../dist/MarkerCluster.Default.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="../../dist/MarkerCluster.Default.ie.css" /><![endif]-->
+ <script src="../../src/DistanceGrid.js"></script>
+ <script src="../../src/MarkerCluster.js"></script>
+ <script src="../../src/MarkerClusterGroup.js"></script>
+ <script src="../../src/MarkerCluster.QuickHull.js"></script>
+ <script src="../../src/MarkerCluster.Spiderfier.js"></script>
+</head>
+<body>
+
+ <div id="map"></div>
+ <p>Whenever a marker is clicked it is removed from the clusterer and added directly to the map instead.</p>
+ <p>Click Marker on Left, zoom out 1 layer, click marker on right.</p>
+ <p>Expected behaviour: Both markers are shown. Bugged behaviour: Both markers are on map with opacity 0.</p>
+ <pre id="log"></pre>
+
+ <script type="text/javascript">
+
+ var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
+ cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
+ cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
+ latlng = new L.LatLng(50.5, 30.51);
+
+ var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
+
+ var markers = new L.MarkerClusterGroup({ animateAddingMarkers: true });
+ var markersList = [];
+ var m;
+
+ m = new L.Marker([50.5, 30.51]);
+ markersList.push(m);
+ markers.addLayer(m);
+ m = new L.Marker([50.5, 30.515]);
+ markersList.push(m);
+ markers.addLayer(m);
+
+ map.addLayer(markers);
+
+ var lastClicked = null;
+ markers.on('click', function (m) {
+ console.log('clicked ' + m);
+ if (lastClicked) {
+ map.removeLayer(lastClicked);
+ markers.addLayer(lastClicked);
+ }
+
+ lastClicked = m.layer;
+
+ markers.removeLayer(lastClicked);
+ map.addLayer(lastClicked);
+ });
+
+ map.on('click', function () {
+ console.log('map clicked');
+ if (lastClicked) {
+ map.removeLayer(lastClicked);
+ markers.addLayer(lastClicked);
+ }
+ lastClicked = null;
+ });
+ </script>
+</body>
+</html>
diff --git a/example/old-bugs/remove-when-spiderfied.html b/example/old-bugs/remove-when-spiderfied.html
new file mode 100644
index 0000000..6c674b5
--- /dev/null
+++ b/example/old-bugs/remove-when-spiderfied.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
+ <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet-src.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="../screen.css" />
+
+ <link rel="stylesheet" href="../../dist/MarkerCluster.css" />
+ <link rel="stylesheet" href="../../dist/MarkerCluster.Default.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="../../dist/MarkerCluster.Default.ie.css" /><![endif]-->
+ <script src="../../src/DistanceGrid.js"></script>
+ <script src="../../src/MarkerCluster.js"></script>
+ <script src="../../src/MarkerClusterGroup.js"></script>
+ <script src="../../src/MarkerCluster.QuickHull.js"></script>
+ <script src="../../src/MarkerCluster.Spiderfier.js"></script>
+</head>
+<body>
+
+ <div id="map"></div>
+ <button id="doit">Remove and add direct to map</button><button id="doit2">clearLayers</button><br/>
+ <span>Bug <a href="https://github.com/danzel/Leaflet.markercluster/issues/54">#54</a>. Spiderfy the cluster then click the button. Should result in 2 markers right beside each other on the map.</span><br/>
+ <span>Bug <a href="https://github.com/danzel/Leaflet.markercluster/issues/53">#53</a>. Spiderfy the cluster then click the button. Spider lines remain on the map.</span>
+ <span>Bug <a href="https://github.com/danzel/Leaflet.markercluster/issues/49">#49</a>. Spiderfy the cluster then click the second button. Spider lines remain on the map. Click the map to get an error.</span>
+
+ <script type="text/javascript">
+
+ var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
+ cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
+ cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
+ latlng = new L.LatLng(50.5, 30.51);
+
+ var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
+
+ var markers = new L.MarkerClusterGroup();
+ var markersList = [];
+ var m;
+
+ m = new L.Marker([50.5, 30.51]);
+ markersList.push(m);
+ markers.addLayer(m);
+ m = new L.Marker([50.5, 30.5101]);
+ markersList.push(m);
+ markers.addLayer(m);
+
+ map.addLayer(markers);
+
+ //Ugly add/remove code
+ L.DomUtil.get('doit').onclick = function () {
+ map.removeLayer(markers);
+ map.addLayer(markersList[0]);
+ map.addLayer(markersList[1]);
+ };
+ L.DomUtil.get('doit2').onclick = function () {
+ markers.clearLayers();
+ };
+
+ </script>
+</body>
+</html>
diff --git a/example/old-bugs/setView-doesnt-remove.html b/example/old-bugs/setView-doesnt-remove.html
new file mode 100644
index 0000000..2bca678
--- /dev/null
+++ b/example/old-bugs/setView-doesnt-remove.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
+ <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet-src.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="../screen.css" />
+
+ <link rel="stylesheet" href="../../dist/MarkerCluster.css" />
+ <link rel="stylesheet" href="../../dist/MarkerCluster.Default.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="../../dist/MarkerCluster.Default.ie.css" /><![endif]-->
+ <script src="../../src/DistanceGrid.js"></script>
+ <script src="../../src/MarkerCluster.js"></script>
+ <script src="../../src/MarkerClusterGroup.js"></script>
+ <script src="../../src/MarkerCluster.QuickHull.js"></script>
+ <script src="../../src/MarkerCluster.Spiderfier.js"></script>
+</head>
+<body>
+
+ <div id="map"></div>
+ <button id="doit">setView</button><br/>
+ <span>Bug <a href="https://github.com/danzel/Leaflet.markercluster/issues/63">#63</a>. Zoom down on the very left side untill markers are visible. Click the button. Scroll to the left in one go, those markers should be in clusters but the actual markers will still be visible.</span><br/>
+ <span id="time"></span>
+ <script type="text/javascript">
+
+ //Mobile does different bounds to desktop, makes the bug easier to reproduce
+ L.Browser.mobile = true;
+
+ var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
+ cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
+ cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
+ latlng = new L.LatLng(50.5, 30.51);
+
+ var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
+
+ var markers = new L.MarkerClusterGroup();
+ var markersList = [];
+
+ function getRandomLatLng(map) {
+ var bounds = map.getBounds(),
+ southWest = bounds.getSouthWest(),
+ northEast = bounds.getNorthEast(),
+ lngSpan = northEast.lng - southWest.lng,
+ latSpan = northEast.lat - southWest.lat;
+
+ return new L.LatLng(
+ southWest.lat + latSpan * Math.random(),
+ southWest.lng + lngSpan * Math.random());
+ }
+
+ function populate(length) {
+ for (var i = 0; i < length; i++) {
+ var m = new L.Marker(getRandomLatLng(map));
+ markers.addLayer(m);
+ }
+ }
+
+ populate(1000);
+ map.addLayer(markers);
+
+ L.DomUtil.get('doit').onclick = function () {
+ map.setView(new L.LatLng(50.5, 30.525), 15);
+ };
+
+ </script>
+</body>
+</html>
diff --git a/example/old-bugs/zoomtoshowlayer-doesnt-need-to-zoom.html b/example/old-bugs/zoomtoshowlayer-doesnt-need-to-zoom.html
new file mode 100644
index 0000000..1fefae5
--- /dev/null
+++ b/example/old-bugs/zoomtoshowlayer-doesnt-need-to-zoom.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /><![endif]-->
+ <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet-src.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="../screen.css" />
+
+ <link rel="stylesheet" href="../../dist/MarkerCluster.css" />
+ <link rel="stylesheet" href="../../dist/MarkerCluster.Default.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="../../dist/MarkerCluster.Default.ie.css" /><![endif]-->
+ <script src="../../src/DistanceGrid.js"></script>
+ <script src="../../src/MarkerCluster.js"></script>
+ <script src="../../src/MarkerClusterGroup.js"></script>
+ <script src="../../src/MarkerCluster.QuickHull.js"></script>
+ <script src="../../src/MarkerCluster.Spiderfier.js"></script>
+</head>
+<body>
+
+ <div id="map"></div>
+ <button id="doit">open popup</button><br/>
+ <span>Bug <a href="https://github.com/danzel/Leaflet.markercluster/issues/65">#65</a>. Click 2 then click the button. You should be scrolled to the marker, old behaviour would zoom you out.</span><br/>
+ <span id="time"></span>
+ <script type="text/javascript">
+
+ var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
+ cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
+ cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
+ latlng = new L.LatLng(50.5, 30.51);
+
+ var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
+
+ var markers = new L.MarkerClusterGroup();
+ var markersList = [];
+
+ var m = new L.Marker(new L.LatLng(50.507, 30.502));
+ m.bindPopup('asdasd');
+ markersList.push(m);
+ markers.addLayer(m);
+
+
+ m = new L.Marker(new L.LatLng(50.493, 30.518));
+ markersList.push(m);
+ markers.addLayer(m);
+
+ m = new L.Marker(new L.LatLng(50.493, 30.518));
+ markersList.push(m);
+ markers.addLayer(m);
+
+
+ map.addLayer(markers);
+
+ L.DomUtil.get('doit').onclick = function () {
+ markers.zoomToShowLayer(markersList[0], function () {
+ markersList[0].openPopup();
+ });
+ };
+
+ </script>
+</body>
+</html>
diff --git a/example/screen.css b/example/screen.css
new file mode 100644
index 0000000..ea33d34
--- /dev/null
+++ b/example/screen.css
@@ -0,0 +1,5 @@
+#map {
+ width: 800px;
+ height: 600px;
+ border: 1px solid #ccc;
+ }
\ No newline at end of file
diff --git a/src/DistanceGrid.js b/src/DistanceGrid.js
new file mode 100644
index 0000000..8235c61
--- /dev/null
+++ b/src/DistanceGrid.js
@@ -0,0 +1,120 @@
+
+L.DistanceGrid = function (cellSize) {
+ this._cellSize = cellSize;
+ this._sqCellSize = cellSize * cellSize;
+ this._grid = {};
+ this._objectPoint = { };
+};
+
+L.DistanceGrid.prototype = {
+
+ addObject: function (obj, point) {
+ var x = this._getCoord(point.x),
+ y = this._getCoord(point.y),
+ grid = this._grid,
+ row = grid[y] = grid[y] || {},
+ cell = row[x] = row[x] || [],
+ stamp = L.Util.stamp(obj);
+
+ this._objectPoint[stamp] = point;
+
+ cell.push(obj);
+ },
+
+ updateObject: function (obj, point) {
+ this.removeObject(obj);
+ this.addObject(obj, point);
+ },
+
+ //Returns true if the object was found
+ removeObject: function (obj, point) {
+ var x = this._getCoord(point.x),
+ y = this._getCoord(point.y),
+ grid = this._grid,
+ row = grid[y] = grid[y] || {},
+ cell = row[x] = row[x] || [],
+ i, len;
+
+ delete this._objectPoint[L.Util.stamp(obj)];
+
+ for (i = 0, len = cell.length; i < len; i++) {
+ if (cell[i] === obj) {
+
+ cell.splice(i, 1);
+
+ if (len === 1) {
+ delete row[x];
+ }
+
+ return true;
+ }
+ }
+
+ },
+
+ eachObject: function (fn, context) {
+ var i, j, k, len, row, cell, removed,
+ grid = this._grid;
+
+ for (i in grid) {
+ if (grid.hasOwnProperty(i)) {
+ row = grid[i];
+
+ for (j in row) {
+ if (row.hasOwnProperty(j)) {
+ cell = row[j];
+
+ for (k = 0, len = cell.length; k < len; k++) {
+ removed = fn.call(context, cell[k]);
+ if (removed) {
+ k--;
+ len--;
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+
+ getNearObject: function (point) {
+ var x = this._getCoord(point.x),
+ y = this._getCoord(point.y),
+ i, j, k, row, cell, len, obj, dist,
+ objectPoint = this._objectPoint,
+ closestDistSq = this._sqCellSize,
+ closest = null;
+
+ for (i = y - 1; i <= y + 1; i++) {
+ row = this._grid[i];
+ if (row) {
+
+ for (j = x - 1; j <= x + 1; j++) {
+ cell = row[j];
+ if (cell) {
+
+ for (k = 0, len = cell.length; k < len; k++) {
+ obj = cell[k];
+ dist = this._sqDist(objectPoint[L.Util.stamp(obj)], point);
+ if (dist < closestDistSq) {
+ closestDistSq = dist;
+ closest = obj;
+ }
+ }
+ }
+ }
+ }
+ }
+ return closest;
+ },
+
+ _getCoord: function (x) {
+ return Math.floor(x / this._cellSize);
+ },
+
+ _sqDist: function (p, p2) {
+ var dx = p2.x - p.x,
+ dy = p2.y - p.y;
+ return dx * dx + dy * dy;
+ }
+};
diff --git a/src/MarkerCluster.QuickHull.js b/src/MarkerCluster.QuickHull.js
new file mode 100644
index 0000000..8f033bc
--- /dev/null
+++ b/src/MarkerCluster.QuickHull.js
@@ -0,0 +1,124 @@
+/* Copyright (c) 2012 the authors listed at the following URL, and/or
+the authors of referenced articles or incorporated external code:
+http://en.literateprograms.org/Quickhull_(Javascript)?action=history&offset=20120410175256
+
+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.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Retrieved from: http://en.literateprograms.org/Quickhull_(Javascript)?oldid=18434
+*/
+
+(function () {
+ L.QuickHull = {
+ getDistant: function (cpt, bl) {
+ var vY = bl[1].lat - bl[0].lat,
+ vX = bl[0].lng - bl[1].lng;
+ return (vX * (cpt.lat - bl[0].lat) + vY * (cpt.lng - bl[0].lng));
+ },
+
+
+ findMostDistantPointFromBaseLine: function (baseLine, latLngs) {
+ var maxD = 0,
+ maxPt = null,
+ newPoints = [],
+ i, pt, d;
+
+ for (i = latLngs.length - 1; i >= 0; i--) {
+ pt = latLngs[i];
+ d = this.getDistant(pt, baseLine);
+
+ if (d > 0) {
+ newPoints.push(pt);
+ } else {
+ continue;
+ }
+
+ if (d > maxD) {
+ maxD = d;
+ maxPt = pt;
+ }
+
+ }
+ return { 'maxPoint': maxPt, 'newPoints': newPoints };
+ },
+
+ buildConvexHull: function (baseLine, latLngs) {
+ var convexHullBaseLines = [],
+ t = this.findMostDistantPointFromBaseLine(baseLine, latLngs);
+
+ if (t.maxPoint) { // if there is still a point "outside" the base line
+ convexHullBaseLines =
+ convexHullBaseLines.concat(
+ this.buildConvexHull([baseLine[0], t.maxPoint], t.newPoints)
+ );
+ convexHullBaseLines =
+ convexHullBaseLines.concat(
+ this.buildConvexHull([t.maxPoint, baseLine[1]], t.newPoints)
+ );
+ return convexHullBaseLines;
+ } else { // if there is no more point "outside" the base line, the current base line is part of the convex hull
+ return [baseLine];
+ }
+ },
+
+ getConvexHull: function (latLngs) {
+ //find first baseline
+ var maxLat = false, minLat = false,
+ maxPt = null, minPt = null,
+ i;
+
+ for (i = latLngs.length - 1; i >= 0; i--) {
+ var pt = latLngs[i];
+ if (maxLat === false || pt.lat > maxLat) {
+ maxPt = pt;
+ maxLat = pt.lat;
+ }
+ if (minLat === false || pt.lat < minLat) {
+ minPt = pt;
+ minLat = pt.lat;
+ }
+ }
+ var ch = [].concat(this.buildConvexHull([minPt, maxPt], latLngs),
+ this.buildConvexHull([maxPt, minPt], latLngs));
+ return ch;
+ }
+ };
+}());
+
+L.MarkerCluster.include({
+ getConvexHull: function () {
+ var childMarkers = this.getAllChildMarkers(),
+ points = [],
+ hullLatLng = [],
+ hull, p, i;
+
+ for (i = childMarkers.length - 1; i >= 0; i--) {
+ p = childMarkers[i].getLatLng();
+ points.push(p);
+ }
+
+ hull = L.QuickHull.getConvexHull(points);
+
+ for (i = hull.length - 1; i >= 0; i--) {
+ hullLatLng.push(hull[i][0]);
+ }
+
+ return hullLatLng;
+ }
+});
\ No newline at end of file
diff --git a/src/MarkerCluster.Spiderfier.js b/src/MarkerCluster.Spiderfier.js
new file mode 100644
index 0000000..2b52a2f
--- /dev/null
+++ b/src/MarkerCluster.Spiderfier.js
@@ -0,0 +1,381 @@
+//This code is 100% based on https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet
+//Huge thanks to jawj for implementing it first to make my job easy :-)
+
+L.MarkerCluster.include({
+
+ _2PI: Math.PI * 2,
+ _circleFootSeparation: 25, //related to circumference of circle
+ _circleStartAngle: Math.PI / 6,
+
+ _spiralFootSeparation: 28, //related to size of spiral (experiment!)
+ _spiralLengthStart: 11,
+ _spiralLengthFactor: 5,
+
+ _circleSpiralSwitchover: 9, //show spiral instead of circle from this marker count upwards.
+ // 0 -> always spiral; Infinity -> always circle
+
+ spiderfy: function () {
+ if (this._group._spiderfied === this || this._group._inZoomAnimation) {
+ return;
+ }
+
+ var childMarkers = this.getAllChildMarkers(),
+ group = this._group,
+ map = group._map,
+ center = map.latLngToLayerPoint(this._latlng),
+ positions;
+
+ this._group._unspiderfy();
+ this._group._spiderfied = this;
+
+ //TODO Maybe: childMarkers order by distance to center
+
+ if (childMarkers.length >= this._circleSpiralSwitchover) {
+ positions = this._generatePointsSpiral(childMarkers.length, center);
+ } else {
+ center.y += 10; //Otherwise circles look wrong
+ positions = this._generatePointsCircle(childMarkers.length, center);
+ }
+
+ this._animationSpiderfy(childMarkers, positions);
+ },
+
+ unspiderfy: function (zoomDetails) {
+ /// <param Name="zoomDetails">Argument from zoomanim if being called in a zoom animation or null otherwise</param>
+ if (this._group._inZoomAnimation) {
+ return;
+ }
+ this._animationUnspiderfy(zoomDetails);
+
+ this._group._spiderfied = null;
+ },
+
+ _generatePointsCircle: function (count, centerPt) {
+ var circumference = this._circleFootSeparation * (2 + count),
+ legLength = circumference / this._2PI, //radius from circumference
+ angleStep = this._2PI / count,
+ res = [],
+ i, angle;
+
+ res.length = count;
+
+ for (i = count - 1; i >= 0; i--) {
+ angle = this._circleStartAngle + i * angleStep;
+ res[i] = new L.Point(centerPt.x + legLength * Math.cos(angle), centerPt.y + legLength * Math.sin(angle))._round();
+ }
+
+ return res;
+ },
+
+ _generatePointsSpiral: function (count, centerPt) {
+ var legLength = this._spiralLengthStart,
+ angle = 0,
+ res = [],
+ i;
+
+ res.length = count;
+
+ for (i = count - 1; i >= 0; i--) {
+ angle += this._spiralFootSeparation / legLength + i * 0.0005;
+ res[i] = new L.Point(centerPt.x + legLength * Math.cos(angle), centerPt.y + legLength * Math.sin(angle))._round();
+ legLength += this._2PI * this._spiralLengthFactor / angle;
+ }
+ return res;
+ }
+});
+
+L.MarkerCluster.include(!L.DomUtil.TRANSITION ? {
+ //Non Animated versions of everything
+ _animationSpiderfy: function (childMarkers, positions) {
+ var group = this._group,
+ map = group._map,
+ i, m, leg, newPos;
+
+ for (i = childMarkers.length - 1; i >= 0; i--) {
+ newPos = map.layerPointToLatLng(positions[i]);
+ m = childMarkers[i];
+
+ m._preSpiderfyLatlng = m._latlng;
+ m.setLatLng(newPos);
+ m.setZIndexOffset(1000000); //Make these appear on top of EVERYTHING
+
+ L.FeatureGroup.prototype.addLayer.call(group, m);
+
+
+ leg = new L.Polyline([this._latlng, newPos], { weight: 1.5, color: '#222' });
+ map.addLayer(leg);
+ m._spiderLeg = leg;
+ }
+ this.setOpacity(0.3);
+ group.fire('spiderfied');
+ },
+
+ _animationUnspiderfy: function () {
+ var group = this._group,
+ map = group._map,
+ childMarkers = this.getAllChildMarkers(),
+ m, i;
+
+ this.setOpacity(1);
+ for (i = childMarkers.length - 1; i >= 0; i--) {
+ m = childMarkers[i];
+
+ L.FeatureGroup.prototype.removeLayer.call(group, m);
+
+ m.setLatLng(m._preSpiderfyLatlng);
+ delete m._preSpiderfyLatlng;
+ m.setZIndexOffset(0);
+
+ map.removeLayer(m._spiderLeg);
+ delete m._spiderLeg;
+ }
+ }
+} : {
+ //Animated versions here
+ _animationSpiderfy: function (childMarkers, positions) {
+ var me = this,
+ group = this._group,
+ map = group._map,
+ thisLayerPos = map.latLngToLayerPoint(this._latlng),
+ i, m, leg, newPos;
+
+ //Add markers to map hidden at our center point
+ for (i = childMarkers.length - 1; i >= 0; i--) {
+ m = childMarkers[i];
+
+ m.setZIndexOffset(1000000); //Make these appear on top of EVERYTHING
+ m.setOpacity(0);
+
+ L.FeatureGroup.prototype.addLayer.call(group, m);
+
+ m._setPos(thisLayerPos);
+ }
+
+ group._forceLayout();
+ group._animationStart();
+
+ var initialLegOpacity = L.Path.SVG ? 0 : 0.3,
+ xmlns = L.Path.SVG_NS;
+
+
+ for (i = childMarkers.length - 1; i >= 0; i--) {
+ newPos = map.layerPointToLatLng(positions[i]);
+ m = childMarkers[i];
+
+ //Move marker to new position
+ m._preSpiderfyLatlng = m._latlng;
+ m.setLatLng(newPos);
+ m.setOpacity(1);
+
+
+ //Add Legs.
+ leg = new L.Polyline([me._latlng, newPos], { weight: 1.5, color: '#222', opacity: initialLegOpacity });
+ map.addLayer(leg);
+ m._spiderLeg = leg;
+
+ //Following animations don't work for canvas
+ if (!L.Path.SVG) {
+ continue;
+ }
+
+ //How this works:
+ //http://stackoverflow.com/questions/5924238/how-do-you-animate-an-svg-path-in-ios
+ //http://dev.opera.com/articles/view/advanced-svg-animation-techniques/
+
+ //Animate length
+ var length = leg._path.getTotalLength();
+ leg._path.setAttribute("stroke-dasharray", length + "," + length);
+
+ var anim = document.createElementNS(xmlns, "animate");
+ anim.setAttribute("attributeName", "stroke-dashoffset");
+ anim.setAttribute("begin", "indefinite");
+ anim.setAttribute("from", length);
+ anim.setAttribute("to", 0);
+ anim.setAttribute("dur", 0.25);
+ leg._path.appendChild(anim);
+ anim.beginElement();
+
+ //Animate opacity
+ anim = document.createElementNS(xmlns, "animate");
+ anim.setAttribute("attributeName", "stroke-opacity");
+ anim.setAttribute("attributeName", "stroke-opacity");
+ anim.setAttribute("begin", "indefinite");
+ anim.setAttribute("from", 0);
+ anim.setAttribute("to", 0.5);
+ anim.setAttribute("dur", 0.25);
+ leg._path.appendChild(anim);
+ anim.beginElement();
+ }
+ me.setOpacity(0.3);
+
+ //Set the opacity of the spiderLegs back to their correct value
+ // The animations above override this until they complete.
+ // If the initial opacity of the spiderlegs isn't 0 then they appear before the animation starts.
+ if (L.Path.SVG) {
+ this._group._forceLayout();
+
+ for (i = childMarkers.length - 1; i >= 0; i--) {
+ m = childMarkers[i]._spiderLeg;
+
+ m.options.opacity = 0.5;
+ m._path.setAttribute('stroke-opacity', 0.5);
+ }
+ }
+
+ setTimeout(function () {
+ group._animationEnd();
+ group.fire('spiderfied');
+ }, 250);
+ },
+
+ _animationUnspiderfy: function (zoomDetails) {
+ var group = this._group,
+ map = group._map,
+ thisLayerPos = zoomDetails ? map._latLngToNewLayerPoint(this._latlng, zoomDetails.zoom, zoomDetails.center) : map.latLngToLayerPoint(this._latlng),
+ childMarkers = this.getAllChildMarkers(),
+ svg = L.Path.SVG,
+ m, i, a;
+
+ group._animationStart();
+
+ //Make us visible and bring the child markers back in
+ this.setOpacity(1);
+ for (i = childMarkers.length - 1; i >= 0; i--) {
+ m = childMarkers[i];
+
+ //Fix up the location to the real one
+ m.setLatLng(m._preSpiderfyLatlng);
+ delete m._preSpiderfyLatlng;
+ //Hack override the location to be our center
+ m._setPos(thisLayerPos);
+
+ m.setOpacity(0);
+
+ //Animate the spider legs back in
+ if (svg) {
+ a = m._spiderLeg._path.childNodes[0];
+ a.setAttribute('to', a.getAttribute('from'));
+ a.setAttribute('from', 0);
+ a.beginElement();
+
+ a = m._spiderLeg._path.childNodes[1];
+ a.setAttribute('from', 0.5);
+ a.setAttribute('to', 0);
+ a.setAttribute('stroke-opacity', 0);
+ a.beginElement();
+
+ m._spiderLeg._path.setAttribute('stroke-opacity', 0);
+ }
+ }
+
+ setTimeout(function () {
+ //If we have only <= one child left then that marker will be shown on the map so don't remove it!
+ var stillThereChildCount = 0;
+ for (i = childMarkers.length - 1; i >= 0; i--) {
+ m = childMarkers[i];
+ if (m._spiderLeg) {
+ stillThereChildCount++;
+ }
+ }
+
+
+ for (i = childMarkers.length - 1; i >= 0; i--) {
+ m = childMarkers[i];
+
+ if (!m._spiderLeg) { //Has already been unspiderfied
+ continue;
+ }
+
+
+ m.setOpacity(1);
+ m.setZIndexOffset(0);
+
+ if (stillThereChildCount > 1) {
+ L.FeatureGroup.prototype.removeLayer.call(group, m);
+ }
+
+ map.removeLayer(m._spiderLeg);
+ delete m._spiderLeg;
+ }
+ group._animationEnd();
+ }, 250);
+ }
+});
+
+
+L.MarkerClusterGroup.include({
+ //The MarkerCluster currently spiderfied (if any)
+ _spiderfied: null,
+
+ _spiderfierOnAdd: function () {
+ this._map.on('click', this._unspiderfyWrapper, this);
+
+ if (this._map.options.zoomAnimation) {
+ this._map.on('zoomstart', this._unspiderfyZoomStart, this);
+ } else {
+ //Browsers without zoomAnimation don't fire zoomstart
+ this._map.on('zoomend', this._unspiderfyWrapper, this);
+ }
+
+ if (L.Path.SVG && !L.Browser.touch) {
+ this._map._initPathRoot();
+ //Needs to happen in the pageload, not after, or animations don't work in webkit
+ // http://stackoverflow.com/questions/8455200/svg-animate-with-dynamically-added-elements
+ //Disable on touch browsers as the animation messes up on a touch zoom and isn't very noticable
+ }
+ },
+
+ _spiderfierOnRemove: function () {
+ this._map.off('click', this._unspiderfyWrapper, this);
+ this._map.off('zoomstart', this._unspiderfyZoomStart, this);
+ this._map.off('zoomanim', this._unspiderfyZoomAnim, this);
+
+ this._unspiderfy(); //Ensure that markers are back where they should be
+ },
+
+
+ //On zoom start we add a zoomanim handler so that we are guaranteed to be last (after markers are animated)
+ //This means we can define the animation they do rather than Markers doing an animation to their actual location
+ _unspiderfyZoomStart: function () {
+ if (!this._map) { //May have been removed from the map by a zoomEnd handler
+ return;
+ }
+
+ this._map.on('zoomanim', this._unspiderfyZoomAnim, this);
+ },
+ _unspiderfyZoomAnim: function (zoomDetails) {
+ //Wait until the first zoomanim after the user has finished touch-zooming before running the animation
+ if (L.DomUtil.hasClass(this._map._mapPane, 'leaflet-touching')) {
+ return;
+ }
+
+ this._map.off('zoomanim', this._unspiderfyZoomAnim, this);
+ this._unspiderfy(zoomDetails);
+ },
+
+
+ _unspiderfyWrapper: function () {
+ /// <summary>_unspiderfy but passes no arguments</summary>
+ this._unspiderfy();
+ },
+
+ _unspiderfy: function (zoomDetails) {
+ if (this._spiderfied) {
+ this._spiderfied.unspiderfy(zoomDetails);
+ }
+ },
+
+ //If the given layer is currently being spiderfied then we unspiderfy it so it isn't on the map anymore etc
+ _unspiderfyLayer: function (layer) {
+ if (layer._spiderLeg) {
+ L.FeatureGroup.prototype.removeLayer.call(this, layer);
+
+ layer.setOpacity(1);
+ //Position will be fixed up immediately in _animationUnspiderfy
+ layer.setZIndexOffset(0);
+
+ this._map.removeLayer(layer._spiderLeg);
+ delete layer._spiderLeg;
+ }
+ }
+});
\ No newline at end of file
diff --git a/src/MarkerCluster.js b/src/MarkerCluster.js
new file mode 100644
index 0000000..b83bf81
--- /dev/null
+++ b/src/MarkerCluster.js
@@ -0,0 +1,335 @@
+L.MarkerCluster = L.Marker.extend({
+ initialize: function (group, zoom, a, b) {
+
+ L.Marker.prototype.initialize.call(this, a ? (a._cLatLng || a.getLatLng()) : new L.LatLng(0, 0), { icon: this });
+
+
+ this._group = group;
+ this._zoom = zoom;
+
+ this._markers = [];
+ this._childClusters = [];
+ this._childCount = 0;
+ this._iconNeedsUpdate = true;
+
+ this._bounds = new L.LatLngBounds();
+
+ if (a) {
+ this._addChild(a);
+ }
+ if (b) {
+ this._addChild(b);
+ }
+ },
+
+ //Recursively retrieve all child markers of this cluster
+ getAllChildMarkers: function (storageArray) {
+ storageArray = storageArray || [];
+
+ for (var i = this._childClusters.length - 1; i >= 0; i--) {
+ this._childClusters[i].getAllChildMarkers(storageArray);
+ }
+
+ for (var j = this._markers.length - 1; j >= 0; j--) {
+ storageArray.push(this._markers[j]);
+ }
+
+ return storageArray;
+ },
+
+ //Returns the count of how many child markers we have
+ getChildCount: function () {
+ return this._childCount;
+ },
+
+ //Zoom to the extents of this cluster
+ zoomToBounds: function () {
+ this._group._map.fitBounds(this._bounds);
+ },
+
+
+ _updateIcon: function () {
+ this._iconNeedsUpdate = true;
+ if (this._icon) {
+ this.setIcon(this);
+ }
+ },
+
+ //Cludge for Icon, we pretend to be an icon for performance
+ createIcon: function () {
+ if (this._iconNeedsUpdate) {
+ this._iconObj = this._group.options.iconCreateFunction(this);
+ this._iconNeedsUpdate = false;
+ }
+ return this._iconObj.createIcon();
+ },
+ createShadow: function () {
+ return this._iconObj.createShadow();
+ },
+
+
+ _addChild: function (new1, isNotificationFromChild) {
+
+ this._iconNeedsUpdate = true;
+ this._expandBounds(new1);
+
+ if (new1 instanceof L.MarkerCluster) {
+ if (!isNotificationFromChild) {
+ this._childClusters.push(new1);
+ new1.__parent = this;
+ }
+ this._childCount += new1._childCount;
+ } else {
+ if (!isNotificationFromChild) {
+ this._markers.push(new1);
+ }
+ this._childCount++;
+ }
+
+ if (this.__parent) {
+ this.__parent._addChild(new1, true);
+ }
+ },
+
+ //Expand our bounds and tell our parent to
+ _expandBounds: function (marker) {
+ var addedCount,
+ addedLatLng = marker._wLatLng || marker._latlng;
+
+ if (marker instanceof L.MarkerCluster) {
+ this._bounds.extend(marker._bounds);
+ addedCount = marker._childCount;
+ } else {
+ this._bounds.extend(addedLatLng);
+ addedCount = 1;
+ }
+
+ if (!this._cLatLng) {
+ // when clustering, take position of the first point as the cluster center
+ this._cLatLng = marker._cLatLng || addedLatLng;
+ }
+
+ // when showing clusters, take weighted average of all points as cluster center
+ var totalCount = this._childCount + addedCount;
+
+ //Calculate weighted latlng for display
+ if (!this._wLatLng) {
+ this._latlng = this._wLatLng = new L.LatLng(addedLatLng.lat, addedLatLng.lng);
+ } else {
+ this._wLatLng.lat = (addedLatLng.lat * addedCount + this._wLatLng.lat * this._childCount) / totalCount;
+ this._wLatLng.lng = (addedLatLng.lng * addedCount + this._wLatLng.lng * this._childCount) / totalCount;
+ }
+ },
+
+ //Set our markers position as given and add it to the map
+ _addToMap: function (startPos) {
+ if (startPos) {
+ this._backupLatlng = this._latlng;
+ this.setLatLng(startPos);
+ }
+ L.FeatureGroup.prototype.addLayer.call(this._group, this);
+ },
+
+ _recursivelyAnimateChildrenIn: function (bounds, center, maxZoom) {
+ this._recursively(bounds, 0, maxZoom - 1,
+ function (c) {
+ var markers = c._markers,
+ i, m;
+ for (i = markers.length - 1; i >= 0; i--) {
+ m = markers[i];
+
+ //Only do it if the icon is still on the map
+ if (m._icon) {
+ m._setPos(center);
+ m.setOpacity(0);
+ }
+ }
+ },
+ function (c) {
+ var childClusters = c._childClusters,
+ j, cm;
+ for (j = childClusters.length - 1; j >= 0; j--) {
+ cm = childClusters[j];
+ if (cm._icon) {
+ cm._setPos(center);
+ cm.setOpacity(0);
+ }
+ }
+ }
+ );
+ },
+
+ _recursivelyAnimateChildrenInAndAddSelfToMap: function (bounds, previousZoomLevel, newZoomLevel) {
+ this._recursively(bounds, newZoomLevel, 0,
+ function (c) {
+ c._recursivelyAnimateChildrenIn(bounds, c._group._map.latLngToLayerPoint(c.getLatLng()).round(), previousZoomLevel);
+
+ //TODO: depthToAnimateIn affects _isSingleParent, if there is a multizoom we may/may not be.
+ //As a hack we only do a animation free zoom on a single level zoom, if someone does multiple levels then we always animate
+ if (c._isSingleParent() && previousZoomLevel - 1 === newZoomLevel) {
+ c.setOpacity(1);
+ c._recursivelyRemoveChildrenFromMap(bounds, previousZoomLevel); //Immediately remove our children as we are replacing them. TODO previousBounds not bounds
+ } else {
+ c.setOpacity(0);
+ }
+
+ c._addToMap();
+ }
+ );
+ },
+
+ _recursivelyBecomeVisible: function (bounds, zoomLevel) {
+ this._recursively(bounds, 0, zoomLevel, null, function (c) {
+ c.setOpacity(1);
+ });
+ },
+
+ _recursivelyAddChildrenToMap: function (startPos, zoomLevel, bounds) {
+ this._recursively(bounds, -1, zoomLevel,
+ function (c) {
+ if (zoomLevel === c._zoom) {
+ return;
+ }
+
+ //Add our child markers at startPos (so they can be animated out)
+ for (var i = c._markers.length - 1; i >= 0; i--) {
+ var nm = c._markers[i];
+
+ if (!bounds.contains(nm._latlng)) {
+ continue;
+ }
+
+ if (startPos) {
+ nm._backupLatlng = nm.getLatLng();
+
+ nm.setLatLng(startPos);
+ nm.setOpacity(0);
+ }
+
+ L.FeatureGroup.prototype.addLayer.call(c._group, nm);
+ }
+ },
+ function (c) {
+ c._addToMap(startPos);
+ }
+ );
+ },
+
+ _recursivelyRestoreChildPositions: function (zoomLevel) {
+ //Fix positions of child markers
+ for (var i = this._markers.length - 1; i >= 0; i--) {
+ var nm = this._markers[i];
+ if (nm._backupLatlng) {
+ nm.setLatLng(nm._backupLatlng);
+ delete nm._backupLatlng;
+ }
+ }
+
+ if (zoomLevel - 1 === this._zoom) {
+ //Reposition child clusters
+ for (var j = this._childClusters.length - 1; j >= 0; j--) {
+ this._childClusters[j]._restorePosition();
+ }
+ } else {
+ for (var k = this._childClusters.length - 1; k >= 0; k--) {
+ this._childClusters[k]._recursivelyRestoreChildPositions(zoomLevel);
+ }
+ }
+ },
+
+ _restorePosition: function () {
+ if (this._backupLatlng) {
+ this.setLatLng(this._backupLatlng);
+ delete this._backupLatlng;
+ }
+ },
+
+ //exceptBounds: If set, don't remove any markers/clusters in it
+ _recursivelyRemoveChildrenFromMap: function (previousBounds, zoomLevel, exceptBounds) {
+ var m, i;
+ this._recursively(previousBounds, -1, zoomLevel - 1,
+ function (c) {
+ //Remove markers at every level
+ for (i = c._markers.length - 1; i >= 0; i--) {
+ m = c._markers[i];
+ if (!exceptBounds || !exceptBounds.contains(m._latlng)) {
+ L.FeatureGroup.prototype.removeLayer.call(c._group, m);
+ m.setOpacity(1);
+ }
+ }
+ },
+ function (c) {
+ //Remove child clusters at just the bottom level
+ for (i = c._childClusters.length - 1; i >= 0; i--) {
+ m = c._childClusters[i];
+ if (!exceptBounds || !exceptBounds.contains(m._latlng)) {
+ L.FeatureGroup.prototype.removeLayer.call(c._group, m);
+ m.setOpacity(1);
+ }
+ }
+ }
+ );
+ },
+
+ //Run the given functions recursively to this and child clusters
+ // boundsToApplyTo: a L.LatLngBounds representing the bounds of what clusters to recurse in to
+ // zoomLevelToStart: zoom level to start running functions (inclusive)
+ // zoomLevelToStop: zoom level to stop running functions (inclusive)
+ // runAtEveryLevel: function that takes an L.MarkerCluster as an argument that should be applied on every level
+ // runAtBottomLevel: function that takes an L.MarkerCluster as an argument that should be applied at only the bottom level
+ _recursively: function (boundsToApplyTo, zoomLevelToStart, zoomLevelToStop, runAtEveryLevel, runAtBottomLevel) {
+ var childClusters = this._childClusters,
+ zoom = this._zoom,
+ i, c;
+
+ if (zoomLevelToStart > zoom) { //Still going down to required depth, just recurse to child clusters
+ for (i = childClusters.length - 1; i >= 0; i--) {
+ c = childClusters[i];
+ if (boundsToApplyTo.intersects(c._bounds)) {
+ c._recursively(boundsToApplyTo, zoomLevelToStart, zoomLevelToStop, runAtEveryLevel, runAtBottomLevel);
+ }
+ }
+ } else { //In required depth
+
+ if (runAtEveryLevel) {
+ runAtEveryLevel(this);
+ }
+ if (runAtBottomLevel && this._zoom === zoomLevelToStop) {
+ runAtBottomLevel(this);
+ }
+
+ //TODO: This loop is almost the same as above
+ if (zoomLevelToStop > zoom) {
+ for (i = childClusters.length - 1; i >= 0; i--) {
+ c = childClusters[i];
+ if (boundsToApplyTo.intersects(c._bounds)) {
+ c._recursively(boundsToApplyTo, zoomLevelToStart, zoomLevelToStop, runAtEveryLevel, runAtBottomLevel);
+ }
+ }
+ }
+ }
+ },
+
+ _recalculateBounds: function () {
+ var markers = this._markers,
+ childClusters = this._childClusters,
+ i;
+
+ this._bounds = new L.LatLngBounds();
+ delete this._wLatLng;
+
+ for (i = markers.length - 1; i >= 0; i--) {
+ this._expandBounds(markers[i]);
+ }
+ for (i = childClusters.length - 1; i >= 0; i--) {
+ this._expandBounds(childClusters[i]);
+ }
+ },
+
+
+ //Returns true if we are the parent of only one cluster and that cluster is the same as us
+ _isSingleParent: function () {
+ //Don't need to check this._markers as the rest won't work if there are any
+ return this._childClusters.length > 0 && this._childClusters[0]._childCount === this._childCount;
+ }
+});
diff --git a/src/MarkerClusterGroup.js b/src/MarkerClusterGroup.js
new file mode 100644
index 0000000..ac80665
--- /dev/null
+++ b/src/MarkerClusterGroup.js
@@ -0,0 +1,791 @@
+
+/*
+ * L.MarkerClusterGroup extends L.FeatureGroup by clustering the markers contained within
+ */
+
+L.MarkerClusterGroup = L.FeatureGroup.extend({
+
+ options: {
+ maxClusterRadius: 80, //A cluster will cover at most this many pixels from its center
+ iconCreateFunction: null,
+
+ spiderfyOnMaxZoom: true,
+ showCoverageOnHover: true,
+ zoomToBoundsOnClick: true,
+ singleMarkerMode: false,
+
+ disableClusteringAtZoom: null,
+
+ //Whether to animate adding markers after adding the MarkerClusterGroup to the map
+ // If you are adding individual markers set to true, if adding bulk markers leave false for massive performance gains.
+ animateAddingMarkers: false,
+
+ //Options to pass to the L.Polygon constructor
+ polygonOptions: {}
+ },
+
+ initialize: function (options) {
+ L.Util.setOptions(this, options);
+ if (!this.options.iconCreateFunction) {
+ this.options.iconCreateFunction = this._defaultIconCreateFunction;
+ }
+
+ L.FeatureGroup.prototype.initialize.call(this, []);
+
+ this._inZoomAnimation = 0;
+ this._needsClustering = [];
+ //The bounds of the currently shown area (from _getExpandedVisibleBounds) Updated on zoom/move
+ this._currentShownBounds = null;
+ },
+
+ addLayer: function (layer) {
+
+ if (layer instanceof L.LayerGroup) {
+ var array = [];
+ for (var i in layer._layers) {
+ if (layer._layers.hasOwnProperty(i)) {
+ array.push(layer._layers[i]);
+ }
+ }
+ return this.addLayers(array);
+ }
+
+ if (this.options.singleMarkerMode) {
+ layer.options.icon = this.options.iconCreateFunction({
+ getChildCount: function () {
+ return 1;
+ },
+ getAllChildMarkers: function () {
+ return [layer];
+ }
+ });
+ }
+
+ if (!this._map) {
+ this._needsClustering.push(layer);
+ return this;
+ }
+
+ if (this.hasLayer(layer)) {
+ return this;
+ }
+
+ //If we have already clustered we'll need to add this one to a cluster
+
+ if (this._unspiderfy) {
+ this._unspiderfy();
+ }
+
+ this._addLayer(layer, this._maxZoom);
+
+ //Work out what is visible
+ var visibleLayer = layer,
+ currentZoom = this._map.getZoom();
+ if (layer.__parent) {
+ while (visibleLayer.__parent._zoom >= currentZoom) {
+ visibleLayer = visibleLayer.__parent;
+ }
+ }
+
+ if (this._currentShownBounds.contains(visibleLayer.getLatLng())) {
+ if (this.options.animateAddingMarkers) {
+ this._animationAddLayer(layer, visibleLayer);
+ } else {
+ this._animationAddLayerNonAnimated(layer, visibleLayer);
+ }
+ }
+ return this;
+ },
+
+ removeLayer: function (layer) {
+
+ if (!this._map) {
+ this._arraySplice(this._needsClustering, layer);
+ return this;
+ }
+
+ if (!layer.__parent) {
+ return this;
+ }
+
+ if (this._unspiderfy) {
+ this._unspiderfy();
+ this._unspiderfyLayer(layer);
+ }
+
+ //Remove the marker from clusters
+ this._removeLayer(layer, true);
+
+ if (layer._icon) {
+ L.FeatureGroup.prototype.removeLayer.call(this, layer);
+ layer.setOpacity(1);
+ }
+ return this;
+ },
+
+ //Takes an array of markers and adds them in bulk
+ addLayers: function (layersArray) {
+ if (!this._map) {
+ this._needsClustering = this._needsClustering.concat(layersArray);
+ return this;
+ }
+
+ for (var i = 0, l = layersArray.length; i < l; i++) {
+ var m = layersArray[i];
+ this._addLayer(m, this._maxZoom);
+
+ //If we just made a cluster of size 2 then we need to remove the other marker from the map (if it is) or we never will
+ if (m.__parent) {
+ if (m.__parent.getChildCount() === 2) {
+ var markers = m.__parent.getAllChildMarkers(),
+ otherMarker = markers[0] === m ? markers[1] : markers[0];
+ L.FeatureGroup.prototype.removeLayer.call(this, otherMarker);
+ }
+ }
+ }
+ this._topClusterLevel._recursivelyAddChildrenToMap(null, this._zoom, this._currentShownBounds);
+
+ return this;
+ },
+
+ //Takes an array of markers and removes them in bulk
+ removeLayers: function (layersArray) {
+ var i, l, m;
+
+ if (!this._map) {
+ for (i = 0, l = layersArray.length; i < l; i++) {
+ this._arraySplice(this._needsClustering, layersArray[i]);
+ }
+ return this;
+ }
+
+ for (i = 0, l = layersArray.length; i < l; i++) {
+ m = layersArray[i];
+ this._removeLayer(m, true, true);
+
+ if (m._icon) {
+ L.FeatureGroup.prototype.removeLayer.call(this, m);
+ m.setOpacity(1);
+ }
+ }
+
+ //Fix up the clusters and markers on the map
+ this._topClusterLevel._recursivelyAddChildrenToMap(null, this._zoom, this._currentShownBounds);
+
+ for (i in this._layers) {
+ if (this._layers.hasOwnProperty(i)) {
+ m = this._layers[i];
+ if (m instanceof L.MarkerCluster) {
+ m._updateIcon();
+ }
+ }
+ }
+
+ return this;
+ },
+
+ //Removes all layers from the MarkerClusterGroup
+ clearLayers: function () {
+ //Need our own special implementation as the LayerGroup one doesn't work for us
+
+ //If we aren't on the map yet, just blow away the markers we know of
+ if (!this._map) {
+ this._needsClustering = [];
+ return this;
+ }
+
+ if (this._unspiderfy) {
+ this._unspiderfy();
+ }
+
+ //Remove all the visible layers
+ for (var i in this._layers) {
+ if (this._layers.hasOwnProperty(i)) {
+ L.FeatureGroup.prototype.removeLayer.call(this, this._layers[i]);
+ }
+ }
+
+ //Reset _topClusterLevel and the DistanceGrids
+ this._generateInitialClusters();
+
+ return this;
+ },
+
+ //Returns true if the given layer is in this MarkerClusterGroup
+ hasLayer: function (layer) {
+ if (this._needsClustering.length > 0) {
+ var anArray = this._needsClustering;
+ for (var i = anArray.length - 1; i >= 0; i--) {
+ if (anArray[i] === layer) {
+ return true;
+ }
+ }
+ }
+
+ return !!(layer.__parent && layer.__parent._group === this);
+ },
+
+ //Zoom down to show the given layer (spiderfying if necessary) then calls the callback
+ zoomToShowLayer: function (layer, callback) {
+
+ var showMarker = function () {
+ if ((layer._icon || layer.__parent._icon) && !this._inZoomAnimation) {
+ this._map.off('moveend', showMarker, this);
+ this.off('animationend', showMarker, this);
+
+ if (layer._icon) {
+ callback();
+ } else if (layer.__parent._icon) {
+ var afterSpiderfy = function () {
+ this.off('spiderfied', afterSpiderfy, this);
+ callback();
+ };
+
+ this.on('spiderfied', afterSpiderfy, this);
+ layer.__parent.spiderfy();
+ }
+ }
+ };
+
+ if (layer._icon) {
+ callback();
+ } else if (layer.__parent._zoom < this._map.getZoom()) {
+ //Layer should be visible now but isn't on screen, just pan over to it
+ this._map.on('moveend', showMarker, this);
+ if (!layer._icon) {
+ this._map.panTo(layer.getLatLng());
+ }
+ } else {
+ this._map.on('moveend', showMarker, this);
+ this.on('animationend', showMarker, this);
+ this._map.setView(layer.getLatLng(), layer.__parent._zoom + 1);
+ layer.__parent.zoomToBounds();
+ }
+ },
+
+ //Overrides FeatureGroup.onAdd
+ onAdd: function (map) {
+ L.FeatureGroup.prototype.onAdd.call(this, map);
+
+ if (!this._gridClusters) {
+ this._generateInitialClusters();
+ }
+
+ for (var i = 0, l = this._needsClustering.length; i < l; i++) {
+ this._addLayer(this._needsClustering[i], this._maxZoom);
+ }
+ this._needsClustering = [];
+
+ this._map.on('zoomend', this._zoomEnd, this);
+ this._map.on('moveend', this._moveEnd, this);
+
+ if (this._spiderfierOnAdd) { //TODO FIXME: Not sure how to have spiderfier add something on here nicely
+ this._spiderfierOnAdd();
+ }
+
+ this._bindEvents();
+
+
+ //Actually add our markers to the map:
+
+ //Remember the current zoom level and bounds
+ this._zoom = this._map.getZoom();
+ this._currentShownBounds = this._getExpandedVisibleBounds();
+
+ //Make things appear on the map
+ this._topClusterLevel._recursivelyAddChildrenToMap(null, this._zoom, this._currentShownBounds);
+ },
+
+ //Overrides FeatureGroup.onRemove
+ onRemove: function (map) {
+ this._map.off('zoomend', this._zoomEnd, this);
+ this._map.off('moveend', this._moveEnd, this);
+
+ //In case we are in a cluster animation
+ this._map._mapPane.className = this._map._mapPane.className.replace(' leaflet-cluster-anim', '');
+
+ if (this._spiderfierOnRemove) { //TODO FIXME: Not sure how to have spiderfier add something on here nicely
+ this._spiderfierOnRemove();
+ }
+
+ L.FeatureGroup.prototype.onRemove.call(this, map);
+ },
+
+
+ //Remove the given object from the given array
+ _arraySplice: function (anArray, obj) {
+ for (var i = anArray.length - 1; i >= 0; i--) {
+ if (anArray[i] === obj) {
+ anArray.splice(i, 1);
+ return;
+ }
+ }
+ },
+
+ //Internal function for removing a marker from everything.
+ //dontUpdateMap: set to true if you will handle updating the map manually (for bulk functions)
+ _removeLayer: function (marker, removeFromDistanceGrid, dontUpdateMap) {
+ var gridClusters = this._gridClusters,
+ gridUnclustered = this._gridUnclustered,
+ map = this._map;
+
+ //Remove the marker from distance clusters it might be in
+ if (removeFromDistanceGrid) {
+ for (var z = this._maxZoom; z >= 0; z--) {
+ if (!gridUnclustered[z].removeObject(marker, map.project(marker.getLatLng(), z))) {
+ break;
+ }
+ }
+ }
+
+ //Work our way up the clusters removing them as we go if required
+ var cluster = marker.__parent,
+ markers = cluster._markers,
+ otherMarker;
+
+ //Remove the marker from the immediate parents marker list
+ this._arraySplice(markers, marker);
+
+ while (cluster) {
+ cluster._childCount--;
+
+ if (cluster._zoom < 0) {
+ //Top level, do nothing
+ break;
+ } else if (removeFromDistanceGrid && cluster._childCount <= 1) { //Cluster no longer required
+ //We need to push the other marker up to the parent
+ otherMarker = cluster._markers[0] === marker ? cluster._markers[1] : cluster._markers[0];
+
+ //Update distance grid
+ gridClusters[cluster._zoom].removeObject(cluster, map.project(cluster._cLatLng, cluster._zoom));
+ gridUnclustered[cluster._zoom].addObject(otherMarker, map.project(otherMarker.getLatLng(), cluster._zoom));
+
+ //Move otherMarker up to parent
+ this._arraySplice(cluster.__parent._childClusters, cluster);
+ cluster.__parent._markers.push(otherMarker);
+ otherMarker.__parent = cluster.__parent;
+
+ if (cluster._icon) {
+ //Cluster is currently on the map, need to put the marker on the map instead
+ L.FeatureGroup.prototype.removeLayer.call(this, cluster);
+ if (!dontUpdateMap) {
+ L.FeatureGroup.prototype.addLayer.call(this, otherMarker);
+ }
+ }
+ } else {
+ cluster._recalculateBounds();
+ if (!dontUpdateMap || !cluster._icon) {
+ cluster._updateIcon();
+ }
+ }
+
+ cluster = cluster.__parent;
+ }
+ },
+
+ //Overrides FeatureGroup._propagateEvent
+ _propagateEvent: function (e) {
+ if (e.target instanceof L.MarkerCluster) {
+ e.type = 'cluster' + e.type;
+ }
+ L.FeatureGroup.prototype._propagateEvent.call(this, e);
+ },
+
+ //Default functionality
+ _defaultIconCreateFunction: function (cluster) {
+ var childCount = cluster.getChildCount();
+
+ var c = ' marker-cluster-';
+ if (childCount < 10) {
+ c += 'small';
+ } else if (childCount < 100) {
+ c += 'medium';
+ } else {
+ c += 'large';
+ }
+
+ return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
+ },
+
+ _bindEvents: function () {
+ var shownPolygon = null,
+ map = this._map,
+
+ spiderfyOnMaxZoom = this.options.spiderfyOnMaxZoom,
+ showCoverageOnHover = this.options.showCoverageOnHover,
+ zoomToBoundsOnClick = this.options.zoomToBoundsOnClick;
+
+ //Zoom on cluster click or spiderfy if we are at the lowest level
+ if (spiderfyOnMaxZoom || zoomToBoundsOnClick) {
+ this.on('clusterclick', function (a) {
+ if (map.getMaxZoom() === map.getZoom()) {
+ if (spiderfyOnMaxZoom) {
+ a.layer.spiderfy();
+ }
+ } else if (zoomToBoundsOnClick) {
+ a.layer.zoomToBounds();
+ }
+ }, this);
+ }
+
+ //Show convex hull (boundary) polygon on mouse over
+ if (showCoverageOnHover) {
+ this.on('clustermouseover', function (a) {
+ if (this._inZoomAnimation) {
+ return;
+ }
+ if (shownPolygon) {
+ map.removeLayer(shownPolygon);
+ }
+ if (a.layer.getChildCount() > 2) {
+ shownPolygon = new L.Polygon(a.layer.getConvexHull(), this.options.polygonOptions);
+ map.addLayer(shownPolygon);
+ }
+ }, this);
+ this.on('clustermouseout', function () {
+ if (shownPolygon) {
+ map.removeLayer(shownPolygon);
+ shownPolygon = null;
+ }
+ }, this);
+ map.on('zoomend', function () {
+ if (shownPolygon) {
+ map.removeLayer(shownPolygon);
+ shownPolygon = null;
+ }
+ }, this);
+ map.on('layerremove', function (opt) {
+ if (shownPolygon && opt.layer === this) {
+ map.removeLayer(shownPolygon);
+ shownPolygon = null;
+ }
+ }, this);
+ }
+ },
+
+ _zoomEnd: function () {
+ if (!this._map) { //May have been removed from the map by a zoomEnd handler
+ return;
+ }
+ this._mergeSplitClusters();
+
+ this._zoom = this._map._zoom;
+ this._currentShownBounds = this._getExpandedVisibleBounds();
+ },
+
+ _moveEnd: function () {
+ if (this._inZoomAnimation) {
+ return;
+ }
+
+ var newBounds = this._getExpandedVisibleBounds();
+
+ this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, this._zoom, newBounds);
+ this._topClusterLevel._recursivelyAddChildrenToMap(null, this._zoom, newBounds);
+
+ this._currentShownBounds = newBounds;
+ return;
+ },
+
+ _generateInitialClusters: function () {
+ var maxZoom = this._map.getMaxZoom(),
+ radius = this.options.maxClusterRadius;
+
+ if (this.options.disableClusteringAtZoom) {
+ maxZoom = this.options.disableClusteringAtZoom - 1;
+ }
+ this._maxZoom = maxZoom;
+ this._gridClusters = {};
+ this._gridUnclustered = {};
+
+ //Set up DistanceGrids for each zoom
+ for (var zoom = maxZoom; zoom >= 0; zoom--) {
+ this._gridClusters[zoom] = new L.DistanceGrid(radius);
+ this._gridUnclustered[zoom] = new L.DistanceGrid(radius);
+ }
+
+ this._topClusterLevel = new L.MarkerCluster(this, -1);
+ },
+
+ //Zoom: Zoom to start adding at (Pass this._maxZoom to start at the bottom)
+ _addLayer: function (layer, zoom) {
+ var gridClusters = this._gridClusters,
+ gridUnclustered = this._gridUnclustered,
+ markerPoint, z;
+
+ //Find the lowest zoom level to slot this one in
+ for (; zoom >= 0; zoom--) {
+ markerPoint = this._map.project(layer.getLatLng(), zoom); // calculate pixel position
+
+ //Try find a cluster close by
+ var closest = gridClusters[zoom].getNearObject(markerPoint);
+ if (closest) {
+ closest._addChild(layer);
+ layer.__parent = closest;
+ return;
+ }
+
+ //Try find a marker close by to form a new cluster with
+ closest = gridUnclustered[zoom].getNearObject(markerPoint);
+ if (closest) {
+ if (closest.__parent) {
+ this._removeLayer(closest, false);
+ }
+ var parent = closest.__parent;
+
+ //Create new cluster with these 2 in it
+
+ var newCluster = new L.MarkerCluster(this, zoom, closest, layer);
+ gridClusters[zoom].addObject(newCluster, this._map.project(newCluster._cLatLng, zoom));
+ closest.__parent = newCluster;
+ layer.__parent = newCluster;
+
+ //First create any new intermediate parent clusters that don't exist
+ var lastParent = newCluster;
+ for (z = zoom - 1; z > parent._zoom; z--) {
+ lastParent = new L.MarkerCluster(this, z, lastParent);
+ gridClusters[z].addObject(lastParent, this._map.project(closest.getLatLng(), z));
+ }
+ parent._addChild(lastParent);
+
+ //Remove closest from this zoom level and any above that it is in, replace with newCluster
+ for (z = zoom; z >= 0; z--) {
+ if (!gridUnclustered[z].removeObject(closest, this._map.project(closest.getLatLng(), z))) {
+ break;
+ }
+ }
+
+ return;
+ }
+
+ //Didn't manage to cluster in at this zoom, record us as a marker here and continue upwards
+ gridUnclustered[zoom].addObject(layer, markerPoint);
+ }
+
+ //Didn't get in anything, add us to the top
+ this._topClusterLevel._addChild(layer);
+ layer.__parent = this._topClusterLevel;
+ return;
+ },
+
+ //Merge and split any existing clusters that are too big or small
+ _mergeSplitClusters: function () {
+ if (this._zoom < this._map._zoom) { //Zoom in, split
+ this._animationStart();
+ //Remove clusters now off screen
+ this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, this._zoom, this._getExpandedVisibleBounds());
+
+ this._animationZoomIn(this._zoom, this._map._zoom);
+
+ } else if (this._zoom > this._map._zoom) { //Zoom out, merge
+ this._animationStart();
+
+ this._animationZoomOut(this._zoom, this._map._zoom);
+ } else {
+ this._moveEnd();
+ }
+ },
+
+ //Gets the maps visible bounds expanded in each direction by the size of the screen (so the user cannot see an area we do not cover in one pan)
+ _getExpandedVisibleBounds: function () {
+ var map = this._map,
+ bounds = map.getPixelBounds(),
+ width = L.Browser.mobile ? 0 : Math.abs(bounds.max.x - bounds.min.x),
+ height = L.Browser.mobile ? 0 : Math.abs(bounds.max.y - bounds.min.y),
+ sw = map.unproject(new L.Point(bounds.min.x - width, bounds.min.y - height)),
+ ne = map.unproject(new L.Point(bounds.max.x + width, bounds.max.y + height));
+
+ return new L.LatLngBounds(sw, ne);
+ },
+
+ //Shared animation code
+ _animationAddLayerNonAnimated: function (layer, newCluster) {
+ if (newCluster === layer) {
+ L.FeatureGroup.prototype.addLayer.call(this, layer);
+ } else if (newCluster._childCount === 2) {
+ newCluster._addToMap();
+
+ var markers = newCluster.getAllChildMarkers();
+ L.FeatureGroup.prototype.removeLayer.call(this, markers[0]);
+ L.FeatureGroup.prototype.removeLayer.call(this, markers[1]);
+ } else {
+ newCluster._updateIcon();
+ }
+ }
+});
+
+L.MarkerClusterGroup.include(!L.DomUtil.TRANSITION ? {
+
+ //Non Animated versions of everything
+ _animationStart: function () {
+ //Do nothing...
+ },
+ _animationZoomIn: function (previousZoomLevel, newZoomLevel) {
+ this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, previousZoomLevel);
+ this._topClusterLevel._recursivelyAddChildrenToMap(null, newZoomLevel, this._getExpandedVisibleBounds());
+ },
+ _animationZoomOut: function (previousZoomLevel, newZoomLevel) {
+ this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, previousZoomLevel);
+ this._topClusterLevel._recursivelyAddChildrenToMap(null, newZoomLevel, this._getExpandedVisibleBounds());
+ },
+ _animationAddLayer: function (layer, newCluster) {
+ this._animationAddLayerNonAnimated(layer, newCluster);
+ }
+} : {
+
+ //Animated versions here
+ _animationStart: function () {
+ this._map._mapPane.className += ' leaflet-cluster-anim';
+ this._inZoomAnimation++;
+ },
+ _animationEnd: function () {
+ if (this._map) {
+ this._map._mapPane.className = this._map._mapPane.className.replace(' leaflet-cluster-anim', '');
+ }
+ this._inZoomAnimation--;
+ this.fire('animationend');
+ },
+ _animationZoomIn: function (previousZoomLevel, newZoomLevel) {
+ var me = this,
+ bounds = this._getExpandedVisibleBounds(),
+ i;
+
+ //Add all children of current clusters to map and remove those clusters from map
+ this._topClusterLevel._recursively(bounds, previousZoomLevel, 0, function (c) {
+ var startPos = c._latlng,
+ markers = c._markers,
+ m;
+
+ if (c._isSingleParent() && previousZoomLevel + 1 === newZoomLevel) { //Immediately add the new child and remove us
+ L.FeatureGroup.prototype.removeLayer.call(me, c);
+ c._recursivelyAddChildrenToMap(null, newZoomLevel, bounds);
+ } else {
+ //Fade out old cluster
+ c.setOpacity(0);
+ c._recursivelyAddChildrenToMap(startPos, newZoomLevel, bounds);
+ }
+
+ //Remove all markers that aren't visible any more
+ //TODO: Do we actually need to do this on the higher levels too?
+ for (i = markers.length - 1; i >= 0; i--) {
+ m = markers[i];
+ if (!bounds.contains(m._latlng)) {
+ L.FeatureGroup.prototype.removeLayer.call(me, m);
+ }
+ }
+
+ });
+
+ this._forceLayout();
+ var j, n;
+
+ //Update opacities
+ me._topClusterLevel._recursivelyBecomeVisible(bounds, newZoomLevel);
+ //TODO Maybe? Update markers in _recursivelyBecomeVisible
+ for (j in me._layers) {
+ if (me._layers.hasOwnProperty(j)) {
+ n = me._layers[j];
+
+ if (!(n instanceof L.MarkerCluster) && n._icon) {
+ n.setOpacity(1);
+ }
+ }
+ }
+
+ //update the positions of the just added clusters/markers
+ me._topClusterLevel._recursively(bounds, previousZoomLevel, newZoomLevel, function (c) {
+ c._recursivelyRestoreChildPositions(newZoomLevel);
+ });
+
+ //Remove the old clusters and close the zoom animation
+
+ setTimeout(function () {
+ //update the positions of the just added clusters/markers
+ me._topClusterLevel._recursively(bounds, previousZoomLevel, 0, function (c) {
+ L.FeatureGroup.prototype.removeLayer.call(me, c);
+ c.setOpacity(1);
+ });
+
+ me._animationEnd();
+ }, 250);
+ },
+
+ _animationZoomOut: function (previousZoomLevel, newZoomLevel) {
+ this._animationZoomOutSingle(this._topClusterLevel, previousZoomLevel - 1, newZoomLevel);
+
+ //Need to add markers for those that weren't on the map before but are now
+ this._topClusterLevel._recursivelyAddChildrenToMap(null, newZoomLevel, this._getExpandedVisibleBounds());
+ //Remove markers that were on the map before but won't be now
+ this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, previousZoomLevel, this._getExpandedVisibleBounds());
+ },
+ _animationZoomOutSingle: function (cluster, previousZoomLevel, newZoomLevel) {
+ var bounds = this._getExpandedVisibleBounds();
+
+ //Animate all of the markers in the clusters to move to their cluster center point
+ cluster._recursivelyAnimateChildrenInAndAddSelfToMap(bounds, previousZoomLevel + 1, newZoomLevel);
+
+ var me = this;
+
+ //Update the opacity (If we immediately set it they won't animate)
+ this._forceLayout();
+ cluster._recursivelyBecomeVisible(bounds, newZoomLevel);
+
+ //TODO: Maybe use the transition timing stuff to make this more reliable
+ //When the animations are done, tidy up
+ setTimeout(function () {
+
+ //This cluster stopped being a cluster before the timeout fired
+ if (cluster._childCount === 1) {
+ var m = cluster._markers[0];
+ //If we were in a cluster animation at the time then the opacity and position of our child could be wrong now, so fix it
+ m.setLatLng(m.getLatLng());
+ m.setOpacity(1);
+
+ return;
+ }
+
+ cluster._recursively(bounds, newZoomLevel, 0, function (c) {
+ c._recursivelyRemoveChildrenFromMap(bounds, previousZoomLevel + 1);
+ });
+ me._animationEnd();
+ }, 250);
+ },
+ _animationAddLayer: function (layer, newCluster) {
+ var me = this;
+
+ L.FeatureGroup.prototype.addLayer.call(this, layer);
+ if (newCluster !== layer) {
+ if (newCluster._childCount > 2) { //Was already a cluster
+
+ newCluster._updateIcon();
+ this._forceLayout();
+ this._animationStart();
+
+ layer._setPos(this._map.latLngToLayerPoint(newCluster.getLatLng()));
+ layer.setOpacity(0);
+
+ setTimeout(function () {
+ L.FeatureGroup.prototype.removeLayer.call(me, layer);
+ layer.setOpacity(1);
+
+ me._animationEnd();
+ }, 250);
+
+ } else { //Just became a cluster
+ this._forceLayout();
+
+ me._animationStart();
+ me._animationZoomOutSingle(newCluster, this._map.getMaxZoom(), this._map.getZoom());
+ }
+ }
+ },
+
+ //Force a browser layout of stuff in the map
+ // Should apply the current opacity and location to all elements so we can update them again for an animation
+ _forceLayout: function () {
+ //In my testing this works, infact offsetWidth of any element seems to work.
+ //Could loop all this._layers and do this for each _icon if it stops working
+
+ L.Util.falseFn(document.body.offsetWidth);
+ }
+});
--
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