Skip to content

Commit

Permalink
Use overlayLayer and overlayMouseTarget
Browse files Browse the repository at this point in the history
  • Loading branch information
ashleahhill committed Oct 1, 2019
1 parent f4c2cc7 commit 9dacc7e
Showing 1 changed file with 36 additions and 8 deletions.
44 changes: 36 additions & 8 deletions markerclustererplus/src/markerclusterer.js
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@ function ClusterIcon(cluster, styles) {
this.styles_ = styles;
this.center_ = null;
this.div_ = null;
this.eventDiv_ = null;
this.sums_ = null;
this.visible_ = false;

Expand All @@ -120,31 +121,37 @@ ClusterIcon.prototype.onAdd = function () {

this.div_ = document.createElement("div");
this.div_.className = this.className_;
this.eventDiv_ = this.div_.cloneNode();
this.eventDiv_.className += ' event';

if (this.visible_) {
this.show();
}

this.getPanes().overlayMouseTarget.appendChild(this.div_);
var panes = this.getPanes();

panes.overlayLayer.appendChild(this.div_)
panes.overlayMouseTarget.appendChild(this.eventDiv_);

// Fix for Issue 157
this.boundsChangedListener_ = google.maps.event.addListener(this.getMap(), "bounds_changed", function () {
cDraggingMapByCluster = cMouseDownInCluster;
});

google.maps.event.addDomListener(this.div_, "mousedown", function () {
google.maps.event.addDomListener(this.eventDiv_, "mousedown", function () {
cMouseDownInCluster = true;
cDraggingMapByCluster = false;
});

// March 1, 2018: Fix for this 3.32 exp bug, https://issuetracker.google.com/issues/73571522
// But it doesn't work with earlier releases so do a version check.
if (gmVersion >= 332) { // Ugly version-dependent code
google.maps.event.addDomListener(this.div_, "touchstart", function (e) {
google.maps.event.addDomListener(this.eventDiv_, "touchstart", function (e) {
e.stopPropagation();
});
}

google.maps.event.addDomListener(this.div_, "click", function (e) {
google.maps.event.addDomListener(this.eventDiv_, "click", function (e) {
cMouseDownInCluster = false;
if (!cDraggingMapByCluster) {
var theBounds;
Expand Down Expand Up @@ -184,7 +191,7 @@ ClusterIcon.prototype.onAdd = function () {
}
});

google.maps.event.addDomListener(this.div_, "mouseover", function () {
google.maps.event.addDomListener(this.eventDiv_, "mouseover", function () {
var mc = cClusterIcon.cluster_.getMarkerClusterer();
/**
* This event is fired when the mouse moves over a cluster marker.
Expand All @@ -195,7 +202,7 @@ ClusterIcon.prototype.onAdd = function () {
google.maps.event.trigger(mc, "mouseover", cClusterIcon.cluster_);
});

google.maps.event.addDomListener(this.div_, "mouseout", function () {
google.maps.event.addDomListener(this.eventDiv_, "mouseout", function () {
var mc = cClusterIcon.cluster_.getMarkerClusterer();
/**
* This event is fired when the mouse moves out of a cluster marker.
Expand All @@ -215,13 +222,14 @@ ClusterIcon.prototype.onRemove = function () {
if (this.div_ && this.div_.parentNode) {
this.hide();
google.maps.event.removeListener(this.boundsChangedListener_);
google.maps.event.clearInstanceListeners(this.div_);
google.maps.event.clearInstanceListeners(this.eventDiv_);
this.div_.parentNode.removeChild(this.div_);
this.eventDiv_.parentNode.removeChild(this.eventDiv_);
this.div_ = null;
this.eventDiv_ = null;
}
};


/**
* Draws the icon.
*/
Expand All @@ -231,6 +239,8 @@ ClusterIcon.prototype.draw = function () {
this.div_.style.top = pos.y + "px";
this.div_.style.left = pos.x + "px";
this.div_.style.zIndex = google.maps.Marker.MAX_ZINDEX + 1; // Put above all unclustered markers

this.syncDivStyle();
}
};

Expand All @@ -241,7 +251,9 @@ ClusterIcon.prototype.draw = function () {
ClusterIcon.prototype.hide = function () {
if (this.div_) {
this.div_.style.display = "none";
this.syncDivStyle();
}

this.visible_ = false;
};

Expand Down Expand Up @@ -286,6 +298,10 @@ ClusterIcon.prototype.show = function () {
this.div_.title = this.sums_.title;
}
this.div_.style.display = "";

this.syncDivStyle({
title: this.div_.title,
});
}
this.visible_ = true;
};
Expand Down Expand Up @@ -361,6 +377,18 @@ ClusterIcon.prototype.getPosFromLatLng_ = function (latlng) {
return pos;
};

/**
* Sync the eventDiv_ size and position with the display div_
*/
ClusterIcon.prototype.syncDivStyle = function (vars) {
if (vars) {
Object.assign(this.eventDiv_, vars);
}
if (this.eventDiv_ && this.div_) {
this.eventDiv_.style.cssText = this.div_.style.cssText;
}
}


/**
* Creates a single cluster that manages a group of proximate markers.
Expand Down

0 comments on commit 9dacc7e

Please sign in to comment.