[Pkg-javascript-commits] [leaflet-markercluster] 76/479: Starting on spidifier based on https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet (Thanks jawj!)
Jonas Smedegaard
dr at jones.dk
Thu Oct 16 16:00:12 UTC 2014
This is an automated email from the git hooks/post-receive script.
js pushed a commit to branch master
in repository leaflet-markercluster.
commit 45d9f8f841b94319bab0a88d29ad7f7e96370c4c
Author: danzel <danzel at localhost.geek.nz>
Date: Mon Jul 23 15:44:26 2012 +1200
Starting on spidifier based on https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet (Thanks jawj!)
---
example/marker-clustering-spiderfier.html | 68 ++++++++++++++++++++++++
src/MarkerCluster.Spiderfier.js | 88 +++++++++++++++++++++++++++++++
2 files changed, 156 insertions(+)
diff --git a/example/marker-clustering-spiderfier.html b/example/marker-clustering-spiderfier.html
new file mode 100644
index 0000000..592e1b5
--- /dev/null
+++ b/example/marker-clustering-spiderfier.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="../lib/leaflet-dist/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="../lib/leaflet-dist/leaflet.ie.css" /><![endif]-->
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="screen.css" />
+ <script src="../lib/leaflet-dist/leaflet-src.js"></script>
+
+
+ <link rel="stylesheet" href="../src/MarkerCluster.css" />
+ <link rel="stylesheet" href="../src/MarkerCluster.Default.css" />
+ <script src="../src/MarkerClusterGroup.js"></script>
+ <script src="../src/MarkerCluster.js"></script>
+ <script src="../src/MarkerCluster.Spiderfier.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();
+
+ 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('click', function (a) {
+ if (a.layer instanceof L.MarkerCluster) {
+ console.log('cluster ' + a.layer.getAllChildMarkers().length);
+ a.layer.spiderfy();
+ } else {
+ console.log('marker ' + a.layer);
+ }
+ });
+
+ populate();
+ map.addLayer(markers);
+ </script>
+</body>
+</html>
diff --git a/src/MarkerCluster.Spiderfier.js b/src/MarkerCluster.Spiderfier.js
new file mode 100644
index 0000000..983db00
--- /dev/null
+++ b/src/MarkerCluster.Spiderfier.js
@@ -0,0 +1,88 @@
+//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 () {
+ var childMarkers = this.getAllChildMarkers(),
+ group = this._group,
+ map = group._map,
+ center = map.latLngToLayerPoint(this._latlng),
+ markerOffsets,
+ i, m;
+ //TODO Maybe: childMarkers order by distance to center
+
+ if (childMarkers.length >= this._circleSpiralSwitchover) {
+ markerOffsets = this._generatePointsSpiral(childMarkers.length, center);
+ } else {
+ center.y += 10; //Otherwise circles look wrong
+ markerOffsets = this._generatePointsCircle(childMarkers.length, center);
+ }
+
+ for (i = childMarkers.length - 1; i >= 0; i--) {
+ m = childMarkers[i];
+
+ m._backupPosSpider = m._latlng;
+ m.setLatLng(map.layerPointToLatLng(markerOffsets[i]));
+
+ m.setZIndexOffset(1000000); //Make these appear on top of EVERYTHING
+ L.FeatureGroup.prototype.addLayer.call(group, m);
+
+ var leg = new L.Polyline([this._latlng, m._latlng], { weight: 1.5, color: '#222' });
+ map.addLayer(leg);
+ }
+
+ this.setOpacity(0.3);
+ },
+
+ unspiderfy: function () {
+ if (false) {
+ return;
+ }
+ //TODO
+ },
+
+ _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));
+ }
+
+ 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));
+ legLength += this._2PI * this._spiralLengthFactor / angle;
+ }
+ return res;
+ }
+});
\ No newline at end of file
--
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