From e8cfd2d66f50f1f6bfb60fa336d85888f8eb79ec Mon Sep 17 00:00:00 2001 From: theLundquist Date: Thu, 7 Jun 2012 14:09:05 +0200 Subject: [PATCH 1/7] - Moved the cluster-marker-container div to the markerPane (this means that the div is in the correct position) - Given the cluster-marker-container div a width/height so that you can click it in Safari/Chrome. --- leafclusterer.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/leafclusterer.js b/leafclusterer.js index b4c8f66..47a10d0 100644 --- a/leafclusterer.js +++ b/leafclusterer.js @@ -633,7 +633,7 @@ ClusterMarker_ = L.Class.extend({ onAdd: function(map) { this.map_ = map; this.container_ = L.DomUtil.create('div', 'cluster-marker-container'); - map.getPanes().overlayPane.appendChild(this.container_); + map.getPanes().markerPane.appendChild(this.container_); var cluster = this; if (this.container_.addEventListener) { @@ -665,7 +665,7 @@ ClusterMarker_ = L.Class.extend({ }, onRemove: function(map) { - map.getPanes().overlayPane.removeChild(this.container_); + map.getPanes().markerPane.removeChild(this.container_); map.off('viewreset', this.redraw, this); }, @@ -684,6 +684,10 @@ ClusterMarker_ = L.Class.extend({ pos.y -= parseInt(this.height_ / 2, 10); this.container_.style.top = pos.y + "px"; this.container_.style.left = pos.x + "px"; + + //need to set the width and height of the container div + this.container_.style.width = this.width_ + "px"; + this.container_.style.height = this.height_ + "px"; }, hide: function() { From 75f4135302d55d13edf513c71aa7afe93e455fef Mon Sep 17 00:00:00 2001 From: theLundquist Date: Thu, 7 Jun 2012 17:18:23 +0200 Subject: [PATCH 2/7] fixed my previous commit --- leafclusterer.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/leafclusterer.js b/leafclusterer.js index 47a10d0..ddd53bc 100644 --- a/leafclusterer.js +++ b/leafclusterer.js @@ -95,6 +95,10 @@ function LeafClusterer(map, opt_markers, opt_opts) { 'width': sizes[i - 1] }); } + + //create a new pane for the clusters + map._panes.clusterPane = map._createPane("leaflet-cluster-pane"); + $(".leaflet-cluster-pane").css("z-index", "8").css("position","absolute"); if (typeof opt_opts === "object" && opt_opts !== null) { if (typeof opt_opts.gridSize === "number" && opt_opts.gridSize > 0) { @@ -633,7 +637,7 @@ ClusterMarker_ = L.Class.extend({ onAdd: function(map) { this.map_ = map; this.container_ = L.DomUtil.create('div', 'cluster-marker-container'); - map.getPanes().markerPane.appendChild(this.container_); + map.getPanes().clusterPane.appendChild(this.container_); var cluster = this; if (this.container_.addEventListener) { @@ -665,7 +669,7 @@ ClusterMarker_ = L.Class.extend({ }, onRemove: function(map) { - map.getPanes().markerPane.removeChild(this.container_); + map.getPanes().clusterPane.removeChild(this.container_); map.off('viewreset', this.redraw, this); }, From ed53ca313d8b50c08f2ef4c90168f9853c198ccb Mon Sep 17 00:00:00 2001 From: theLundquist Date: Mon, 18 Jun 2012 17:08:03 +0200 Subject: [PATCH 3/7] Some fixes for Safari, I have changed some of the stuff I did in the last update, because they were required to get it working on everything. --- leafclusterer.js | 32 +++++++++++++++----------------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/leafclusterer.js b/leafclusterer.js index ddd53bc..149ade7 100644 --- a/leafclusterer.js +++ b/leafclusterer.js @@ -582,6 +582,8 @@ function Cluster(leafClusterer) { } ClusterMarker_ = L.Class.extend({ + includes: L.Mixin.Events, + initialize: function(latLng_, count_, styles_, padding_) { this.reset({latLng:latLng_, count: count_, styles: styles_, padding: padding_}); }, @@ -637,20 +639,8 @@ ClusterMarker_ = L.Class.extend({ onAdd: function(map) { this.map_ = map; this.container_ = L.DomUtil.create('div', 'cluster-marker-container'); + map.getPanes().clusterPane.appendChild(this.container_); - var cluster = this; - - if (this.container_.addEventListener) { - this.container_.addEventListener("click", - function() { - cluster.onClick_(cluster); - }, false); - } else if (this.container_.attachEvent) { - this.container_.attachEvent("onclick", - function() { - cluster.onClick_(cluster); - }); - } map.on('viewreset', this.redraw, this); this.redraw(); }, @@ -686,8 +676,10 @@ ClusterMarker_ = L.Class.extend({ var pos = this.map_.latLngToLayerPoint(this.latlng_); pos.x -= parseInt(this.width_ / 2, 10); pos.y -= parseInt(this.height_ / 2, 10); - this.container_.style.top = pos.y + "px"; - this.container_.style.left = pos.x + "px"; + + //this is important! + this.container_.style.zIndex = pos.y; + this.container_.style.webkitTransform = L.DomUtil.getTranslateString(pos); //need to set the width and height of the container div this.container_.style.width = this.width_ + "px"; @@ -736,11 +728,17 @@ ClusterMarker_ = L.Class.extend({ } var txtColor = this.textColor_ ? this.textColor_ : 'black'; - div.style.cssText = mstyle + 'cursor:pointer;top:' + pos.y + "px;left:" + - pos.x + "px;color:" + txtColor + ";position:absolute;font-size:11px;" + + div.style.cssText = mstyle + "cursor:pointer;top:0px;left:0px" + + "color:" + txtColor + ";position:absolute;font-size:11px;" + 'font-family:Arial,sans-serif;font-weight:bold'; div.innerHTML = this.count_; + //add a listener and some extra styles + var cluster = this; + div.style.zIndex = pos.y; + div.className += " leaflet-clickable"; + L.DomEvent.addListener(div, 'click', function () { cluster.onClick_(cluster); }, this); + return div; } }); From db2da20606fd1b5b091416d587d594728edea322 Mon Sep 17 00:00:00 2001 From: theLundquist Date: Mon, 18 Jun 2012 17:11:42 +0200 Subject: [PATCH 4/7] forgot that one change --- leafclusterer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/leafclusterer.js b/leafclusterer.js index 149ade7..0f93fe2 100644 --- a/leafclusterer.js +++ b/leafclusterer.js @@ -729,7 +729,7 @@ ClusterMarker_ = L.Class.extend({ var txtColor = this.textColor_ ? this.textColor_ : 'black'; div.style.cssText = mstyle + "cursor:pointer;top:0px;left:0px" + - "color:" + txtColor + ";position:absolute;font-size:11px;" + + "color:" + txtColor + ";font-size:11px;" + 'font-family:Arial,sans-serif;font-weight:bold'; div.innerHTML = this.count_; From 64f902ac75ad6201acf39703a39b751ea35ad5fb Mon Sep 17 00:00:00 2001 From: theLundquist Date: Thu, 21 Jun 2012 16:30:24 +0200 Subject: [PATCH 5/7] I've made some changes here for WP7, yes I have a WP7 device, I like it :P WP7 devices do NOT pay attention to even the 2D transformation CSS properties. The solution is a simple substitution from the code that Leaflet use for their marker positioning. --- leafclusterer.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/leafclusterer.js b/leafclusterer.js index 0f93fe2..e8f5525 100644 --- a/leafclusterer.js +++ b/leafclusterer.js @@ -679,7 +679,14 @@ ClusterMarker_ = L.Class.extend({ //this is important! this.container_.style.zIndex = pos.y; - this.container_.style.webkitTransform = L.DomUtil.getTranslateString(pos); + + if (L.Browser.webkit3d) { + this.container_.style[L.DomUtil.TRANSFORM] = L.DomUtil.getTranslateString(pos); + } else { + this.container_.style.position = "absolute"; + this.container_.style.left = pos.x + "px"; + this.container_.style.top = pos.y + "px"; + } //need to set the width and height of the container div this.container_.style.width = this.width_ + "px"; @@ -728,7 +735,7 @@ ClusterMarker_ = L.Class.extend({ } var txtColor = this.textColor_ ? this.textColor_ : 'black'; - div.style.cssText = mstyle + "cursor:pointer;top:0px;left:0px" + + div.style.cssText = mstyle + "cursor:pointer;" + "color:" + txtColor + ";font-size:11px;" + 'font-family:Arial,sans-serif;font-weight:bold'; div.innerHTML = this.count_; From a355be26e201b1bf465825e388e2289bd9db3863 Mon Sep 17 00:00:00 2001 From: theLundquist Date: Fri, 22 Jun 2012 16:09:26 +0200 Subject: [PATCH 6/7] Fix for minor positioning bug. Thanks to Kinhunt for spotting this one. --- leafclusterer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/leafclusterer.js b/leafclusterer.js index e8f5525..7492e8e 100644 --- a/leafclusterer.js +++ b/leafclusterer.js @@ -679,11 +679,11 @@ ClusterMarker_ = L.Class.extend({ //this is important! this.container_.style.zIndex = pos.y; + this.container_.style.position = "absolute"; if (L.Browser.webkit3d) { this.container_.style[L.DomUtil.TRANSFORM] = L.DomUtil.getTranslateString(pos); } else { - this.container_.style.position = "absolute"; this.container_.style.left = pos.x + "px"; this.container_.style.top = pos.y + "px"; } From 7d2abd1550377f6d8d3390d9cf5b397976d5d66b Mon Sep 17 00:00:00 2001 From: theLundquist Date: Mon, 2 Jul 2012 15:30:28 +0200 Subject: [PATCH 7/7] Removed Jquery dependancy (thanks dbmikus). I've used the HTML5 getElementsByClassName function, this works in most major browsers (safari, Firefox, Chrome) and IE9+. If somebody wants to do a fix for IE 8 and below, feel free :) --- leafclusterer.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/leafclusterer.js b/leafclusterer.js index 7492e8e..985d287 100644 --- a/leafclusterer.js +++ b/leafclusterer.js @@ -98,7 +98,9 @@ function LeafClusterer(map, opt_markers, opt_opts) { //create a new pane for the clusters map._panes.clusterPane = map._createPane("leaflet-cluster-pane"); - $(".leaflet-cluster-pane").css("z-index", "8").css("position","absolute"); + var clusterPane = document.getElementsByClassName("leaflet-cluster-pane")[0]; + clusterPane.style.zIndex = 8; + clusterPane.style.position = "absolute"; if (typeof opt_opts === "object" && opt_opts !== null) { if (typeof opt_opts.gridSize === "number" && opt_opts.gridSize > 0) {