@react-google-maps/marker-clusterer
Version:
Marker Clusterer for React.js Google Maps API
3 lines (2 loc) • 14.5 kB
JavaScript
"use strict";var t=function(){function t(e,i){e.getClusterer().extend(t,google.maps.OverlayView),this.cluster=e,this.className=this.cluster.getClusterer().getClusterClass(),this.styles=i,this.center=void 0,this.div=null,this.sums=null,this.visible=!1,this.boundsChangedListener=null,this.url="",this.height=0,this.width=0,this.anchorText=[0,0],this.anchorIcon=[0,0],this.textColor="black",this.textSize=11,this.textDecoration="none",this.fontWeight="bold",this.fontStyle="normal",this.fontFamily="Arial,sans-serif",this.backgroundPosition="0 0",this.setMap(e.getMap())}var e=t.prototype;return e.onAdd=function(){var t,e,i=this;this.div=document.createElement("div"),this.div.className=this.className,this.visible&&this.show(),this.getPanes().overlayMouseTarget.appendChild(this.div),this.boundsChangedListener=google.maps.event.addListener(this.getMap(),"boundschanged",function(){e=t}),google.maps.event.addDomListener(this.div,"mousedown",function(){t=!0,e=!1}),google.maps.event.addDomListener(this.div,"click",function(s){if(t=!1,!e){var r=i.cluster.getClusterer();if(google.maps.event.trigger(r,"click",i.cluster),google.maps.event.trigger(r,"clusterclick",i.cluster),r.getZoomOnClick()){var n=r.getMaxZoom(),o=i.cluster.getBounds();r.getMap().fitBounds(o),setTimeout(function(){r.getMap().fitBounds(o),null!==n&&r.getMap().getZoom()>n&&r.getMap().setZoom(n+1)},100)}s.cancelBubble=!0,s.stopPropagation&&s.stopPropagation()}}),google.maps.event.addDomListener(this.div,"mouseover",function(){google.maps.event.trigger(i.cluster.getClusterer(),"mouseover",i.cluster)}),google.maps.event.addDomListener(this.div,"mouseout",function(){google.maps.event.trigger(i.cluster.getClusterer(),"mouseout",i.cluster)})},e.onRemove=function(){this.div&&this.div.parentNode&&(this.hide(),null!==this.boundsChangedListener&&google.maps.event.removeListener(this.boundsChangedListener),google.maps.event.clearInstanceListeners(this.div),this.div.parentNode.removeChild(this.div),this.div=null)},e.draw=function(){if(this.visible&&null!==this.div&&this.center){var t=this.getPosFromLatLng(this.center),e=t.x;this.div.style.top=t.y+"px",this.div.style.left=e+"px"}},e.hide=function(){this.div&&(this.div.style.display="none"),this.visible=!1},e.show=function(){if(this.div&&this.center){var t="",e=this.backgroundPosition.split(" "),i=parseInt(e[0].replace(/^\s+|\s+$/g,""),10),s=parseInt(e[1].replace(/^\s+|\s+$/g,""),10),r=this.getPosFromLatLng(this.center);this.div.style.cssText=this.createCss(r),t="<img src='"+this.url+"' style='position: absolute; top: "+s+"px; left: "+i+"px; ",this.cluster.getClusterer().enableRetinaIcons||(t+="clip: rect("+-1*s+"px, "+(-1*i+this.width)+"px, "+(-1*s+this.height)+"px, "+-1*i+"px);"),this.div.innerHTML=(t+="'>")+"<div style='position: absolute;top: "+this.anchorText[0]+"px;left: "+this.anchorText[1]+"px;color: "+this.textColor+";font-size: "+this.textSize+"px;font-family: "+this.fontFamily+";font-weight: "+this.fontWeight+";font-style: "+this.fontStyle+";text-decoration: "+this.textDecoration+";text-align: center;width: "+this.width+"px;line-height:"+this.height+"px;'>"+this.sums.text+"</div>",this.div.title=void 0===this.sums.title||""===this.sums.title?this.cluster.getClusterer().getTitle():this.sums.title,this.div.style.display=""}this.visible=!0},e.useStyle=function(t){this.sums=t;var e=this.styles[Math.min(this.styles.length-1,Math.max(0,t.index-1))];this.url=e.url,this.height=e.height,this.width=e.width,this.anchorText=e.anchorText||[0,0],this.anchorIcon=e.anchorIcon||[this.height/2,this.width/2],this.textColor=e.textColor||"black",this.textSize=e.textSize||11,this.textDecoration=e.textDecoration||"none",this.fontWeight=e.fontWeight||"bold",this.fontStyle=e.fontStyle||"normal",this.fontFamily=e.fontFamily||"Arial,sans-serif",this.backgroundPosition=e.backgroundPosition||"0 0"},e.setCenter=function(t){this.center=t},e.createCss=function(t){var e=[];return e.push("cursor: pointer;"),e.push("position: absolute; top: "+t.y+"px; left: "+t.x+"px;"),e.push("width: "+this.width+"px; height: "+this.height+"px;"),e.join("")},e.getPosFromLatLng=function(t){var e=this.getProjection().fromLatLngToDivPixel(t);return e.x-=this.anchorIcon[1],e.y-=this.anchorIcon[0],e.x=e.x,e.y=e.y,e},t}(),e=function(){function e(e){this.markerClusterer=e,this.map=this.markerClusterer.getMap(),this.gridSize=this.markerClusterer.getGridSize(),this.minClusterSize=this.markerClusterer.getMinimumClusterSize(),this.averageCenter=this.markerClusterer.getAverageCenter(),this.markers=[],this.center=void 0,this.bounds=null,this.clusterIcon=new t(this,this.markerClusterer.getStyles())}var i=e.prototype;return i.getSize=function(){return this.markers.length},i.getMarkers=function(){return this.markers},i.getCenter=function(){return this.center},i.getMap=function(){return this.map},i.getClusterer=function(){return this.markerClusterer},i.getBounds=function(){for(var t=new google.maps.LatLngBounds(this.center,this.center),e=this.getMarkers(),i=0;i<e.length;i++){var s=e[i].getPosition();s&&t.extend(s)}return t},i.remove=function(){this.clusterIcon.setMap(null),this.markers=[],delete this.markers},i.addMarker=function(t){if(this.isMarkerAlreadyAdded(t))return!1;if(this.center){if(this.averageCenter){var e=t.getPosition();if(e){var i=this.markers.length+1;this.center=new google.maps.LatLng((this.center.lat()*(i-1)+e.lat())/i,(this.center.lng()*(i-1)+e.lng())/i),this.calculateBounds()}}}else{var s=t.getPosition();s&&(this.center=s,this.calculateBounds())}t.isAdded=!0,this.markers.push(t);var r=this.markers.length,n=this.markerClusterer.getMaxZoom();if(null!==n&&this.map.getZoom()>n)t.getMap()!==this.map&&t.setMap(this.map);else if(r<this.minClusterSize)t.getMap()!==this.map&&t.setMap(this.map);else if(r===this.minClusterSize)for(var o=0;o<r;o++)this.markers[o].setMap(null);else t.setMap(null);return this.updateIcon(),!0},i.isMarkerInClusterBounds=function(t){if(null!==this.bounds){var e=t.getPosition();if(e)return this.bounds.contains(e)}return!1},i.calculateBounds=function(){this.bounds=this.markerClusterer.getExtendedBounds(new google.maps.LatLngBounds(this.center,this.center))},i.updateIcon=function(){var t=this.markers.length,e=this.markerClusterer.getMaxZoom();null!==e&&this.map.getZoom()>e?this.clusterIcon.hide():t<this.minClusterSize?this.clusterIcon.hide():(this.center&&this.clusterIcon.setCenter(this.center),this.clusterIcon.useStyle(this.markerClusterer.getCalculator()(this.markers,this.markerClusterer.getStyles().length)),this.clusterIcon.show())},i.isMarkerAlreadyAdded=function(t){if(this.markers.indexOf)return this.markers.includes(t);for(var e=0;e<this.markers.length;e++)if(t===this.markers[e])return!0;return!1},e}(),i=function(t,e){for(var i=0,s=t.length.toString(),r=s;0!==r;)r=parseInt(r,10)/10,i++;return{text:s,index:i=Math.min(i,e),title:""}},s=2e3,r=500,n="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",o="png",a=[53,56,66,78,90],h="cluster",l=function(){function t(e,l,u){void 0===l&&(l=[]),void 0===u&&(u={}),this.extend(t,google.maps.OverlayView),this.markers=[],this.clusters=[],this.listeners=[],this.activeMap=null,this.ready=!1,this.gridSize=u.gridSize||60,this.minClusterSize=u.minimumClusterSize||2,this.maxZoom=u.maxZoom||null,this.styles=u.styles||[],this.title=u.title||"",this.zoomOnClick=!0,void 0!==u.zoomOnClick&&(this.zoomOnClick=u.zoomOnClick),this.averageCenter=!1,void 0!==u.averageCenter&&(this.averageCenter=u.averageCenter),this.ignoreHidden=!1,void 0!==u.ignoreHidden&&(this.ignoreHidden=u.ignoreHidden),this.enableRetinaIcons=!1,void 0!==u.enableRetinaIcons&&(this.enableRetinaIcons=u.enableRetinaIcons),this.imagePath=u.imagePath||n,this.imageExtension=u.imageExtension||o,this.imageSizes=u.imageSizes||a,this.calculator=u.calculator||i,this.batchSize=u.batchSize||s,this.batchSizeIE=u.batchSizeIE||r,this.clusterClass=u.clusterClass||h,-1!==navigator.userAgent.toLowerCase().indexOf("msie")&&(this.batchSize=this.batchSizeIE),this.timerRefStatic=null,this.setupStyles(),this.addMarkers(l,!0),this.setMap(e)}var l=t.prototype;return l.onAdd=function(){var t=this;this.activeMap=this.getMap(),this.ready=!0,this.repaint(),this.listeners=[google.maps.event.addListener(this.getMap(),"zoom_changed",function(){t.resetViewport(!1),t.getMap().getZoom()!==(t.get("minZoom")||0)&&t.getMap().getZoom()!==t.get("maxZoom")||google.maps.event.trigger(t,"idle")}),google.maps.event.addListener(this.getMap(),"idle",function(){t.redraw()})]},l.onRemove=function(){for(var t=0;t<this.markers.length;t++)this.markers[t].getMap()!==this.activeMap&&this.markers[t].setMap(this.activeMap);for(var e=0;e<this.clusters.length;e++)this.clusters[e].remove();this.clusters=[];for(var i=0;i<this.listeners.length;i++)google.maps.event.removeListener(this.listeners[i]);this.listeners=[],this.activeMap=null,this.ready=!1},l.draw=function(){},l.setupStyles=function(){if(!(this.styles.length>0))for(var t=0;t<this.imageSizes.length;t++)this.styles.push({url:this.imagePath+(t+1)+"."+this.imageExtension,height:this.imageSizes[t],width:this.imageSizes[t]})},l.fitMapToMarkers=function(){for(var t=this.getMarkers(),e=new google.maps.LatLngBounds,i=0;i<t.length;i++){var s=t[i].getPosition();s&&e.extend(s)}this.getMap().fitBounds(e)},l.getGridSize=function(){return this.gridSize},l.setGridSize=function(t){this.gridSize=t},l.getMinimumClusterSize=function(){return this.minClusterSize},l.setMinimumClusterSize=function(t){this.minClusterSize=t},l.getMaxZoom=function(){return this.maxZoom},l.setMaxZoom=function(t){this.maxZoom=t},l.getStyles=function(){return this.styles},l.setStyles=function(t){this.styles=t},l.getTitle=function(){return this.title},l.setTitle=function(t){this.title=t},l.getZoomOnClick=function(){return this.zoomOnClick},l.setZoomOnClick=function(t){this.zoomOnClick=t},l.getAverageCenter=function(){return this.averageCenter},l.setAverageCenter=function(t){this.averageCenter=t},l.getIgnoreHidden=function(){return this.ignoreHidden},l.setIgnoreHidden=function(t){this.ignoreHidden=t},l.getEnableRetinaIcons=function(){return this.enableRetinaIcons},l.setEnableRetinaIcons=function(t){this.enableRetinaIcons=t},l.getImageExtension=function(){return this.imageExtension},l.setImageExtension=function(t){this.imageExtension=t},l.getImagePath=function(){return this.imagePath},l.setImagePath=function(t){this.imagePath=t},l.getImageSizes=function(){return this.imageSizes},l.setImageSizes=function(t){this.imageSizes=t},l.getCalculator=function(){return this.calculator},l.setCalculator=function(t){this.calculator=t},l.getBatchSizeIE=function(){return this.batchSizeIE},l.setBatchSizeIE=function(t){this.batchSizeIE=t},l.getClusterClass=function(){return this.clusterClass},l.setClusterClass=function(t){this.clusterClass=t},l.getMarkers=function(){return this.markers},l.getTotalMarkers=function(){return this.markers.length},l.getClusters=function(){return this.clusters},l.getTotalClusters=function(){return this.clusters.length},l.addMarker=function(t,e){this.pushMarkerTo(t),e||this.redraw()},l.addMarkers=function(t,e){for(var i in t)t.hasOwnProperty(i)&&this.pushMarkerTo(t[i]);e||this.redraw()},l.pushMarkerTo=function(t){var e=this;t.getDraggable()&&google.maps.event.addListener(t,"dragend",function(){e.ready&&(t.isAdded=!1,e.repaint())}),t.isAdded=!1,this.markers.push(t)},l.removeMarker_=function(t){var e=-1;if(this.markers.indexOf)e=this.markers.indexOf(t);else for(var i=0;i<this.markers.length;i++)if(t===this.markers[i]){e=i;break}return-1!==e&&(t.setMap(null),this.markers.splice(e,1),!0)},l.removeMarker=function(t,e){var i=this.removeMarker_(t);return!e&&i&&this.repaint(),i},l.removeMarkers=function(t,e){for(var i=!1,s=0;s<t.length;s++)i=i||this.removeMarker_(t[s]);return!e&&i&&this.repaint(),i},l.clearMarkers=function(){this.resetViewport(!0),this.markers=[]},l.repaint=function(){var t=this.clusters.slice();this.clusters=[],this.resetViewport(!1),this.redraw(),setTimeout(function(){for(var e=0;e<t.length;e++)t[e].remove()},0)},l.getExtendedBounds=function(t){var e=this.getProjection(),i=e.fromLatLngToDivPixel(new google.maps.LatLng(t.getNorthEast().lat(),t.getNorthEast().lng()));i.x+=this.gridSize,i.y-=this.gridSize;var s=e.fromLatLngToDivPixel(new google.maps.LatLng(t.getSouthWest().lat(),t.getSouthWest().lng()));return s.x-=this.gridSize,s.y+=this.gridSize,t.extend(e.fromDivPixelToLatLng(i)),t.extend(e.fromDivPixelToLatLng(s)),t},l.redraw=function(){this.createClusters(0)},l.resetViewport=function(t){for(var e=0;e<this.clusters.length;e++)this.clusters[e].remove();this.clusters=[];for(var i=0;i<this.markers.length;i++){var s=this.markers[i];s.isAdded=!1,t&&s.setMap(null)}},l.distanceBetweenPoints=function(t,e){var i=(e.lat()-t.lat())*Math.PI/180,s=(e.lng()-t.lng())*Math.PI/180,r=Math.sin(i/2)*Math.sin(i/2)+Math.cos(t.lat()*Math.PI/180)*Math.cos(e.lat()*Math.PI/180)*Math.sin(s/2)*Math.sin(s/2);return 2*Math.atan2(Math.sqrt(r),Math.sqrt(1-r))*6371},l.isMarkerInBounds=function(t,e){var i=t.getPosition();return!!i&&e.contains(i)},l.addToClosestCluster=function(t){for(var i,s=4e4,r=null,n=0;n<this.clusters.length;n++){var o=(i=this.clusters[n]).getCenter(),a=t.getPosition();if(o&&a){var h=this.distanceBetweenPoints(o,a);h<s&&(s=h,r=i)}}r&&r.isMarkerInClusterBounds(t)?r.addMarker(t):((i=new e(this)).addMarker(t),this.clusters.push(i))},l.createClusters=function(t){var e=this;if(this.ready){0===t&&(google.maps.event.trigger(this,"clusteringbegin",this),null!==this.timerRefStatic&&(window.clearTimeout(this.timerRefStatic),delete this.timerRefStatic));for(var i=this.getMap().getZoom()>3?new google.maps.LatLngBounds(this.getMap().getBounds().getSouthWest(),this.getMap().getBounds().getNorthEast()):new google.maps.LatLngBounds(new google.maps.LatLng(85.02070771743472,-178.48388434375),new google.maps.LatLng(-85.08136444384544,178.00048865625)),s=this.getExtendedBounds(i),r=Math.min(t+this.batchSize,this.markers.length),n=t;n<r;n++){var o=this.markers[n];!o.isAdded&&this.isMarkerInBounds(o,s)&&(!this.ignoreHidden||this.ignoreHidden&&o.getVisible())&&this.addToClosestCluster(o)}r<this.markers.length?this.timerRefStatic=window.setTimeout(function(){e.createClusters(r)},0):(this.timerRefStatic=null,google.maps.event.trigger(this,"clusteringend",this))}},l.extend=function(t,e){return function(t){for(var e in t.prototype)this.prototype[e]=t.prototype[e];return this}.apply(t,[e])},t}();exports.Cluster=e,exports.ClusterIcon=t,exports.Clusterer=l;
//# sourceMappingURL=markerclusterer.cjs.production.min.js.map