@google/markerclusterer
Advanced tools
Comparing version 2.0.0 to 2.0.1
/** | ||
* @name MarkerClusterer for Google Maps v3 | ||
* @author Luke Mahe | ||
* @fileoverview | ||
* The library creates and manages per-zoom-level clusters for large amounts of | ||
* markers. | ||
*/ | ||
/** | ||
* @license | ||
* Copyright 2019 Google LLC. All Rights Reserved. | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
@@ -15,3 +8,3 @@ * you may not use this file except in compliance with the License. | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
@@ -25,2 +18,9 @@ * Unless required by applicable law or agreed to in writing, software | ||
/** | ||
* @name MarkerClusterer for Google Maps v3 | ||
* @author Luke Mahe | ||
* @fileoverview | ||
* The library creates and manages per-zoom-level clusters for large amounts of | ||
* markers. | ||
*/ | ||
@@ -63,4 +63,2 @@ /** | ||
class MarkerClusterer { | ||
@@ -70,3 +68,3 @@ constructor(map, opt_markers, opt_options) { | ||
this.map_ = map; | ||
/** | ||
@@ -78,5 +76,4 @@ * The marker cluster image path. | ||
*/ | ||
this.MARKER_CLUSTER_IMAGE_PATH_ = '../images/m'; | ||
this.MARKER_CLUSTER_IMAGE_PATH_ = "../images/m"; | ||
/** | ||
@@ -88,7 +85,7 @@ * The marker cluster image path. | ||
*/ | ||
this.MARKER_CLUSTER_IMAGE_EXTENSION_ = 'png'; | ||
this.MARKER_CLUSTER_IMAGE_EXTENSION_ = "png"; | ||
/** | ||
* @type {Array.<google.maps.Marker>} | ||
* @private | ||
*/ | ||
* @type {Array.<google.maps.Marker>} | ||
* @private | ||
*/ | ||
this.markers_ = []; | ||
@@ -120,3 +117,3 @@ | ||
*/ | ||
this.gridSize_ = options['gridSize'] || 60; | ||
this.gridSize_ = options["gridSize"] || 60; | ||
@@ -126,5 +123,4 @@ /** | ||
*/ | ||
this.minClusterSize_ = options['minimumClusterSize'] || 2; | ||
this.minClusterSize_ = options["minimumClusterSize"] || 2; | ||
/** | ||
@@ -134,5 +130,5 @@ * @type {?number} | ||
*/ | ||
this.maxZoom_ = options['maxZoom'] || null; | ||
this.maxZoom_ = options["maxZoom"] || null; | ||
this.styles_ = options['styles'] || []; | ||
this.styles_ = options["styles"] || []; | ||
@@ -143,4 +139,3 @@ /** | ||
*/ | ||
this.imagePath_ = options['imagePath'] || | ||
this.MARKER_CLUSTER_IMAGE_PATH_; | ||
this.imagePath_ = options["imagePath"] || this.MARKER_CLUSTER_IMAGE_PATH_; | ||
@@ -151,4 +146,4 @@ /** | ||
*/ | ||
this.imageExtension_ = options['imageExtension'] || | ||
this.MARKER_CLUSTER_IMAGE_EXTENSION_; | ||
this.imageExtension_ = | ||
options["imageExtension"] || this.MARKER_CLUSTER_IMAGE_EXTENSION_; | ||
@@ -161,4 +156,4 @@ /** | ||
if (options['zoomOnClick'] != undefined) { | ||
this.zoomOnClick_ = options['zoomOnClick']; | ||
if (options["zoomOnClick"] != undefined) { | ||
this.zoomOnClick_ = options["zoomOnClick"]; | ||
} | ||
@@ -172,4 +167,4 @@ | ||
if (options['averageCenter'] != undefined) { | ||
this.averageCenter_ = options['averageCenter']; | ||
if (options["averageCenter"] != undefined) { | ||
this.averageCenter_ = options["averageCenter"]; | ||
} | ||
@@ -189,8 +184,10 @@ | ||
var that = this; | ||
google.maps.event.addListener(this.map_, 'zoom_changed', function () { | ||
google.maps.event.addListener(this.map_, "zoom_changed", function() { | ||
// Determines map type and prevent illegal zoom levels | ||
var zoom = that.map_.getZoom(); | ||
var minZoom = that.map_.minZoom || 0; | ||
var maxZoom = Math.min(that.map_.maxZoom || 100, | ||
that.map_.mapTypes[that.map_.getMapTypeId()].maxZoom); | ||
var maxZoom = Math.min( | ||
that.map_.maxZoom || 100, | ||
that.map_.mapTypes[that.map_.getMapTypeId()].maxZoom | ||
); | ||
zoom = Math.min(Math.max(zoom, minZoom), maxZoom); | ||
@@ -204,3 +201,3 @@ | ||
google.maps.event.addListener(this.map_, 'idle', function () { | ||
google.maps.event.addListener(this.map_, "idle", function() { | ||
that.redraw(); | ||
@@ -210,3 +207,6 @@ }); | ||
// Finally, add the markers | ||
if (opt_markers && (opt_markers.length || Object.keys(opt_markers).length)) { | ||
if ( | ||
opt_markers && | ||
(opt_markers.length || Object.keys(opt_markers).length) | ||
) { | ||
this.addMarkers(opt_markers, false); | ||
@@ -216,4 +216,2 @@ } | ||
/** | ||
@@ -228,3 +226,3 @@ * Extends a objects prototype by anothers. | ||
extend(obj1, obj2) { | ||
return (function (object) { | ||
return function(object) { | ||
for (var property in object.prototype) { | ||
@@ -234,7 +232,5 @@ this.prototype[property] = object.prototype[property]; | ||
return this; | ||
}).apply(obj1, [obj2]); | ||
}.apply(obj1, [obj2]); | ||
} | ||
/** | ||
@@ -246,3 +242,3 @@ * Implementaion of the interface method. | ||
this.setReady_(true); | ||
}; | ||
} | ||
@@ -253,3 +249,3 @@ /** | ||
*/ | ||
draw() { }; | ||
draw() {} | ||
@@ -266,5 +262,5 @@ /** | ||
for (var i = 0, size; size = this.sizes[i]; i++) { | ||
for (var i = 0, size; (size = this.sizes[i]); i++) { | ||
this.styles_.push({ | ||
url: this.imagePath_ + (i + 1) + '.' + this.imageExtension_, | ||
url: this.imagePath_ + (i + 1) + "." + this.imageExtension_, | ||
height: size, | ||
@@ -282,3 +278,3 @@ width: size | ||
var bounds = new google.maps.LatLngBounds(); | ||
for (var i = 0, marker; marker = markers[i]; i++) { | ||
for (var i = 0, marker; (marker = markers[i]); i++) { | ||
bounds.extend(marker.getPosition()); | ||
@@ -290,3 +286,2 @@ } | ||
/** | ||
@@ -301,3 +296,2 @@ * Sets the styles. | ||
/** | ||
@@ -312,3 +306,2 @@ * Gets the styles. | ||
/** | ||
@@ -332,3 +325,2 @@ * Whether zoom on click is set. | ||
/** | ||
@@ -343,3 +335,2 @@ * Returns the array of markers in the clusterer. | ||
/** | ||
@@ -354,3 +345,2 @@ * Returns the number of markers in the clusterer | ||
/** | ||
@@ -365,3 +355,2 @@ * Sets the max zoom for the clusterer. | ||
/** | ||
@@ -376,3 +365,2 @@ * Gets the max zoom for the clusterer. | ||
/** | ||
@@ -402,3 +390,2 @@ * The function for calculating the cluster icon image. | ||
/** | ||
@@ -416,3 +403,2 @@ * Set the calculator function. | ||
/** | ||
@@ -427,3 +413,2 @@ * Get the calculator function. | ||
/** | ||
@@ -437,7 +422,7 @@ * Add an array of markers to the clusterer. | ||
if (markers.length) { | ||
for (var i = 0, marker; marker = markers[i]; i++) { | ||
for (let i = 0, marker; (marker = markers[i]); i++) { | ||
this.pushMarkerTo_(marker); | ||
} | ||
} else if (Object.keys(markers).length) { | ||
for (var marker in markers) { | ||
for (let marker in markers) { | ||
this.pushMarkerTo_(markers[marker]); | ||
@@ -451,3 +436,2 @@ } | ||
/** | ||
@@ -461,7 +445,7 @@ * Pushes a marker to the clusterer. | ||
marker.isAdded = false; | ||
if (marker['draggable']) { | ||
if (marker["draggable"]) { | ||
// If the marker is draggable add a listener so we update the clusters on | ||
// the drag end. | ||
var that = this; | ||
google.maps.event.addListener(marker, 'dragend', function () { | ||
google.maps.event.addListener(marker, "dragend", function() { | ||
marker.isAdded = false; | ||
@@ -474,3 +458,2 @@ that.repaint(); | ||
/** | ||
@@ -489,3 +472,2 @@ * Adds a marker to the clusterer and redraws if needed. | ||
/** | ||
@@ -503,3 +485,3 @@ * Removes a marker and returns true if removed, false if not | ||
} else { | ||
for (var i = 0, m; m = this.markers_[i]; i++) { | ||
for (var i = 0, m; (m = this.markers_[i]); i++) { | ||
if (m == marker) { | ||
@@ -524,3 +506,2 @@ index = i; | ||
/** | ||
@@ -545,3 +526,2 @@ * Remove a marker from the cluster. | ||
/** | ||
@@ -559,3 +539,3 @@ * Removes an array of markers from the cluster. | ||
for (var i = 0, marker; marker = markersCopy[i]; i++) { | ||
for (var i = 0, marker; (marker = markersCopy[i]); i++) { | ||
var r = this.removeMarker_(marker); | ||
@@ -572,3 +552,2 @@ removed = removed || r; | ||
/** | ||
@@ -587,3 +566,2 @@ * Sets the clusterer's ready state. | ||
/** | ||
@@ -598,3 +576,2 @@ * Returns the number of clusters in the clusterer. | ||
/** | ||
@@ -609,3 +586,2 @@ * Returns the google map that the clusterer is associated with. | ||
/** | ||
@@ -620,3 +596,2 @@ * Sets the google map that the clusterer is associated with. | ||
/** | ||
@@ -631,3 +606,2 @@ * Returns the size of the grid. | ||
/** | ||
@@ -642,3 +616,2 @@ * Sets the size of the grid. | ||
/** | ||
@@ -662,3 +635,2 @@ * Returns the min cluster size. | ||
/** | ||
@@ -674,6 +646,10 @@ * Extends a bounds object by the grid size. | ||
// Turn the bounds into latlng. | ||
var tr = new google.maps.LatLng(bounds.getNorthEast().lat(), | ||
bounds.getNorthEast().lng()); | ||
var bl = new google.maps.LatLng(bounds.getSouthWest().lat(), | ||
bounds.getSouthWest().lng()); | ||
var tr = new google.maps.LatLng( | ||
bounds.getNorthEast().lat(), | ||
bounds.getNorthEast().lng() | ||
); | ||
var bl = new google.maps.LatLng( | ||
bounds.getSouthWest().lat(), | ||
bounds.getSouthWest().lng() | ||
); | ||
@@ -700,3 +676,2 @@ // Convert the points to pixels and the extend out by the grid size. | ||
/** | ||
@@ -714,3 +689,2 @@ * Determins if a marker is contained in a bounds. | ||
/** | ||
@@ -726,3 +700,2 @@ * Clears all clusters and markers from the clusterer. | ||
/** | ||
@@ -734,3 +707,3 @@ * Clears all existing clusters and recreates them. | ||
// Remove all the clusters | ||
for (var i = 0, cluster; cluster = this.clusters_[i]; i++) { | ||
for (let i = 0, cluster; (cluster = this.clusters_[i]); i++) { | ||
cluster.remove(); | ||
@@ -740,3 +713,3 @@ } | ||
// Reset the markers to not be added and to be invisible. | ||
for (var i = 0, marker; marker = this.markers_[i]; i++) { | ||
for (let i = 0, marker; (marker = this.markers_[i]); i++) { | ||
marker.isAdded = false; | ||
@@ -762,4 +735,4 @@ if (opt_hide) { | ||
// Do it in a timeout so the other clusters have been drawn first. | ||
setTimeout(function () { | ||
for (var i = 0, cluster; cluster = oldClusters[i]; i++) { | ||
setTimeout(function() { | ||
for (var i = 0, cluster; (cluster = oldClusters[i]); i++) { | ||
cluster.remove(); | ||
@@ -770,3 +743,2 @@ } | ||
/** | ||
@@ -779,3 +751,2 @@ * Redraws the clusters. | ||
/** | ||
@@ -789,3 +760,3 @@ * Calculates the distance between two latlng locations in km. | ||
* @private | ||
*/ | ||
*/ | ||
distanceBetweenPoints_(p1, p2) { | ||
@@ -797,7 +768,10 @@ if (!p1 || !p2) { | ||
var R = 6371; // Radius of the Earth in km | ||
var dLat = (p2.lat() - p1.lat()) * Math.PI / 180; | ||
var dLon = (p2.lng() - p1.lng()) * Math.PI / 180; | ||
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + | ||
Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) * | ||
Math.sin(dLon / 2) * Math.sin(dLon / 2); | ||
var dLat = ((p2.lat() - p1.lat()) * Math.PI) / 180; | ||
var dLon = ((p2.lng() - p1.lng()) * Math.PI) / 180; | ||
var a = | ||
Math.sin(dLat / 2) * Math.sin(dLat / 2) + | ||
Math.cos((p1.lat() * Math.PI) / 180) * | ||
Math.cos((p2.lat() * Math.PI) / 180) * | ||
Math.sin(dLon / 2) * | ||
Math.sin(dLon / 2); | ||
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); | ||
@@ -808,3 +782,2 @@ var d = R * c; | ||
/** | ||
@@ -819,4 +792,3 @@ * Add a marker to a cluster, or creates a new cluster. | ||
var clusterToAddTo = null; | ||
var pos = marker.getPosition(); | ||
for (var i = 0, cluster; cluster = this.clusters_[i]; i++) { | ||
for (var i = 0, cluster; (cluster = this.clusters_[i]); i++) { | ||
var center = cluster.getCenter(); | ||
@@ -835,9 +807,8 @@ if (center) { | ||
} else { | ||
var cluster = new Cluster(this); | ||
cluster.addMarker(marker); | ||
this.clusters_.push(cluster); | ||
var newCluster = new Cluster(this); | ||
newCluster.addMarker(marker); | ||
this.clusters_.push(newCluster); | ||
} | ||
} | ||
/** | ||
@@ -855,7 +826,9 @@ * Creates the clusters. | ||
// Create a new bounds object so we don't affect the map. | ||
var mapBounds = new google.maps.LatLngBounds(this.map_.getBounds().getSouthWest(), | ||
this.map_.getBounds().getNorthEast()); | ||
var mapBounds = new google.maps.LatLngBounds( | ||
this.map_.getBounds().getSouthWest(), | ||
this.map_.getBounds().getNorthEast() | ||
); | ||
var bounds = this.getExtendedBounds(mapBounds); | ||
for (var i = 0, marker; marker = this.markers_[i]; i++) { | ||
for (var i = 0, marker; (marker = this.markers_[i]); i++) { | ||
if (!marker.isAdded && this.isMarkerInBounds_(marker, bounds)) { | ||
@@ -886,4 +859,7 @@ this.addToClosestCluster_(marker); | ||
this.bounds_ = null; | ||
this.clusterIcon_ = new ClusterIcon(this, markerClusterer.getStyles(), | ||
markerClusterer.getGridSize()); | ||
this.clusterIcon_ = new ClusterIcon( | ||
this, | ||
markerClusterer.getStyles(), | ||
markerClusterer.getGridSize() | ||
); | ||
} | ||
@@ -901,3 +877,3 @@ | ||
} else { | ||
for (var i = 0, m; m = this.markers_[i]; i++) { | ||
for (var i = 0, m; (m = this.markers_[i]); i++) { | ||
if (m == marker) { | ||
@@ -911,3 +887,2 @@ return true; | ||
/** | ||
@@ -930,4 +905,6 @@ * Add a marker the cluster. | ||
var l = this.markers_.length + 1; | ||
var lat = (this.center_.lat() * (l - 1) + marker.getPosition().lat()) / l; | ||
var lng = (this.center_.lng() * (l - 1) + marker.getPosition().lng()) / l; | ||
var lat = | ||
(this.center_.lat() * (l - 1) + marker.getPosition().lat()) / l; | ||
var lng = | ||
(this.center_.lng() * (l - 1) + marker.getPosition().lng()) / l; | ||
this.center_ = new google.maps.LatLng(lat, lng); | ||
@@ -962,3 +939,2 @@ this.calculateBounds_(); | ||
/** | ||
@@ -973,3 +949,2 @@ * Returns the marker clusterer that the cluster is associated with. | ||
/** | ||
@@ -983,3 +958,3 @@ * Returns the bounds of the cluster. | ||
var markers = this.getMarkers(); | ||
for (var i = 0, marker; marker = markers[i]; i++) { | ||
for (var i = 0, marker; (marker = markers[i]); i++) { | ||
bounds.extend(marker.getPosition()); | ||
@@ -990,3 +965,2 @@ } | ||
/** | ||
@@ -1001,3 +975,2 @@ * Removes the cluster | ||
/** | ||
@@ -1012,3 +985,2 @@ * Returns the number of markers in the cluster. | ||
/** | ||
@@ -1023,3 +995,2 @@ * Returns a list of the markers in the cluster. | ||
/** | ||
@@ -1034,3 +1005,2 @@ * Returns the center of the cluster. | ||
/** | ||
@@ -1046,3 +1016,2 @@ * Calculated the extended bounds of the cluster with the grid. | ||
/** | ||
@@ -1058,3 +1027,2 @@ * Determines if a marker lies in the clusters bounds. | ||
/** | ||
@@ -1069,3 +1037,2 @@ * Returns the map that the cluster is associated with. | ||
/** | ||
@@ -1080,3 +1047,3 @@ * Updates the cluster icon | ||
// The zoom is greater than our max zoom so show all the markers in cluster. | ||
for (var i = 0, marker; marker = this.markers_[i]; i++) { | ||
for (var i = 0, marker; (marker = this.markers_[i]); i++) { | ||
marker.setMap(this.map_); | ||
@@ -1134,3 +1101,2 @@ } | ||
/** | ||
@@ -1144,3 +1110,7 @@ * Triggers the clusterclick event and zoom's if the option is set. | ||
// Trigger the clusterclick event. | ||
google.maps.event.trigger(markerClusterer.map_, 'clusterclick', this.cluster_); | ||
google.maps.event.trigger( | ||
markerClusterer.map_, | ||
"clusterclick", | ||
this.cluster_ | ||
); | ||
@@ -1152,5 +1122,4 @@ if (markerClusterer.isZoomOnClick()) { | ||
} | ||
}; | ||
} | ||
/** | ||
@@ -1161,3 +1130,3 @@ * Adding the cluster icon to the dom. | ||
onAdd() { | ||
this.div_ = document.createElement('DIV'); | ||
this.div_ = document.createElement("DIV"); | ||
if (this.visible_) { | ||
@@ -1173,8 +1142,7 @@ var pos = this.getPosFromLatLng_(this.center_); | ||
var that = this; | ||
google.maps.event.addDomListener(this.div_, 'click', function () { | ||
google.maps.event.addDomListener(this.div_, "click", function() { | ||
that.triggerClusterClick(); | ||
}); | ||
}; | ||
} | ||
/** | ||
@@ -1192,5 +1160,4 @@ * Returns the position to place the div dending on the latlng. | ||
return pos; | ||
}; | ||
} | ||
/** | ||
@@ -1203,9 +1170,8 @@ * Draw the icon. | ||
var pos = this.getPosFromLatLng_(this.center_); | ||
this.div_.style.top = pos.y + 'px'; | ||
this.div_.style.left = pos.x + 'px'; | ||
this.div_.style.top = pos.y + "px"; | ||
this.div_.style.left = pos.x + "px"; | ||
this.div_.style.zIndex = google.maps.Marker.MAX_ZINDEX + 1; | ||
} | ||
}; | ||
} | ||
/** | ||
@@ -1216,8 +1182,7 @@ * Hide the icon. | ||
if (this.div_) { | ||
this.div_.style.display = 'none'; | ||
this.div_.style.display = "none"; | ||
} | ||
this.visible_ = false; | ||
}; | ||
} | ||
/** | ||
@@ -1230,8 +1195,7 @@ * Position and show the icon. | ||
this.div_.style.cssText = this.createCss(pos); | ||
this.div_.style.display = ''; | ||
this.div_.style.display = ""; | ||
} | ||
this.visible_ = true; | ||
}; | ||
} | ||
/** | ||
@@ -1242,5 +1206,4 @@ * Remove the icon from the map | ||
this.setMap(null); | ||
}; | ||
} | ||
/** | ||
@@ -1256,5 +1219,4 @@ * Implementation of the onRemove interface. | ||
} | ||
}; | ||
} | ||
/** | ||
@@ -1276,5 +1238,4 @@ * Set the sums of the icon. | ||
this.useStyle(); | ||
}; | ||
} | ||
/** | ||
@@ -1287,12 +1248,11 @@ * Sets the icon to the the styles. | ||
var style = this.styles_[index]; | ||
this.url_ = style['url']; | ||
this.height_ = style['height']; | ||
this.width_ = style['width']; | ||
this.textColor_ = style['textColor']; | ||
this.anchor_ = style['anchor']; | ||
this.textSize_ = style['textSize']; | ||
this.backgroundPosition_ = style['backgroundPosition']; | ||
}; | ||
this.url_ = style["url"]; | ||
this.height_ = style["height"]; | ||
this.width_ = style["width"]; | ||
this.textColor_ = style["textColor"]; | ||
this.anchor_ = style["anchor"]; | ||
this.textSize_ = style["textSize"]; | ||
this.backgroundPosition_ = style["backgroundPosition"]; | ||
} | ||
/** | ||
@@ -1305,5 +1265,4 @@ * Sets the center of the icon. | ||
this.center_ = center; | ||
}; | ||
} | ||
/** | ||
@@ -1317,34 +1276,68 @@ * Create the css text based on the position of the icon. | ||
var style = []; | ||
style.push('background-image:url(' + this.url_ + ');'); | ||
var backgroundPosition = this.backgroundPosition_ ? this.backgroundPosition_ : '0 0'; | ||
style.push('background-position:' + backgroundPosition + ';'); | ||
style.push("background-image:url(" + this.url_ + ");"); | ||
var backgroundPosition = this.backgroundPosition_ | ||
? this.backgroundPosition_ | ||
: "0 0"; | ||
style.push("background-position:" + backgroundPosition + ";"); | ||
if (typeof this.anchor_ === 'object') { | ||
if (typeof this.anchor_[0] === 'number' && this.anchor_[0] > 0 && | ||
this.anchor_[0] < this.height_) { | ||
style.push('height:' + (this.height_ - this.anchor_[0]) + | ||
'px; padding-top:' + this.anchor_[0] + 'px;'); | ||
if (typeof this.anchor_ === "object") { | ||
if ( | ||
typeof this.anchor_[0] === "number" && | ||
this.anchor_[0] > 0 && | ||
this.anchor_[0] < this.height_ | ||
) { | ||
style.push( | ||
"height:" + | ||
(this.height_ - this.anchor_[0]) + | ||
"px; padding-top:" + | ||
this.anchor_[0] + | ||
"px;" | ||
); | ||
} else { | ||
style.push('height:' + this.height_ + 'px; line-height:' + this.height_ + | ||
'px;'); | ||
style.push( | ||
"height:" + this.height_ + "px; line-height:" + this.height_ + "px;" | ||
); | ||
} | ||
if (typeof this.anchor_[1] === 'number' && this.anchor_[1] > 0 && | ||
this.anchor_[1] < this.width_) { | ||
style.push('width:' + (this.width_ - this.anchor_[1]) + | ||
'px; padding-left:' + this.anchor_[1] + 'px;'); | ||
if ( | ||
typeof this.anchor_[1] === "number" && | ||
this.anchor_[1] > 0 && | ||
this.anchor_[1] < this.width_ | ||
) { | ||
style.push( | ||
"width:" + | ||
(this.width_ - this.anchor_[1]) + | ||
"px; padding-left:" + | ||
this.anchor_[1] + | ||
"px;" | ||
); | ||
} else { | ||
style.push('width:' + this.width_ + 'px; text-align:center;'); | ||
style.push("width:" + this.width_ + "px; text-align:center;"); | ||
} | ||
} else { | ||
style.push('height:' + this.height_ + 'px; line-height:' + | ||
this.height_ + 'px; width:' + this.width_ + 'px; text-align:center;'); | ||
style.push( | ||
"height:" + | ||
this.height_ + | ||
"px; line-height:" + | ||
this.height_ + | ||
"px; width:" + | ||
this.width_ + | ||
"px; text-align:center;" | ||
); | ||
} | ||
var txtColor = this.textColor_ ? this.textColor_ : 'black'; | ||
var txtColor = this.textColor_ ? this.textColor_ : "black"; | ||
var txtSize = this.textSize_ ? this.textSize_ : 11; | ||
style.push('cursor:pointer; top:' + pos.y + 'px; left:' + | ||
pos.x + 'px; color:' + txtColor + '; position:absolute; font-size:' + | ||
txtSize + 'px; font-family:Arial,sans-serif; font-weight:bold'); | ||
return style.join(''); | ||
style.push( | ||
"cursor:pointer; top:" + | ||
pos.y + | ||
"px; left:" + | ||
pos.x + | ||
"px; color:" + | ||
txtColor + | ||
"; position:absolute; font-size:" + | ||
txtSize + | ||
"px; font-family:Arial,sans-serif; font-weight:bold" | ||
); | ||
return style.join(""); | ||
} | ||
@@ -1351,0 +1344,0 @@ } |
@@ -1,15 +0,1 @@ | ||
var MarkerClusterer=function(){"use strict"; | ||
/** | ||
* @license | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/class t{constructor(e,s,i){this.extend(t,google.maps.OverlayView),this.map_=e,this.MARKER_CLUSTER_IMAGE_PATH_="../images/m",this.MARKER_CLUSTER_IMAGE_EXTENSION_="png",this.markers_=[],this.clusters_=[],this.sizes=[53,56,66,78,90],this.styles_=[],this.ready_=!1;var r=i||{};this.gridSize_=r.gridSize||60,this.minClusterSize_=r.minimumClusterSize||2,this.maxZoom_=r.maxZoom||null,this.styles_=r.styles||[],this.imagePath_=r.imagePath||this.MARKER_CLUSTER_IMAGE_PATH_,this.imageExtension_=r.imageExtension||this.MARKER_CLUSTER_IMAGE_EXTENSION_,this.zoomOnClick_=!0,null!=r.zoomOnClick&&(this.zoomOnClick_=r.zoomOnClick),this.averageCenter_=!1,null!=r.averageCenter&&(this.averageCenter_=r.averageCenter),this.setupStyles_(),this.setMap(e),this.prevZoom_=this.map_.getZoom();var h=this;google.maps.event.addListener(this.map_,"zoom_changed",(function(){var t=h.map_.getZoom(),e=h.map_.minZoom||0,s=Math.min(h.map_.maxZoom||100,h.map_.mapTypes[h.map_.getMapTypeId()].maxZoom);t=Math.min(Math.max(t,e),s),h.prevZoom_!=t&&(h.prevZoom_=t,h.resetViewport())})),google.maps.event.addListener(this.map_,"idle",(function(){h.redraw()})),s&&(s.length||Object.keys(s).length)&&this.addMarkers(s,!1)}extend(t,e){return function(t){for(var e in t.prototype)this.prototype[e]=t.prototype[e];return this}.apply(t,[e])}onAdd(){this.setReady_(!0)}draw(){}setupStyles_(){if(!this.styles_.length)for(var t,e=0;t=this.sizes[e];e++)this.styles_.push({url:this.imagePath_+(e+1)+"."+this.imageExtension_,height:t,width:t})}fitMapToMarkers(){for(var t,e=this.getMarkers(),s=new google.maps.LatLngBounds,i=0;t=e[i];i++)s.extend(t.getPosition());this.map_.fitBounds(s)}setStyles(t){this.styles_=t}getStyles(){return this.styles_}isZoomOnClick(){return this.zoomOnClick_}isAverageCenter(){return this.averageCenter_}getMarkers(){return this.markers_}getTotalMarkers(){return this.markers_.length}setMaxZoom(t){this.maxZoom_=t}getMaxZoom(){return this.maxZoom_}calculator_(t,e){for(var s=0,i=t.length,r=i;0!==r;)r=parseInt(r/10,10),s++;return{text:i,index:s=Math.min(s,e)}}setCalculator(t){this.calculator_=t}getCalculator(){return this.calculator_}addMarkers(t,e){if(t.length)for(var s=0;i=t[s];s++)this.pushMarkerTo_(i);else if(Object.keys(t).length)for(var i in t)this.pushMarkerTo_(t[i]);e||this.redraw()}pushMarkerTo_(t){if(t.isAdded=!1,t.draggable){var e=this;google.maps.event.addListener(t,"dragend",(function(){t.isAdded=!1,e.repaint()}))}this.markers_.push(t)}addMarker(t,e){this.pushMarkerTo_(t),e||this.redraw()}removeMarker_(t){var e=-1;if(this.markers_.indexOf)e=this.markers_.indexOf(t);else for(var s,i=0;s=this.markers_[i];i++)if(s==t){e=i;break}return-1!=e&&(t.setMap(null),this.markers_.splice(e,1),!0)}removeMarker(t,e){var s=this.removeMarker_(t);return!(e||!s)&&(this.resetViewport(),this.redraw(),!0)}removeMarkers(t,e){for(var s,i=t===this.getMarkers()?t.slice():t,r=!1,h=0;s=i[h];h++){var a=this.removeMarker_(s);r=r||a}if(!e&&r)return this.resetViewport(),this.redraw(),!0}setReady_(t){this.ready_||(this.ready_=t,this.createClusters_())}getTotalClusters(){return this.clusters_.length}getMap(){return this.map_}setMap(t){this.map_=t}getGridSize(){return this.gridSize_}setGridSize(t){this.gridSize_=t}getMinClusterSize(){return this.minClusterSize_}setMinClusterSize(t){this.minClusterSize_=t}getExtendedBounds(t){var e=this.getProjection(),s=new google.maps.LatLng(t.getNorthEast().lat(),t.getNorthEast().lng()),i=new google.maps.LatLng(t.getSouthWest().lat(),t.getSouthWest().lng()),r=e.fromLatLngToDivPixel(s);r.x+=this.gridSize_,r.y-=this.gridSize_;var h=e.fromLatLngToDivPixel(i);h.x-=this.gridSize_,h.y+=this.gridSize_;var a=e.fromDivPixelToLatLng(r),n=e.fromDivPixelToLatLng(h);return t.extend(a),t.extend(n),t}isMarkerInBounds_(t,e){return e.contains(t.getPosition())}clearMarkers(){this.resetViewport(!0),this.markers_=[]}resetViewport(t){for(var e,s=0;e=this.clusters_[s];s++)e.remove();var i;for(s=0;i=this.markers_[s];s++)i.isAdded=!1,t&&i.setMap(null);this.clusters_=[]}repaint(){var t=this.clusters_.slice();this.clusters_.length=0,this.resetViewport(),this.redraw(),setTimeout((function(){for(var e,s=0;e=t[s];s++)e.remove()}),0)}redraw(){this.createClusters_()}distanceBetweenPoints_(t,e){if(!t||!e)return 0;var s=(e.lat()-t.lat())*Math.PI/180,i=(e.lng()-t.lng())*Math.PI/180,r=Math.sin(s/2)*Math.sin(s/2)+Math.cos(t.lat()*Math.PI/180)*Math.cos(e.lat()*Math.PI/180)*Math.sin(i/2)*Math.sin(i/2);return 6371*(2*Math.atan2(Math.sqrt(r),Math.sqrt(1-r)))}addToClosestCluster_(t){for(var s,i=4e4,r=null,h=(t.getPosition(),0);s=this.clusters_[h];h++){var a=s.getCenter();if(a){var n=this.distanceBetweenPoints_(a,t.getPosition());n<i&&(i=n,r=s)}}r&&r.isMarkerInClusterBounds(t)?r.addMarker(t):((s=new e(this)).addMarker(t),this.clusters_.push(s))}createClusters_(){if(this.ready_)for(var t,e=new google.maps.LatLngBounds(this.map_.getBounds().getSouthWest(),this.map_.getBounds().getNorthEast()),s=this.getExtendedBounds(e),i=0;t=this.markers_[i];i++)!t.isAdded&&this.isMarkerInBounds_(t,s)&&this.addToClosestCluster_(t)}}class e{constructor(t){this.markerClusterer_=t,this.map_=t.getMap(),this.gridSize_=t.getGridSize(),this.minClusterSize_=t.getMinClusterSize(),this.averageCenter_=t.isAverageCenter(),this.center_=null,this.markers_=[],this.bounds_=null,this.clusterIcon_=new s(this,t.getStyles(),t.getGridSize())}isMarkerAlreadyAdded(t){if(this.markers_.indexOf)return-1!=this.markers_.indexOf(t);for(var e,s=0;e=this.markers_[s];s++)if(e==t)return!0;return!1}addMarker(t){if(this.isMarkerAlreadyAdded(t))return!1;if(this.center_){if(this.averageCenter_){var e=this.markers_.length+1,s=(this.center_.lat()*(e-1)+t.getPosition().lat())/e,i=(this.center_.lng()*(e-1)+t.getPosition().lng())/e;this.center_=new google.maps.LatLng(s,i),this.calculateBounds_()}}else this.center_=t.getPosition(),this.calculateBounds_();t.isAdded=!0,this.markers_.push(t);var r=this.markers_.length;if(r<this.minClusterSize_&&t.getMap()!=this.map_&&t.setMap(this.map_),r==this.minClusterSize_)for(var h=0;h<r;h++)this.markers_[h].setMap(null);return r>=this.minClusterSize_&&t.setMap(null),this.updateIcon(),!0}getMarkerClusterer(){return this.markerClusterer_}getBounds(){for(var t,e=new google.maps.LatLngBounds(this.center_,this.center_),s=this.getMarkers(),i=0;t=s[i];i++)e.extend(t.getPosition());return e}remove(){this.clusterIcon_.remove(),this.markers_.length=0,delete this.markers_}getSize(){return this.markers_.length}getMarkers(){return this.markers_}getCenter(){return this.center_}calculateBounds_(){var t=new google.maps.LatLngBounds(this.center_,this.center_);this.bounds_=this.markerClusterer_.getExtendedBounds(t)}isMarkerInClusterBounds(t){return this.bounds_.contains(t.getPosition())}getMap(){return this.map_}updateIcon(){var t=this.map_.getZoom(),e=this.markerClusterer_.getMaxZoom();if(e&&t>e)for(var s,i=0;s=this.markers_[i];i++)s.setMap(this.map_);else if(this.markers_.length<this.minClusterSize_)this.clusterIcon_.hide();else{var r=this.markerClusterer_.getStyles().length,h=this.markerClusterer_.getCalculator()(this.markers_,r);this.clusterIcon_.setCenter(this.center_),this.clusterIcon_.setSums(h),this.clusterIcon_.show()}}}class s{constructor(t,e,i){t.getMarkerClusterer().extend(s,google.maps.OverlayView),this.styles_=e,this.padding_=i||0,this.cluster_=t,this.center_=null,this.map_=t.getMap(),this.div_=null,this.sums_=null,this.visible_=!1,this.setMap(this.map_)}triggerClusterClick(){var t=this.cluster_.getBounds(),e=this.cluster_.getMarkerClusterer();google.maps.event.trigger(e.map_,"clusterclick",this.cluster_),e.isZoomOnClick()&&(this.map_.fitBounds(t),this.map_.setCenter(t.getCenter()))}onAdd(){if(this.div_=document.createElement("DIV"),this.visible_){var t=this.getPosFromLatLng_(this.center_);this.div_.style.cssText=this.createCss(t),this.div_.innerHTML=this.sums_.text}this.getPanes().overlayMouseTarget.appendChild(this.div_);var e=this;google.maps.event.addDomListener(this.div_,"click",(function(){e.triggerClusterClick()}))}getPosFromLatLng_(t){var e=this.getProjection().fromLatLngToDivPixel(t);return e.x-=parseInt(this.width_/2,10),e.y-=parseInt(this.height_/2,10),e}draw(){if(this.visible_){var t=this.getPosFromLatLng_(this.center_);this.div_.style.top=t.y+"px",this.div_.style.left=t.x+"px",this.div_.style.zIndex=google.maps.Marker.MAX_ZINDEX+1}}hide(){this.div_&&(this.div_.style.display="none"),this.visible_=!1}show(){if(this.div_){var t=this.getPosFromLatLng_(this.center_);this.div_.style.cssText=this.createCss(t),this.div_.style.display=""}this.visible_=!0}remove(){this.setMap(null)}onRemove(){this.div_&&this.div_.parentNode&&(this.hide(),this.div_.parentNode.removeChild(this.div_),this.div_=null)}setSums(t){this.sums_=t,this.text_=t.text,this.index_=t.index,this.div_&&(this.div_.innerHTML=t.text),this.useStyle()}useStyle(){var t=Math.max(0,this.sums_.index-1);t=Math.min(this.styles_.length-1,t);var e=this.styles_[t];this.url_=e.url,this.height_=e.height,this.width_=e.width,this.textColor_=e.textColor,this.anchor_=e.anchor,this.textSize_=e.textSize,this.backgroundPosition_=e.backgroundPosition}setCenter(t){this.center_=t}createCss(t){var e=[];e.push("background-image:url("+this.url_+");");var s=this.backgroundPosition_?this.backgroundPosition_:"0 0";e.push("background-position:"+s+";"),"object"==typeof this.anchor_?("number"==typeof this.anchor_[0]&&this.anchor_[0]>0&&this.anchor_[0]<this.height_?e.push("height:"+(this.height_-this.anchor_[0])+"px; padding-top:"+this.anchor_[0]+"px;"):e.push("height:"+this.height_+"px; line-height:"+this.height_+"px;"),"number"==typeof this.anchor_[1]&&this.anchor_[1]>0&&this.anchor_[1]<this.width_?e.push("width:"+(this.width_-this.anchor_[1])+"px; padding-left:"+this.anchor_[1]+"px;"):e.push("width:"+this.width_+"px; text-align:center;")):e.push("height:"+this.height_+"px; line-height:"+this.height_+"px; width:"+this.width_+"px; text-align:center;");var i=this.textColor_?this.textColor_:"black",r=this.textSize_?this.textSize_:11;return e.push("cursor:pointer; top:"+t.y+"px; left:"+t.x+"px; color:"+i+"; position:absolute; font-size:"+r+"px; font-family:Arial,sans-serif; font-weight:bold"),e.join("")}}return t}(); | ||
var MarkerClusterer=function(){"use strict";class t{constructor(e,s,i){this.extend(t,google.maps.OverlayView),this.map_=e,this.MARKER_CLUSTER_IMAGE_PATH_="../images/m",this.MARKER_CLUSTER_IMAGE_EXTENSION_="png",this.markers_=[],this.clusters_=[],this.sizes=[53,56,66,78,90],this.styles_=[],this.ready_=!1;var r=i||{};this.gridSize_=r.gridSize||60,this.minClusterSize_=r.minimumClusterSize||2,this.maxZoom_=r.maxZoom||null,this.styles_=r.styles||[],this.imagePath_=r.imagePath||this.MARKER_CLUSTER_IMAGE_PATH_,this.imageExtension_=r.imageExtension||this.MARKER_CLUSTER_IMAGE_EXTENSION_,this.zoomOnClick_=!0,null!=r.zoomOnClick&&(this.zoomOnClick_=r.zoomOnClick),this.averageCenter_=!1,null!=r.averageCenter&&(this.averageCenter_=r.averageCenter),this.setupStyles_(),this.setMap(e),this.prevZoom_=this.map_.getZoom();var h=this;google.maps.event.addListener(this.map_,"zoom_changed",(function(){var t=h.map_.getZoom(),e=h.map_.minZoom||0,s=Math.min(h.map_.maxZoom||100,h.map_.mapTypes[h.map_.getMapTypeId()].maxZoom);t=Math.min(Math.max(t,e),s),h.prevZoom_!=t&&(h.prevZoom_=t,h.resetViewport())})),google.maps.event.addListener(this.map_,"idle",(function(){h.redraw()})),s&&(s.length||Object.keys(s).length)&&this.addMarkers(s,!1)}extend(t,e){return function(t){for(var e in t.prototype)this.prototype[e]=t.prototype[e];return this}.apply(t,[e])}onAdd(){this.setReady_(!0)}draw(){}setupStyles_(){if(!this.styles_.length)for(var t,e=0;t=this.sizes[e];e++)this.styles_.push({url:this.imagePath_+(e+1)+"."+this.imageExtension_,height:t,width:t})}fitMapToMarkers(){for(var t,e=this.getMarkers(),s=new google.maps.LatLngBounds,i=0;t=e[i];i++)s.extend(t.getPosition());this.map_.fitBounds(s)}setStyles(t){this.styles_=t}getStyles(){return this.styles_}isZoomOnClick(){return this.zoomOnClick_}isAverageCenter(){return this.averageCenter_}getMarkers(){return this.markers_}getTotalMarkers(){return this.markers_.length}setMaxZoom(t){this.maxZoom_=t}getMaxZoom(){return this.maxZoom_}calculator_(t,e){for(var s=0,i=t.length,r=i;0!==r;)r=parseInt(r/10,10),s++;return{text:i,index:s=Math.min(s,e)}}setCalculator(t){this.calculator_=t}getCalculator(){return this.calculator_}addMarkers(t,e){if(t.length)for(let e,s=0;e=t[s];s++)this.pushMarkerTo_(e);else if(Object.keys(t).length)for(let e in t)this.pushMarkerTo_(t[e]);e||this.redraw()}pushMarkerTo_(t){if(t.isAdded=!1,t.draggable){var e=this;google.maps.event.addListener(t,"dragend",(function(){t.isAdded=!1,e.repaint()}))}this.markers_.push(t)}addMarker(t,e){this.pushMarkerTo_(t),e||this.redraw()}removeMarker_(t){var e=-1;if(this.markers_.indexOf)e=this.markers_.indexOf(t);else for(var s,i=0;s=this.markers_[i];i++)if(s==t){e=i;break}return-1!=e&&(t.setMap(null),this.markers_.splice(e,1),!0)}removeMarker(t,e){var s=this.removeMarker_(t);return!(e||!s)&&(this.resetViewport(),this.redraw(),!0)}removeMarkers(t,e){for(var s,i=t===this.getMarkers()?t.slice():t,r=!1,h=0;s=i[h];h++){var a=this.removeMarker_(s);r=r||a}if(!e&&r)return this.resetViewport(),this.redraw(),!0}setReady_(t){this.ready_||(this.ready_=t,this.createClusters_())}getTotalClusters(){return this.clusters_.length}getMap(){return this.map_}setMap(t){this.map_=t}getGridSize(){return this.gridSize_}setGridSize(t){this.gridSize_=t}getMinClusterSize(){return this.minClusterSize_}setMinClusterSize(t){this.minClusterSize_=t}getExtendedBounds(t){var e=this.getProjection(),s=new google.maps.LatLng(t.getNorthEast().lat(),t.getNorthEast().lng()),i=new google.maps.LatLng(t.getSouthWest().lat(),t.getSouthWest().lng()),r=e.fromLatLngToDivPixel(s);r.x+=this.gridSize_,r.y-=this.gridSize_;var h=e.fromLatLngToDivPixel(i);h.x-=this.gridSize_,h.y+=this.gridSize_;var a=e.fromDivPixelToLatLng(r),n=e.fromDivPixelToLatLng(h);return t.extend(a),t.extend(n),t}isMarkerInBounds_(t,e){return e.contains(t.getPosition())}clearMarkers(){this.resetViewport(!0),this.markers_=[]}resetViewport(t){for(let t,e=0;t=this.clusters_[e];e++)t.remove();for(let e,s=0;e=this.markers_[s];s++)e.isAdded=!1,t&&e.setMap(null);this.clusters_=[]}repaint(){var t=this.clusters_.slice();this.clusters_.length=0,this.resetViewport(),this.redraw(),setTimeout((function(){for(var e,s=0;e=t[s];s++)e.remove()}),0)}redraw(){this.createClusters_()}distanceBetweenPoints_(t,e){if(!t||!e)return 0;var s=(e.lat()-t.lat())*Math.PI/180,i=(e.lng()-t.lng())*Math.PI/180,r=Math.sin(s/2)*Math.sin(s/2)+Math.cos(t.lat()*Math.PI/180)*Math.cos(e.lat()*Math.PI/180)*Math.sin(i/2)*Math.sin(i/2);return 6371*(2*Math.atan2(Math.sqrt(r),Math.sqrt(1-r)))}addToClosestCluster_(t){for(var s,i=4e4,r=null,h=0;s=this.clusters_[h];h++){var a=s.getCenter();if(a){var n=this.distanceBetweenPoints_(a,t.getPosition());n<i&&(i=n,r=s)}}if(r&&r.isMarkerInClusterBounds(t))r.addMarker(t);else{var o=new e(this);o.addMarker(t),this.clusters_.push(o)}}createClusters_(){if(this.ready_)for(var t,e=new google.maps.LatLngBounds(this.map_.getBounds().getSouthWest(),this.map_.getBounds().getNorthEast()),s=this.getExtendedBounds(e),i=0;t=this.markers_[i];i++)!t.isAdded&&this.isMarkerInBounds_(t,s)&&this.addToClosestCluster_(t)}}class e{constructor(t){this.markerClusterer_=t,this.map_=t.getMap(),this.gridSize_=t.getGridSize(),this.minClusterSize_=t.getMinClusterSize(),this.averageCenter_=t.isAverageCenter(),this.center_=null,this.markers_=[],this.bounds_=null,this.clusterIcon_=new s(this,t.getStyles(),t.getGridSize())}isMarkerAlreadyAdded(t){if(this.markers_.indexOf)return-1!=this.markers_.indexOf(t);for(var e,s=0;e=this.markers_[s];s++)if(e==t)return!0;return!1}addMarker(t){if(this.isMarkerAlreadyAdded(t))return!1;if(this.center_){if(this.averageCenter_){var e=this.markers_.length+1,s=(this.center_.lat()*(e-1)+t.getPosition().lat())/e,i=(this.center_.lng()*(e-1)+t.getPosition().lng())/e;this.center_=new google.maps.LatLng(s,i),this.calculateBounds_()}}else this.center_=t.getPosition(),this.calculateBounds_();t.isAdded=!0,this.markers_.push(t);var r=this.markers_.length;if(r<this.minClusterSize_&&t.getMap()!=this.map_&&t.setMap(this.map_),r==this.minClusterSize_)for(var h=0;h<r;h++)this.markers_[h].setMap(null);return r>=this.minClusterSize_&&t.setMap(null),this.updateIcon(),!0}getMarkerClusterer(){return this.markerClusterer_}getBounds(){for(var t,e=new google.maps.LatLngBounds(this.center_,this.center_),s=this.getMarkers(),i=0;t=s[i];i++)e.extend(t.getPosition());return e}remove(){this.clusterIcon_.remove(),this.markers_.length=0,delete this.markers_}getSize(){return this.markers_.length}getMarkers(){return this.markers_}getCenter(){return this.center_}calculateBounds_(){var t=new google.maps.LatLngBounds(this.center_,this.center_);this.bounds_=this.markerClusterer_.getExtendedBounds(t)}isMarkerInClusterBounds(t){return this.bounds_.contains(t.getPosition())}getMap(){return this.map_}updateIcon(){var t=this.map_.getZoom(),e=this.markerClusterer_.getMaxZoom();if(e&&t>e)for(var s,i=0;s=this.markers_[i];i++)s.setMap(this.map_);else if(this.markers_.length<this.minClusterSize_)this.clusterIcon_.hide();else{var r=this.markerClusterer_.getStyles().length,h=this.markerClusterer_.getCalculator()(this.markers_,r);this.clusterIcon_.setCenter(this.center_),this.clusterIcon_.setSums(h),this.clusterIcon_.show()}}}class s{constructor(t,e,i){t.getMarkerClusterer().extend(s,google.maps.OverlayView),this.styles_=e,this.padding_=i||0,this.cluster_=t,this.center_=null,this.map_=t.getMap(),this.div_=null,this.sums_=null,this.visible_=!1,this.setMap(this.map_)}triggerClusterClick(){var t=this.cluster_.getBounds(),e=this.cluster_.getMarkerClusterer();google.maps.event.trigger(e.map_,"clusterclick",this.cluster_),e.isZoomOnClick()&&(this.map_.fitBounds(t),this.map_.setCenter(t.getCenter()))}onAdd(){if(this.div_=document.createElement("DIV"),this.visible_){var t=this.getPosFromLatLng_(this.center_);this.div_.style.cssText=this.createCss(t),this.div_.innerHTML=this.sums_.text}this.getPanes().overlayMouseTarget.appendChild(this.div_);var e=this;google.maps.event.addDomListener(this.div_,"click",(function(){e.triggerClusterClick()}))}getPosFromLatLng_(t){var e=this.getProjection().fromLatLngToDivPixel(t);return e.x-=parseInt(this.width_/2,10),e.y-=parseInt(this.height_/2,10),e}draw(){if(this.visible_){var t=this.getPosFromLatLng_(this.center_);this.div_.style.top=t.y+"px",this.div_.style.left=t.x+"px",this.div_.style.zIndex=google.maps.Marker.MAX_ZINDEX+1}}hide(){this.div_&&(this.div_.style.display="none"),this.visible_=!1}show(){if(this.div_){var t=this.getPosFromLatLng_(this.center_);this.div_.style.cssText=this.createCss(t),this.div_.style.display=""}this.visible_=!0}remove(){this.setMap(null)}onRemove(){this.div_&&this.div_.parentNode&&(this.hide(),this.div_.parentNode.removeChild(this.div_),this.div_=null)}setSums(t){this.sums_=t,this.text_=t.text,this.index_=t.index,this.div_&&(this.div_.innerHTML=t.text),this.useStyle()}useStyle(){var t=Math.max(0,this.sums_.index-1);t=Math.min(this.styles_.length-1,t);var e=this.styles_[t];this.url_=e.url,this.height_=e.height,this.width_=e.width,this.textColor_=e.textColor,this.anchor_=e.anchor,this.textSize_=e.textSize,this.backgroundPosition_=e.backgroundPosition}setCenter(t){this.center_=t}createCss(t){var e=[];e.push("background-image:url("+this.url_+");");var s=this.backgroundPosition_?this.backgroundPosition_:"0 0";e.push("background-position:"+s+";"),"object"==typeof this.anchor_?("number"==typeof this.anchor_[0]&&this.anchor_[0]>0&&this.anchor_[0]<this.height_?e.push("height:"+(this.height_-this.anchor_[0])+"px; padding-top:"+this.anchor_[0]+"px;"):e.push("height:"+this.height_+"px; line-height:"+this.height_+"px;"),"number"==typeof this.anchor_[1]&&this.anchor_[1]>0&&this.anchor_[1]<this.width_?e.push("width:"+(this.width_-this.anchor_[1])+"px; padding-left:"+this.anchor_[1]+"px;"):e.push("width:"+this.width_+"px; text-align:center;")):e.push("height:"+this.height_+"px; line-height:"+this.height_+"px; width:"+this.width_+"px; text-align:center;");var i=this.textColor_?this.textColor_:"black",r=this.textSize_?this.textSize_:11;return e.push("cursor:pointer; top:"+t.y+"px; left:"+t.x+"px; color:"+i+"; position:absolute; font-size:"+r+"px; font-family:Arial,sans-serif; font-weight:bold"),e.join("")}}return t}(); |
@@ -1,15 +0,1 @@ | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).MarkerClusterer=e()}(this,(function(){"use strict"; | ||
/** | ||
* @license | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/class t{constructor(e,s,i){this.extend(t,google.maps.OverlayView),this.map_=e,this.MARKER_CLUSTER_IMAGE_PATH_="../images/m",this.MARKER_CLUSTER_IMAGE_EXTENSION_="png",this.markers_=[],this.clusters_=[],this.sizes=[53,56,66,78,90],this.styles_=[],this.ready_=!1;var r=i||{};this.gridSize_=r.gridSize||60,this.minClusterSize_=r.minimumClusterSize||2,this.maxZoom_=r.maxZoom||null,this.styles_=r.styles||[],this.imagePath_=r.imagePath||this.MARKER_CLUSTER_IMAGE_PATH_,this.imageExtension_=r.imageExtension||this.MARKER_CLUSTER_IMAGE_EXTENSION_,this.zoomOnClick_=!0,null!=r.zoomOnClick&&(this.zoomOnClick_=r.zoomOnClick),this.averageCenter_=!1,null!=r.averageCenter&&(this.averageCenter_=r.averageCenter),this.setupStyles_(),this.setMap(e),this.prevZoom_=this.map_.getZoom();var h=this;google.maps.event.addListener(this.map_,"zoom_changed",(function(){var t=h.map_.getZoom(),e=h.map_.minZoom||0,s=Math.min(h.map_.maxZoom||100,h.map_.mapTypes[h.map_.getMapTypeId()].maxZoom);t=Math.min(Math.max(t,e),s),h.prevZoom_!=t&&(h.prevZoom_=t,h.resetViewport())})),google.maps.event.addListener(this.map_,"idle",(function(){h.redraw()})),s&&(s.length||Object.keys(s).length)&&this.addMarkers(s,!1)}extend(t,e){return function(t){for(var e in t.prototype)this.prototype[e]=t.prototype[e];return this}.apply(t,[e])}onAdd(){this.setReady_(!0)}draw(){}setupStyles_(){if(!this.styles_.length)for(var t,e=0;t=this.sizes[e];e++)this.styles_.push({url:this.imagePath_+(e+1)+"."+this.imageExtension_,height:t,width:t})}fitMapToMarkers(){for(var t,e=this.getMarkers(),s=new google.maps.LatLngBounds,i=0;t=e[i];i++)s.extend(t.getPosition());this.map_.fitBounds(s)}setStyles(t){this.styles_=t}getStyles(){return this.styles_}isZoomOnClick(){return this.zoomOnClick_}isAverageCenter(){return this.averageCenter_}getMarkers(){return this.markers_}getTotalMarkers(){return this.markers_.length}setMaxZoom(t){this.maxZoom_=t}getMaxZoom(){return this.maxZoom_}calculator_(t,e){for(var s=0,i=t.length,r=i;0!==r;)r=parseInt(r/10,10),s++;return{text:i,index:s=Math.min(s,e)}}setCalculator(t){this.calculator_=t}getCalculator(){return this.calculator_}addMarkers(t,e){if(t.length)for(var s=0;i=t[s];s++)this.pushMarkerTo_(i);else if(Object.keys(t).length)for(var i in t)this.pushMarkerTo_(t[i]);e||this.redraw()}pushMarkerTo_(t){if(t.isAdded=!1,t.draggable){var e=this;google.maps.event.addListener(t,"dragend",(function(){t.isAdded=!1,e.repaint()}))}this.markers_.push(t)}addMarker(t,e){this.pushMarkerTo_(t),e||this.redraw()}removeMarker_(t){var e=-1;if(this.markers_.indexOf)e=this.markers_.indexOf(t);else for(var s,i=0;s=this.markers_[i];i++)if(s==t){e=i;break}return-1!=e&&(t.setMap(null),this.markers_.splice(e,1),!0)}removeMarker(t,e){var s=this.removeMarker_(t);return!(e||!s)&&(this.resetViewport(),this.redraw(),!0)}removeMarkers(t,e){for(var s,i=t===this.getMarkers()?t.slice():t,r=!1,h=0;s=i[h];h++){var a=this.removeMarker_(s);r=r||a}if(!e&&r)return this.resetViewport(),this.redraw(),!0}setReady_(t){this.ready_||(this.ready_=t,this.createClusters_())}getTotalClusters(){return this.clusters_.length}getMap(){return this.map_}setMap(t){this.map_=t}getGridSize(){return this.gridSize_}setGridSize(t){this.gridSize_=t}getMinClusterSize(){return this.minClusterSize_}setMinClusterSize(t){this.minClusterSize_=t}getExtendedBounds(t){var e=this.getProjection(),s=new google.maps.LatLng(t.getNorthEast().lat(),t.getNorthEast().lng()),i=new google.maps.LatLng(t.getSouthWest().lat(),t.getSouthWest().lng()),r=e.fromLatLngToDivPixel(s);r.x+=this.gridSize_,r.y-=this.gridSize_;var h=e.fromLatLngToDivPixel(i);h.x-=this.gridSize_,h.y+=this.gridSize_;var a=e.fromDivPixelToLatLng(r),n=e.fromDivPixelToLatLng(h);return t.extend(a),t.extend(n),t}isMarkerInBounds_(t,e){return e.contains(t.getPosition())}clearMarkers(){this.resetViewport(!0),this.markers_=[]}resetViewport(t){for(var e,s=0;e=this.clusters_[s];s++)e.remove();var i;for(s=0;i=this.markers_[s];s++)i.isAdded=!1,t&&i.setMap(null);this.clusters_=[]}repaint(){var t=this.clusters_.slice();this.clusters_.length=0,this.resetViewport(),this.redraw(),setTimeout((function(){for(var e,s=0;e=t[s];s++)e.remove()}),0)}redraw(){this.createClusters_()}distanceBetweenPoints_(t,e){if(!t||!e)return 0;var s=(e.lat()-t.lat())*Math.PI/180,i=(e.lng()-t.lng())*Math.PI/180,r=Math.sin(s/2)*Math.sin(s/2)+Math.cos(t.lat()*Math.PI/180)*Math.cos(e.lat()*Math.PI/180)*Math.sin(i/2)*Math.sin(i/2);return 6371*(2*Math.atan2(Math.sqrt(r),Math.sqrt(1-r)))}addToClosestCluster_(t){for(var s,i=4e4,r=null,h=(t.getPosition(),0);s=this.clusters_[h];h++){var a=s.getCenter();if(a){var n=this.distanceBetweenPoints_(a,t.getPosition());n<i&&(i=n,r=s)}}r&&r.isMarkerInClusterBounds(t)?r.addMarker(t):((s=new e(this)).addMarker(t),this.clusters_.push(s))}createClusters_(){if(this.ready_)for(var t,e=new google.maps.LatLngBounds(this.map_.getBounds().getSouthWest(),this.map_.getBounds().getNorthEast()),s=this.getExtendedBounds(e),i=0;t=this.markers_[i];i++)!t.isAdded&&this.isMarkerInBounds_(t,s)&&this.addToClosestCluster_(t)}}class e{constructor(t){this.markerClusterer_=t,this.map_=t.getMap(),this.gridSize_=t.getGridSize(),this.minClusterSize_=t.getMinClusterSize(),this.averageCenter_=t.isAverageCenter(),this.center_=null,this.markers_=[],this.bounds_=null,this.clusterIcon_=new s(this,t.getStyles(),t.getGridSize())}isMarkerAlreadyAdded(t){if(this.markers_.indexOf)return-1!=this.markers_.indexOf(t);for(var e,s=0;e=this.markers_[s];s++)if(e==t)return!0;return!1}addMarker(t){if(this.isMarkerAlreadyAdded(t))return!1;if(this.center_){if(this.averageCenter_){var e=this.markers_.length+1,s=(this.center_.lat()*(e-1)+t.getPosition().lat())/e,i=(this.center_.lng()*(e-1)+t.getPosition().lng())/e;this.center_=new google.maps.LatLng(s,i),this.calculateBounds_()}}else this.center_=t.getPosition(),this.calculateBounds_();t.isAdded=!0,this.markers_.push(t);var r=this.markers_.length;if(r<this.minClusterSize_&&t.getMap()!=this.map_&&t.setMap(this.map_),r==this.minClusterSize_)for(var h=0;h<r;h++)this.markers_[h].setMap(null);return r>=this.minClusterSize_&&t.setMap(null),this.updateIcon(),!0}getMarkerClusterer(){return this.markerClusterer_}getBounds(){for(var t,e=new google.maps.LatLngBounds(this.center_,this.center_),s=this.getMarkers(),i=0;t=s[i];i++)e.extend(t.getPosition());return e}remove(){this.clusterIcon_.remove(),this.markers_.length=0,delete this.markers_}getSize(){return this.markers_.length}getMarkers(){return this.markers_}getCenter(){return this.center_}calculateBounds_(){var t=new google.maps.LatLngBounds(this.center_,this.center_);this.bounds_=this.markerClusterer_.getExtendedBounds(t)}isMarkerInClusterBounds(t){return this.bounds_.contains(t.getPosition())}getMap(){return this.map_}updateIcon(){var t=this.map_.getZoom(),e=this.markerClusterer_.getMaxZoom();if(e&&t>e)for(var s,i=0;s=this.markers_[i];i++)s.setMap(this.map_);else if(this.markers_.length<this.minClusterSize_)this.clusterIcon_.hide();else{var r=this.markerClusterer_.getStyles().length,h=this.markerClusterer_.getCalculator()(this.markers_,r);this.clusterIcon_.setCenter(this.center_),this.clusterIcon_.setSums(h),this.clusterIcon_.show()}}}class s{constructor(t,e,i){t.getMarkerClusterer().extend(s,google.maps.OverlayView),this.styles_=e,this.padding_=i||0,this.cluster_=t,this.center_=null,this.map_=t.getMap(),this.div_=null,this.sums_=null,this.visible_=!1,this.setMap(this.map_)}triggerClusterClick(){var t=this.cluster_.getBounds(),e=this.cluster_.getMarkerClusterer();google.maps.event.trigger(e.map_,"clusterclick",this.cluster_),e.isZoomOnClick()&&(this.map_.fitBounds(t),this.map_.setCenter(t.getCenter()))}onAdd(){if(this.div_=document.createElement("DIV"),this.visible_){var t=this.getPosFromLatLng_(this.center_);this.div_.style.cssText=this.createCss(t),this.div_.innerHTML=this.sums_.text}this.getPanes().overlayMouseTarget.appendChild(this.div_);var e=this;google.maps.event.addDomListener(this.div_,"click",(function(){e.triggerClusterClick()}))}getPosFromLatLng_(t){var e=this.getProjection().fromLatLngToDivPixel(t);return e.x-=parseInt(this.width_/2,10),e.y-=parseInt(this.height_/2,10),e}draw(){if(this.visible_){var t=this.getPosFromLatLng_(this.center_);this.div_.style.top=t.y+"px",this.div_.style.left=t.x+"px",this.div_.style.zIndex=google.maps.Marker.MAX_ZINDEX+1}}hide(){this.div_&&(this.div_.style.display="none"),this.visible_=!1}show(){if(this.div_){var t=this.getPosFromLatLng_(this.center_);this.div_.style.cssText=this.createCss(t),this.div_.style.display=""}this.visible_=!0}remove(){this.setMap(null)}onRemove(){this.div_&&this.div_.parentNode&&(this.hide(),this.div_.parentNode.removeChild(this.div_),this.div_=null)}setSums(t){this.sums_=t,this.text_=t.text,this.index_=t.index,this.div_&&(this.div_.innerHTML=t.text),this.useStyle()}useStyle(){var t=Math.max(0,this.sums_.index-1);t=Math.min(this.styles_.length-1,t);var e=this.styles_[t];this.url_=e.url,this.height_=e.height,this.width_=e.width,this.textColor_=e.textColor,this.anchor_=e.anchor,this.textSize_=e.textSize,this.backgroundPosition_=e.backgroundPosition}setCenter(t){this.center_=t}createCss(t){var e=[];e.push("background-image:url("+this.url_+");");var s=this.backgroundPosition_?this.backgroundPosition_:"0 0";e.push("background-position:"+s+";"),"object"==typeof this.anchor_?("number"==typeof this.anchor_[0]&&this.anchor_[0]>0&&this.anchor_[0]<this.height_?e.push("height:"+(this.height_-this.anchor_[0])+"px; padding-top:"+this.anchor_[0]+"px;"):e.push("height:"+this.height_+"px; line-height:"+this.height_+"px;"),"number"==typeof this.anchor_[1]&&this.anchor_[1]>0&&this.anchor_[1]<this.width_?e.push("width:"+(this.width_-this.anchor_[1])+"px; padding-left:"+this.anchor_[1]+"px;"):e.push("width:"+this.width_+"px; text-align:center;")):e.push("height:"+this.height_+"px; line-height:"+this.height_+"px; width:"+this.width_+"px; text-align:center;");var i=this.textColor_?this.textColor_:"black",r=this.textSize_?this.textSize_:11;return e.push("cursor:pointer; top:"+t.y+"px; left:"+t.x+"px; color:"+i+"; position:absolute; font-size:"+r+"px; font-family:Arial,sans-serif; font-weight:bold"),e.join("")}}return t})); | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).MarkerClusterer=e()}(this,(function(){"use strict";class t{constructor(e,s,i){this.extend(t,google.maps.OverlayView),this.map_=e,this.MARKER_CLUSTER_IMAGE_PATH_="../images/m",this.MARKER_CLUSTER_IMAGE_EXTENSION_="png",this.markers_=[],this.clusters_=[],this.sizes=[53,56,66,78,90],this.styles_=[],this.ready_=!1;var r=i||{};this.gridSize_=r.gridSize||60,this.minClusterSize_=r.minimumClusterSize||2,this.maxZoom_=r.maxZoom||null,this.styles_=r.styles||[],this.imagePath_=r.imagePath||this.MARKER_CLUSTER_IMAGE_PATH_,this.imageExtension_=r.imageExtension||this.MARKER_CLUSTER_IMAGE_EXTENSION_,this.zoomOnClick_=!0,null!=r.zoomOnClick&&(this.zoomOnClick_=r.zoomOnClick),this.averageCenter_=!1,null!=r.averageCenter&&(this.averageCenter_=r.averageCenter),this.setupStyles_(),this.setMap(e),this.prevZoom_=this.map_.getZoom();var h=this;google.maps.event.addListener(this.map_,"zoom_changed",(function(){var t=h.map_.getZoom(),e=h.map_.minZoom||0,s=Math.min(h.map_.maxZoom||100,h.map_.mapTypes[h.map_.getMapTypeId()].maxZoom);t=Math.min(Math.max(t,e),s),h.prevZoom_!=t&&(h.prevZoom_=t,h.resetViewport())})),google.maps.event.addListener(this.map_,"idle",(function(){h.redraw()})),s&&(s.length||Object.keys(s).length)&&this.addMarkers(s,!1)}extend(t,e){return function(t){for(var e in t.prototype)this.prototype[e]=t.prototype[e];return this}.apply(t,[e])}onAdd(){this.setReady_(!0)}draw(){}setupStyles_(){if(!this.styles_.length)for(var t,e=0;t=this.sizes[e];e++)this.styles_.push({url:this.imagePath_+(e+1)+"."+this.imageExtension_,height:t,width:t})}fitMapToMarkers(){for(var t,e=this.getMarkers(),s=new google.maps.LatLngBounds,i=0;t=e[i];i++)s.extend(t.getPosition());this.map_.fitBounds(s)}setStyles(t){this.styles_=t}getStyles(){return this.styles_}isZoomOnClick(){return this.zoomOnClick_}isAverageCenter(){return this.averageCenter_}getMarkers(){return this.markers_}getTotalMarkers(){return this.markers_.length}setMaxZoom(t){this.maxZoom_=t}getMaxZoom(){return this.maxZoom_}calculator_(t,e){for(var s=0,i=t.length,r=i;0!==r;)r=parseInt(r/10,10),s++;return{text:i,index:s=Math.min(s,e)}}setCalculator(t){this.calculator_=t}getCalculator(){return this.calculator_}addMarkers(t,e){if(t.length)for(let e,s=0;e=t[s];s++)this.pushMarkerTo_(e);else if(Object.keys(t).length)for(let e in t)this.pushMarkerTo_(t[e]);e||this.redraw()}pushMarkerTo_(t){if(t.isAdded=!1,t.draggable){var e=this;google.maps.event.addListener(t,"dragend",(function(){t.isAdded=!1,e.repaint()}))}this.markers_.push(t)}addMarker(t,e){this.pushMarkerTo_(t),e||this.redraw()}removeMarker_(t){var e=-1;if(this.markers_.indexOf)e=this.markers_.indexOf(t);else for(var s,i=0;s=this.markers_[i];i++)if(s==t){e=i;break}return-1!=e&&(t.setMap(null),this.markers_.splice(e,1),!0)}removeMarker(t,e){var s=this.removeMarker_(t);return!(e||!s)&&(this.resetViewport(),this.redraw(),!0)}removeMarkers(t,e){for(var s,i=t===this.getMarkers()?t.slice():t,r=!1,h=0;s=i[h];h++){var a=this.removeMarker_(s);r=r||a}if(!e&&r)return this.resetViewport(),this.redraw(),!0}setReady_(t){this.ready_||(this.ready_=t,this.createClusters_())}getTotalClusters(){return this.clusters_.length}getMap(){return this.map_}setMap(t){this.map_=t}getGridSize(){return this.gridSize_}setGridSize(t){this.gridSize_=t}getMinClusterSize(){return this.minClusterSize_}setMinClusterSize(t){this.minClusterSize_=t}getExtendedBounds(t){var e=this.getProjection(),s=new google.maps.LatLng(t.getNorthEast().lat(),t.getNorthEast().lng()),i=new google.maps.LatLng(t.getSouthWest().lat(),t.getSouthWest().lng()),r=e.fromLatLngToDivPixel(s);r.x+=this.gridSize_,r.y-=this.gridSize_;var h=e.fromLatLngToDivPixel(i);h.x-=this.gridSize_,h.y+=this.gridSize_;var a=e.fromDivPixelToLatLng(r),n=e.fromDivPixelToLatLng(h);return t.extend(a),t.extend(n),t}isMarkerInBounds_(t,e){return e.contains(t.getPosition())}clearMarkers(){this.resetViewport(!0),this.markers_=[]}resetViewport(t){for(let t,e=0;t=this.clusters_[e];e++)t.remove();for(let e,s=0;e=this.markers_[s];s++)e.isAdded=!1,t&&e.setMap(null);this.clusters_=[]}repaint(){var t=this.clusters_.slice();this.clusters_.length=0,this.resetViewport(),this.redraw(),setTimeout((function(){for(var e,s=0;e=t[s];s++)e.remove()}),0)}redraw(){this.createClusters_()}distanceBetweenPoints_(t,e){if(!t||!e)return 0;var s=(e.lat()-t.lat())*Math.PI/180,i=(e.lng()-t.lng())*Math.PI/180,r=Math.sin(s/2)*Math.sin(s/2)+Math.cos(t.lat()*Math.PI/180)*Math.cos(e.lat()*Math.PI/180)*Math.sin(i/2)*Math.sin(i/2);return 6371*(2*Math.atan2(Math.sqrt(r),Math.sqrt(1-r)))}addToClosestCluster_(t){for(var s,i=4e4,r=null,h=0;s=this.clusters_[h];h++){var a=s.getCenter();if(a){var n=this.distanceBetweenPoints_(a,t.getPosition());n<i&&(i=n,r=s)}}if(r&&r.isMarkerInClusterBounds(t))r.addMarker(t);else{var o=new e(this);o.addMarker(t),this.clusters_.push(o)}}createClusters_(){if(this.ready_)for(var t,e=new google.maps.LatLngBounds(this.map_.getBounds().getSouthWest(),this.map_.getBounds().getNorthEast()),s=this.getExtendedBounds(e),i=0;t=this.markers_[i];i++)!t.isAdded&&this.isMarkerInBounds_(t,s)&&this.addToClosestCluster_(t)}}class e{constructor(t){this.markerClusterer_=t,this.map_=t.getMap(),this.gridSize_=t.getGridSize(),this.minClusterSize_=t.getMinClusterSize(),this.averageCenter_=t.isAverageCenter(),this.center_=null,this.markers_=[],this.bounds_=null,this.clusterIcon_=new s(this,t.getStyles(),t.getGridSize())}isMarkerAlreadyAdded(t){if(this.markers_.indexOf)return-1!=this.markers_.indexOf(t);for(var e,s=0;e=this.markers_[s];s++)if(e==t)return!0;return!1}addMarker(t){if(this.isMarkerAlreadyAdded(t))return!1;if(this.center_){if(this.averageCenter_){var e=this.markers_.length+1,s=(this.center_.lat()*(e-1)+t.getPosition().lat())/e,i=(this.center_.lng()*(e-1)+t.getPosition().lng())/e;this.center_=new google.maps.LatLng(s,i),this.calculateBounds_()}}else this.center_=t.getPosition(),this.calculateBounds_();t.isAdded=!0,this.markers_.push(t);var r=this.markers_.length;if(r<this.minClusterSize_&&t.getMap()!=this.map_&&t.setMap(this.map_),r==this.minClusterSize_)for(var h=0;h<r;h++)this.markers_[h].setMap(null);return r>=this.minClusterSize_&&t.setMap(null),this.updateIcon(),!0}getMarkerClusterer(){return this.markerClusterer_}getBounds(){for(var t,e=new google.maps.LatLngBounds(this.center_,this.center_),s=this.getMarkers(),i=0;t=s[i];i++)e.extend(t.getPosition());return e}remove(){this.clusterIcon_.remove(),this.markers_.length=0,delete this.markers_}getSize(){return this.markers_.length}getMarkers(){return this.markers_}getCenter(){return this.center_}calculateBounds_(){var t=new google.maps.LatLngBounds(this.center_,this.center_);this.bounds_=this.markerClusterer_.getExtendedBounds(t)}isMarkerInClusterBounds(t){return this.bounds_.contains(t.getPosition())}getMap(){return this.map_}updateIcon(){var t=this.map_.getZoom(),e=this.markerClusterer_.getMaxZoom();if(e&&t>e)for(var s,i=0;s=this.markers_[i];i++)s.setMap(this.map_);else if(this.markers_.length<this.minClusterSize_)this.clusterIcon_.hide();else{var r=this.markerClusterer_.getStyles().length,h=this.markerClusterer_.getCalculator()(this.markers_,r);this.clusterIcon_.setCenter(this.center_),this.clusterIcon_.setSums(h),this.clusterIcon_.show()}}}class s{constructor(t,e,i){t.getMarkerClusterer().extend(s,google.maps.OverlayView),this.styles_=e,this.padding_=i||0,this.cluster_=t,this.center_=null,this.map_=t.getMap(),this.div_=null,this.sums_=null,this.visible_=!1,this.setMap(this.map_)}triggerClusterClick(){var t=this.cluster_.getBounds(),e=this.cluster_.getMarkerClusterer();google.maps.event.trigger(e.map_,"clusterclick",this.cluster_),e.isZoomOnClick()&&(this.map_.fitBounds(t),this.map_.setCenter(t.getCenter()))}onAdd(){if(this.div_=document.createElement("DIV"),this.visible_){var t=this.getPosFromLatLng_(this.center_);this.div_.style.cssText=this.createCss(t),this.div_.innerHTML=this.sums_.text}this.getPanes().overlayMouseTarget.appendChild(this.div_);var e=this;google.maps.event.addDomListener(this.div_,"click",(function(){e.triggerClusterClick()}))}getPosFromLatLng_(t){var e=this.getProjection().fromLatLngToDivPixel(t);return e.x-=parseInt(this.width_/2,10),e.y-=parseInt(this.height_/2,10),e}draw(){if(this.visible_){var t=this.getPosFromLatLng_(this.center_);this.div_.style.top=t.y+"px",this.div_.style.left=t.x+"px",this.div_.style.zIndex=google.maps.Marker.MAX_ZINDEX+1}}hide(){this.div_&&(this.div_.style.display="none"),this.visible_=!1}show(){if(this.div_){var t=this.getPosFromLatLng_(this.center_);this.div_.style.cssText=this.createCss(t),this.div_.style.display=""}this.visible_=!0}remove(){this.setMap(null)}onRemove(){this.div_&&this.div_.parentNode&&(this.hide(),this.div_.parentNode.removeChild(this.div_),this.div_=null)}setSums(t){this.sums_=t,this.text_=t.text,this.index_=t.index,this.div_&&(this.div_.innerHTML=t.text),this.useStyle()}useStyle(){var t=Math.max(0,this.sums_.index-1);t=Math.min(this.styles_.length-1,t);var e=this.styles_[t];this.url_=e.url,this.height_=e.height,this.width_=e.width,this.textColor_=e.textColor,this.anchor_=e.anchor,this.textSize_=e.textSize,this.backgroundPosition_=e.backgroundPosition}setCenter(t){this.center_=t}createCss(t){var e=[];e.push("background-image:url("+this.url_+");");var s=this.backgroundPosition_?this.backgroundPosition_:"0 0";e.push("background-position:"+s+";"),"object"==typeof this.anchor_?("number"==typeof this.anchor_[0]&&this.anchor_[0]>0&&this.anchor_[0]<this.height_?e.push("height:"+(this.height_-this.anchor_[0])+"px; padding-top:"+this.anchor_[0]+"px;"):e.push("height:"+this.height_+"px; line-height:"+this.height_+"px;"),"number"==typeof this.anchor_[1]&&this.anchor_[1]>0&&this.anchor_[1]<this.width_?e.push("width:"+(this.width_-this.anchor_[1])+"px; padding-left:"+this.anchor_[1]+"px;"):e.push("width:"+this.width_+"px; text-align:center;")):e.push("height:"+this.height_+"px; line-height:"+this.height_+"px; width:"+this.width_+"px; text-align:center;");var i=this.textColor_?this.textColor_:"black",r=this.textSize_?this.textSize_:11;return e.push("cursor:pointer; top:"+t.y+"px; left:"+t.x+"px; color:"+i+"; position:absolute; font-size:"+r+"px; font-family:Arial,sans-serif; font-weight:bold"),e.join("")}}return t})); |
{ | ||
"name": "@google/markerclusterer", | ||
"version": "2.0.0", | ||
"version": "2.0.1", | ||
"description": "The library creates and manages per-zoom-level clusters for large amounts of markers.", | ||
@@ -29,4 +29,5 @@ "keywords": [ | ||
"scripts": { | ||
"prepare": "rollup --config", | ||
"lint": "exit 0" | ||
"format": "sort-package-json && prettier *.json *.js src/* examples/* --write", | ||
"lint": "eslint src/*", | ||
"prepare": "rollup -c" | ||
}, | ||
@@ -33,0 +34,0 @@ "publishConfig": { |
/** | ||
* @name MarkerClusterer for Google Maps v3 | ||
* @author Luke Mahe | ||
* @fileoverview | ||
* The library creates and manages per-zoom-level clusters for large amounts of | ||
* markers. | ||
*/ | ||
/** | ||
* @license | ||
* Copyright 2019 Google LLC. All Rights Reserved. | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
@@ -15,3 +8,3 @@ * you may not use this file except in compliance with the License. | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
@@ -25,2 +18,9 @@ * Unless required by applicable law or agreed to in writing, software | ||
/** | ||
* @name MarkerClusterer for Google Maps v3 | ||
* @author Luke Mahe | ||
* @fileoverview | ||
* The library creates and manages per-zoom-level clusters for large amounts of | ||
* markers. | ||
*/ | ||
@@ -63,4 +63,2 @@ /** | ||
class MarkerClusterer { | ||
@@ -70,3 +68,3 @@ constructor(map, opt_markers, opt_options) { | ||
this.map_ = map; | ||
/** | ||
@@ -78,5 +76,4 @@ * The marker cluster image path. | ||
*/ | ||
this.MARKER_CLUSTER_IMAGE_PATH_ = '../images/m'; | ||
this.MARKER_CLUSTER_IMAGE_PATH_ = "../images/m"; | ||
/** | ||
@@ -88,7 +85,7 @@ * The marker cluster image path. | ||
*/ | ||
this.MARKER_CLUSTER_IMAGE_EXTENSION_ = 'png'; | ||
this.MARKER_CLUSTER_IMAGE_EXTENSION_ = "png"; | ||
/** | ||
* @type {Array.<google.maps.Marker>} | ||
* @private | ||
*/ | ||
* @type {Array.<google.maps.Marker>} | ||
* @private | ||
*/ | ||
this.markers_ = []; | ||
@@ -120,3 +117,3 @@ | ||
*/ | ||
this.gridSize_ = options['gridSize'] || 60; | ||
this.gridSize_ = options["gridSize"] || 60; | ||
@@ -126,5 +123,4 @@ /** | ||
*/ | ||
this.minClusterSize_ = options['minimumClusterSize'] || 2; | ||
this.minClusterSize_ = options["minimumClusterSize"] || 2; | ||
/** | ||
@@ -134,5 +130,5 @@ * @type {?number} | ||
*/ | ||
this.maxZoom_ = options['maxZoom'] || null; | ||
this.maxZoom_ = options["maxZoom"] || null; | ||
this.styles_ = options['styles'] || []; | ||
this.styles_ = options["styles"] || []; | ||
@@ -143,4 +139,3 @@ /** | ||
*/ | ||
this.imagePath_ = options['imagePath'] || | ||
this.MARKER_CLUSTER_IMAGE_PATH_; | ||
this.imagePath_ = options["imagePath"] || this.MARKER_CLUSTER_IMAGE_PATH_; | ||
@@ -151,4 +146,4 @@ /** | ||
*/ | ||
this.imageExtension_ = options['imageExtension'] || | ||
this.MARKER_CLUSTER_IMAGE_EXTENSION_; | ||
this.imageExtension_ = | ||
options["imageExtension"] || this.MARKER_CLUSTER_IMAGE_EXTENSION_; | ||
@@ -161,4 +156,4 @@ /** | ||
if (options['zoomOnClick'] != undefined) { | ||
this.zoomOnClick_ = options['zoomOnClick']; | ||
if (options["zoomOnClick"] != undefined) { | ||
this.zoomOnClick_ = options["zoomOnClick"]; | ||
} | ||
@@ -172,4 +167,4 @@ | ||
if (options['averageCenter'] != undefined) { | ||
this.averageCenter_ = options['averageCenter']; | ||
if (options["averageCenter"] != undefined) { | ||
this.averageCenter_ = options["averageCenter"]; | ||
} | ||
@@ -189,8 +184,10 @@ | ||
var that = this; | ||
google.maps.event.addListener(this.map_, 'zoom_changed', function () { | ||
google.maps.event.addListener(this.map_, "zoom_changed", function() { | ||
// Determines map type and prevent illegal zoom levels | ||
var zoom = that.map_.getZoom(); | ||
var minZoom = that.map_.minZoom || 0; | ||
var maxZoom = Math.min(that.map_.maxZoom || 100, | ||
that.map_.mapTypes[that.map_.getMapTypeId()].maxZoom); | ||
var maxZoom = Math.min( | ||
that.map_.maxZoom || 100, | ||
that.map_.mapTypes[that.map_.getMapTypeId()].maxZoom | ||
); | ||
zoom = Math.min(Math.max(zoom, minZoom), maxZoom); | ||
@@ -204,3 +201,3 @@ | ||
google.maps.event.addListener(this.map_, 'idle', function () { | ||
google.maps.event.addListener(this.map_, "idle", function() { | ||
that.redraw(); | ||
@@ -210,3 +207,6 @@ }); | ||
// Finally, add the markers | ||
if (opt_markers && (opt_markers.length || Object.keys(opt_markers).length)) { | ||
if ( | ||
opt_markers && | ||
(opt_markers.length || Object.keys(opt_markers).length) | ||
) { | ||
this.addMarkers(opt_markers, false); | ||
@@ -216,4 +216,2 @@ } | ||
/** | ||
@@ -228,3 +226,3 @@ * Extends a objects prototype by anothers. | ||
extend(obj1, obj2) { | ||
return (function (object) { | ||
return function(object) { | ||
for (var property in object.prototype) { | ||
@@ -234,7 +232,5 @@ this.prototype[property] = object.prototype[property]; | ||
return this; | ||
}).apply(obj1, [obj2]); | ||
}.apply(obj1, [obj2]); | ||
} | ||
/** | ||
@@ -246,3 +242,3 @@ * Implementaion of the interface method. | ||
this.setReady_(true); | ||
}; | ||
} | ||
@@ -253,3 +249,3 @@ /** | ||
*/ | ||
draw() { }; | ||
draw() {} | ||
@@ -266,5 +262,5 @@ /** | ||
for (var i = 0, size; size = this.sizes[i]; i++) { | ||
for (var i = 0, size; (size = this.sizes[i]); i++) { | ||
this.styles_.push({ | ||
url: this.imagePath_ + (i + 1) + '.' + this.imageExtension_, | ||
url: this.imagePath_ + (i + 1) + "." + this.imageExtension_, | ||
height: size, | ||
@@ -282,3 +278,3 @@ width: size | ||
var bounds = new google.maps.LatLngBounds(); | ||
for (var i = 0, marker; marker = markers[i]; i++) { | ||
for (var i = 0, marker; (marker = markers[i]); i++) { | ||
bounds.extend(marker.getPosition()); | ||
@@ -290,3 +286,2 @@ } | ||
/** | ||
@@ -301,3 +296,2 @@ * Sets the styles. | ||
/** | ||
@@ -312,3 +306,2 @@ * Gets the styles. | ||
/** | ||
@@ -332,3 +325,2 @@ * Whether zoom on click is set. | ||
/** | ||
@@ -343,3 +335,2 @@ * Returns the array of markers in the clusterer. | ||
/** | ||
@@ -354,3 +345,2 @@ * Returns the number of markers in the clusterer | ||
/** | ||
@@ -365,3 +355,2 @@ * Sets the max zoom for the clusterer. | ||
/** | ||
@@ -376,3 +365,2 @@ * Gets the max zoom for the clusterer. | ||
/** | ||
@@ -402,3 +390,2 @@ * The function for calculating the cluster icon image. | ||
/** | ||
@@ -416,3 +403,2 @@ * Set the calculator function. | ||
/** | ||
@@ -427,3 +413,2 @@ * Get the calculator function. | ||
/** | ||
@@ -437,7 +422,7 @@ * Add an array of markers to the clusterer. | ||
if (markers.length) { | ||
for (var i = 0, marker; marker = markers[i]; i++) { | ||
for (let i = 0, marker; (marker = markers[i]); i++) { | ||
this.pushMarkerTo_(marker); | ||
} | ||
} else if (Object.keys(markers).length) { | ||
for (var marker in markers) { | ||
for (let marker in markers) { | ||
this.pushMarkerTo_(markers[marker]); | ||
@@ -451,3 +436,2 @@ } | ||
/** | ||
@@ -461,7 +445,7 @@ * Pushes a marker to the clusterer. | ||
marker.isAdded = false; | ||
if (marker['draggable']) { | ||
if (marker["draggable"]) { | ||
// If the marker is draggable add a listener so we update the clusters on | ||
// the drag end. | ||
var that = this; | ||
google.maps.event.addListener(marker, 'dragend', function () { | ||
google.maps.event.addListener(marker, "dragend", function() { | ||
marker.isAdded = false; | ||
@@ -474,3 +458,2 @@ that.repaint(); | ||
/** | ||
@@ -489,3 +472,2 @@ * Adds a marker to the clusterer and redraws if needed. | ||
/** | ||
@@ -503,3 +485,3 @@ * Removes a marker and returns true if removed, false if not | ||
} else { | ||
for (var i = 0, m; m = this.markers_[i]; i++) { | ||
for (var i = 0, m; (m = this.markers_[i]); i++) { | ||
if (m == marker) { | ||
@@ -524,3 +506,2 @@ index = i; | ||
/** | ||
@@ -545,3 +526,2 @@ * Remove a marker from the cluster. | ||
/** | ||
@@ -559,3 +539,3 @@ * Removes an array of markers from the cluster. | ||
for (var i = 0, marker; marker = markersCopy[i]; i++) { | ||
for (var i = 0, marker; (marker = markersCopy[i]); i++) { | ||
var r = this.removeMarker_(marker); | ||
@@ -572,3 +552,2 @@ removed = removed || r; | ||
/** | ||
@@ -587,3 +566,2 @@ * Sets the clusterer's ready state. | ||
/** | ||
@@ -598,3 +576,2 @@ * Returns the number of clusters in the clusterer. | ||
/** | ||
@@ -609,3 +586,2 @@ * Returns the google map that the clusterer is associated with. | ||
/** | ||
@@ -620,3 +596,2 @@ * Sets the google map that the clusterer is associated with. | ||
/** | ||
@@ -631,3 +606,2 @@ * Returns the size of the grid. | ||
/** | ||
@@ -642,3 +616,2 @@ * Sets the size of the grid. | ||
/** | ||
@@ -662,3 +635,2 @@ * Returns the min cluster size. | ||
/** | ||
@@ -674,6 +646,10 @@ * Extends a bounds object by the grid size. | ||
// Turn the bounds into latlng. | ||
var tr = new google.maps.LatLng(bounds.getNorthEast().lat(), | ||
bounds.getNorthEast().lng()); | ||
var bl = new google.maps.LatLng(bounds.getSouthWest().lat(), | ||
bounds.getSouthWest().lng()); | ||
var tr = new google.maps.LatLng( | ||
bounds.getNorthEast().lat(), | ||
bounds.getNorthEast().lng() | ||
); | ||
var bl = new google.maps.LatLng( | ||
bounds.getSouthWest().lat(), | ||
bounds.getSouthWest().lng() | ||
); | ||
@@ -700,3 +676,2 @@ // Convert the points to pixels and the extend out by the grid size. | ||
/** | ||
@@ -714,3 +689,2 @@ * Determins if a marker is contained in a bounds. | ||
/** | ||
@@ -726,3 +700,2 @@ * Clears all clusters and markers from the clusterer. | ||
/** | ||
@@ -734,3 +707,3 @@ * Clears all existing clusters and recreates them. | ||
// Remove all the clusters | ||
for (var i = 0, cluster; cluster = this.clusters_[i]; i++) { | ||
for (let i = 0, cluster; (cluster = this.clusters_[i]); i++) { | ||
cluster.remove(); | ||
@@ -740,3 +713,3 @@ } | ||
// Reset the markers to not be added and to be invisible. | ||
for (var i = 0, marker; marker = this.markers_[i]; i++) { | ||
for (let i = 0, marker; (marker = this.markers_[i]); i++) { | ||
marker.isAdded = false; | ||
@@ -762,4 +735,4 @@ if (opt_hide) { | ||
// Do it in a timeout so the other clusters have been drawn first. | ||
setTimeout(function () { | ||
for (var i = 0, cluster; cluster = oldClusters[i]; i++) { | ||
setTimeout(function() { | ||
for (var i = 0, cluster; (cluster = oldClusters[i]); i++) { | ||
cluster.remove(); | ||
@@ -770,3 +743,2 @@ } | ||
/** | ||
@@ -779,3 +751,2 @@ * Redraws the clusters. | ||
/** | ||
@@ -789,3 +760,3 @@ * Calculates the distance between two latlng locations in km. | ||
* @private | ||
*/ | ||
*/ | ||
distanceBetweenPoints_(p1, p2) { | ||
@@ -797,7 +768,10 @@ if (!p1 || !p2) { | ||
var R = 6371; // Radius of the Earth in km | ||
var dLat = (p2.lat() - p1.lat()) * Math.PI / 180; | ||
var dLon = (p2.lng() - p1.lng()) * Math.PI / 180; | ||
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + | ||
Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) * | ||
Math.sin(dLon / 2) * Math.sin(dLon / 2); | ||
var dLat = ((p2.lat() - p1.lat()) * Math.PI) / 180; | ||
var dLon = ((p2.lng() - p1.lng()) * Math.PI) / 180; | ||
var a = | ||
Math.sin(dLat / 2) * Math.sin(dLat / 2) + | ||
Math.cos((p1.lat() * Math.PI) / 180) * | ||
Math.cos((p2.lat() * Math.PI) / 180) * | ||
Math.sin(dLon / 2) * | ||
Math.sin(dLon / 2); | ||
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); | ||
@@ -808,3 +782,2 @@ var d = R * c; | ||
/** | ||
@@ -819,4 +792,3 @@ * Add a marker to a cluster, or creates a new cluster. | ||
var clusterToAddTo = null; | ||
var pos = marker.getPosition(); | ||
for (var i = 0, cluster; cluster = this.clusters_[i]; i++) { | ||
for (var i = 0, cluster; (cluster = this.clusters_[i]); i++) { | ||
var center = cluster.getCenter(); | ||
@@ -835,9 +807,8 @@ if (center) { | ||
} else { | ||
var cluster = new Cluster(this); | ||
cluster.addMarker(marker); | ||
this.clusters_.push(cluster); | ||
var newCluster = new Cluster(this); | ||
newCluster.addMarker(marker); | ||
this.clusters_.push(newCluster); | ||
} | ||
} | ||
/** | ||
@@ -855,7 +826,9 @@ * Creates the clusters. | ||
// Create a new bounds object so we don't affect the map. | ||
var mapBounds = new google.maps.LatLngBounds(this.map_.getBounds().getSouthWest(), | ||
this.map_.getBounds().getNorthEast()); | ||
var mapBounds = new google.maps.LatLngBounds( | ||
this.map_.getBounds().getSouthWest(), | ||
this.map_.getBounds().getNorthEast() | ||
); | ||
var bounds = this.getExtendedBounds(mapBounds); | ||
for (var i = 0, marker; marker = this.markers_[i]; i++) { | ||
for (var i = 0, marker; (marker = this.markers_[i]); i++) { | ||
if (!marker.isAdded && this.isMarkerInBounds_(marker, bounds)) { | ||
@@ -886,4 +859,7 @@ this.addToClosestCluster_(marker); | ||
this.bounds_ = null; | ||
this.clusterIcon_ = new ClusterIcon(this, markerClusterer.getStyles(), | ||
markerClusterer.getGridSize()); | ||
this.clusterIcon_ = new ClusterIcon( | ||
this, | ||
markerClusterer.getStyles(), | ||
markerClusterer.getGridSize() | ||
); | ||
} | ||
@@ -901,3 +877,3 @@ | ||
} else { | ||
for (var i = 0, m; m = this.markers_[i]; i++) { | ||
for (var i = 0, m; (m = this.markers_[i]); i++) { | ||
if (m == marker) { | ||
@@ -911,3 +887,2 @@ return true; | ||
/** | ||
@@ -930,4 +905,6 @@ * Add a marker the cluster. | ||
var l = this.markers_.length + 1; | ||
var lat = (this.center_.lat() * (l - 1) + marker.getPosition().lat()) / l; | ||
var lng = (this.center_.lng() * (l - 1) + marker.getPosition().lng()) / l; | ||
var lat = | ||
(this.center_.lat() * (l - 1) + marker.getPosition().lat()) / l; | ||
var lng = | ||
(this.center_.lng() * (l - 1) + marker.getPosition().lng()) / l; | ||
this.center_ = new google.maps.LatLng(lat, lng); | ||
@@ -962,3 +939,2 @@ this.calculateBounds_(); | ||
/** | ||
@@ -973,3 +949,2 @@ * Returns the marker clusterer that the cluster is associated with. | ||
/** | ||
@@ -983,3 +958,3 @@ * Returns the bounds of the cluster. | ||
var markers = this.getMarkers(); | ||
for (var i = 0, marker; marker = markers[i]; i++) { | ||
for (var i = 0, marker; (marker = markers[i]); i++) { | ||
bounds.extend(marker.getPosition()); | ||
@@ -990,3 +965,2 @@ } | ||
/** | ||
@@ -1001,3 +975,2 @@ * Removes the cluster | ||
/** | ||
@@ -1012,3 +985,2 @@ * Returns the number of markers in the cluster. | ||
/** | ||
@@ -1023,3 +995,2 @@ * Returns a list of the markers in the cluster. | ||
/** | ||
@@ -1034,3 +1005,2 @@ * Returns the center of the cluster. | ||
/** | ||
@@ -1046,3 +1016,2 @@ * Calculated the extended bounds of the cluster with the grid. | ||
/** | ||
@@ -1058,3 +1027,2 @@ * Determines if a marker lies in the clusters bounds. | ||
/** | ||
@@ -1069,3 +1037,2 @@ * Returns the map that the cluster is associated with. | ||
/** | ||
@@ -1080,3 +1047,3 @@ * Updates the cluster icon | ||
// The zoom is greater than our max zoom so show all the markers in cluster. | ||
for (var i = 0, marker; marker = this.markers_[i]; i++) { | ||
for (var i = 0, marker; (marker = this.markers_[i]); i++) { | ||
marker.setMap(this.map_); | ||
@@ -1134,3 +1101,2 @@ } | ||
/** | ||
@@ -1144,3 +1110,7 @@ * Triggers the clusterclick event and zoom's if the option is set. | ||
// Trigger the clusterclick event. | ||
google.maps.event.trigger(markerClusterer.map_, 'clusterclick', this.cluster_); | ||
google.maps.event.trigger( | ||
markerClusterer.map_, | ||
"clusterclick", | ||
this.cluster_ | ||
); | ||
@@ -1152,5 +1122,4 @@ if (markerClusterer.isZoomOnClick()) { | ||
} | ||
}; | ||
} | ||
/** | ||
@@ -1161,3 +1130,3 @@ * Adding the cluster icon to the dom. | ||
onAdd() { | ||
this.div_ = document.createElement('DIV'); | ||
this.div_ = document.createElement("DIV"); | ||
if (this.visible_) { | ||
@@ -1173,8 +1142,7 @@ var pos = this.getPosFromLatLng_(this.center_); | ||
var that = this; | ||
google.maps.event.addDomListener(this.div_, 'click', function () { | ||
google.maps.event.addDomListener(this.div_, "click", function() { | ||
that.triggerClusterClick(); | ||
}); | ||
}; | ||
} | ||
/** | ||
@@ -1192,5 +1160,4 @@ * Returns the position to place the div dending on the latlng. | ||
return pos; | ||
}; | ||
} | ||
/** | ||
@@ -1203,9 +1170,8 @@ * Draw the icon. | ||
var pos = this.getPosFromLatLng_(this.center_); | ||
this.div_.style.top = pos.y + 'px'; | ||
this.div_.style.left = pos.x + 'px'; | ||
this.div_.style.top = pos.y + "px"; | ||
this.div_.style.left = pos.x + "px"; | ||
this.div_.style.zIndex = google.maps.Marker.MAX_ZINDEX + 1; | ||
} | ||
}; | ||
} | ||
/** | ||
@@ -1216,8 +1182,7 @@ * Hide the icon. | ||
if (this.div_) { | ||
this.div_.style.display = 'none'; | ||
this.div_.style.display = "none"; | ||
} | ||
this.visible_ = false; | ||
}; | ||
} | ||
/** | ||
@@ -1230,8 +1195,7 @@ * Position and show the icon. | ||
this.div_.style.cssText = this.createCss(pos); | ||
this.div_.style.display = ''; | ||
this.div_.style.display = ""; | ||
} | ||
this.visible_ = true; | ||
}; | ||
} | ||
/** | ||
@@ -1242,5 +1206,4 @@ * Remove the icon from the map | ||
this.setMap(null); | ||
}; | ||
} | ||
/** | ||
@@ -1256,5 +1219,4 @@ * Implementation of the onRemove interface. | ||
} | ||
}; | ||
} | ||
/** | ||
@@ -1276,5 +1238,4 @@ * Set the sums of the icon. | ||
this.useStyle(); | ||
}; | ||
} | ||
/** | ||
@@ -1287,12 +1248,11 @@ * Sets the icon to the the styles. | ||
var style = this.styles_[index]; | ||
this.url_ = style['url']; | ||
this.height_ = style['height']; | ||
this.width_ = style['width']; | ||
this.textColor_ = style['textColor']; | ||
this.anchor_ = style['anchor']; | ||
this.textSize_ = style['textSize']; | ||
this.backgroundPosition_ = style['backgroundPosition']; | ||
}; | ||
this.url_ = style["url"]; | ||
this.height_ = style["height"]; | ||
this.width_ = style["width"]; | ||
this.textColor_ = style["textColor"]; | ||
this.anchor_ = style["anchor"]; | ||
this.textSize_ = style["textSize"]; | ||
this.backgroundPosition_ = style["backgroundPosition"]; | ||
} | ||
/** | ||
@@ -1305,5 +1265,4 @@ * Sets the center of the icon. | ||
this.center_ = center; | ||
}; | ||
} | ||
/** | ||
@@ -1317,37 +1276,71 @@ * Create the css text based on the position of the icon. | ||
var style = []; | ||
style.push('background-image:url(' + this.url_ + ');'); | ||
var backgroundPosition = this.backgroundPosition_ ? this.backgroundPosition_ : '0 0'; | ||
style.push('background-position:' + backgroundPosition + ';'); | ||
style.push("background-image:url(" + this.url_ + ");"); | ||
var backgroundPosition = this.backgroundPosition_ | ||
? this.backgroundPosition_ | ||
: "0 0"; | ||
style.push("background-position:" + backgroundPosition + ";"); | ||
if (typeof this.anchor_ === 'object') { | ||
if (typeof this.anchor_[0] === 'number' && this.anchor_[0] > 0 && | ||
this.anchor_[0] < this.height_) { | ||
style.push('height:' + (this.height_ - this.anchor_[0]) + | ||
'px; padding-top:' + this.anchor_[0] + 'px;'); | ||
if (typeof this.anchor_ === "object") { | ||
if ( | ||
typeof this.anchor_[0] === "number" && | ||
this.anchor_[0] > 0 && | ||
this.anchor_[0] < this.height_ | ||
) { | ||
style.push( | ||
"height:" + | ||
(this.height_ - this.anchor_[0]) + | ||
"px; padding-top:" + | ||
this.anchor_[0] + | ||
"px;" | ||
); | ||
} else { | ||
style.push('height:' + this.height_ + 'px; line-height:' + this.height_ + | ||
'px;'); | ||
style.push( | ||
"height:" + this.height_ + "px; line-height:" + this.height_ + "px;" | ||
); | ||
} | ||
if (typeof this.anchor_[1] === 'number' && this.anchor_[1] > 0 && | ||
this.anchor_[1] < this.width_) { | ||
style.push('width:' + (this.width_ - this.anchor_[1]) + | ||
'px; padding-left:' + this.anchor_[1] + 'px;'); | ||
if ( | ||
typeof this.anchor_[1] === "number" && | ||
this.anchor_[1] > 0 && | ||
this.anchor_[1] < this.width_ | ||
) { | ||
style.push( | ||
"width:" + | ||
(this.width_ - this.anchor_[1]) + | ||
"px; padding-left:" + | ||
this.anchor_[1] + | ||
"px;" | ||
); | ||
} else { | ||
style.push('width:' + this.width_ + 'px; text-align:center;'); | ||
style.push("width:" + this.width_ + "px; text-align:center;"); | ||
} | ||
} else { | ||
style.push('height:' + this.height_ + 'px; line-height:' + | ||
this.height_ + 'px; width:' + this.width_ + 'px; text-align:center;'); | ||
style.push( | ||
"height:" + | ||
this.height_ + | ||
"px; line-height:" + | ||
this.height_ + | ||
"px; width:" + | ||
this.width_ + | ||
"px; text-align:center;" | ||
); | ||
} | ||
var txtColor = this.textColor_ ? this.textColor_ : 'black'; | ||
var txtColor = this.textColor_ ? this.textColor_ : "black"; | ||
var txtSize = this.textSize_ ? this.textSize_ : 11; | ||
style.push('cursor:pointer; top:' + pos.y + 'px; left:' + | ||
pos.x + 'px; color:' + txtColor + '; position:absolute; font-size:' + | ||
txtSize + 'px; font-family:Arial,sans-serif; font-weight:bold'); | ||
return style.join(''); | ||
style.push( | ||
"cursor:pointer; top:" + | ||
pos.y + | ||
"px; left:" + | ||
pos.x + | ||
"px; color:" + | ||
txtColor + | ||
"; position:absolute; font-size:" + | ||
txtSize + | ||
"px; font-family:Arial,sans-serif; font-weight:bold" | ||
); | ||
return style.join(""); | ||
} | ||
} | ||
export default MarkerClusterer; | ||
export default MarkerClusterer; |
2306
84227