Skip to content
This repository has been archived by the owner on Jun 22, 2021. It is now read-only.

Use overlayLayer and overlayMouseTarget #518

Closed
wants to merge 1 commit into from
Closed

Use overlayLayer and overlayMouseTarget #518

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 37 additions & 8 deletions markerclustererplus/src/markerclusterer.js
View file
Open in desktop
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,36 @@ ClusterIcon.prototype.onAdd = function () {

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

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 +190,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 +201,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 +221,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 +238,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 +250,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 +297,11 @@ ClusterIcon.prototype.show = function () {
this.div_.title = this.sums_.title;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just before this line you should also be setting the innerHTML of the overlayMouseTarget div to the same as that of the overlayLayer div. This ensures the overlayMouseTarget div has exactly the same size as the overlayLayer div.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why wouldn't copying the height and width from the overlayDiv work without duplicating innerHTML?

I'm open to setting it and adding opacity: 0 to line 388; it just seems unnecessary.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm just being cautious.

Copy link
Author

@ashleahhill ashleahhill Oct 16, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Syncing innerHTML to event div and setting opacity when css is updated (in syncDivStyle method)

}
this.div_.style.display = "";

this.syncDivStyle({
title: this.div_.title,
innerHTML: this.div_.innerHTML,
});
}
this.visible_ = true;
};
Expand Down Expand Up @@ -361,6 +377,19 @@ 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);
Copy link
Author

@ashleahhill ashleahhill Oct 7, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line is used to sync any other DOMElement props outside of CSS. The only property I found that needed this was the title.

}
if (this.eventDiv_ && this.div_) {
this.eventDiv_.style.cssText = this.div_.style.cssText;
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The overlayDiv, this.div_, is positioned and resized using CSS. By copying the cssText we copy the same height, width, z-index, etc. without having to specify each.

this.eventDiv_.style.opacity = 0;
}
}


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