@react-google-maps/marker-clusterer - npm Package Compare versions

Comparing version 1.2.0-alpha.4 to 1.2.0-alpha.4.1

lib/Cluster.js

@@ -7,3 +7,3 @@ "use strict";
         this.markerClusterer = markerClusterer;
-        this.map = this.markerClusterer.getMap();
+        this.map = this.markerClusterer.overlayView.getMap();
         this.gridSize = this.markerClusterer.getGridSize();
@@ -41,3 +41,3 @@ this.minClusterSize = this.markerClusterer.getMinimumClusterSize();
     Cluster.prototype.remove = function () {
-        this.clusterIcon.setMap(null);
+        this.clusterIcon.overlayView.setMap(null);
         this.markers = [];
@@ -44,0 +44,0 @@ delete this.markers;

lib/Clusterer.d.ts

 /// <reference types="googlemaps" />
 import { Cluster } from './Cluster';
 import { MarkerExtended, ClustererOptions, ClusterIconStyle, TCalculator } from './types';
-export declare class Clusterer extends google.maps.OverlayView {
+export declare class Clusterer {
     markers: MarkerExtended[];
@@ -27,2 +27,3 @@ clusters: Cluster[];
     timerRefStatic: number | null;
+    overlayView: google.maps.OverlayView;
     constructor(map: google.maps.Map, optMarkers?: MarkerExtended[], optOptions?: ClustererOptions);
@@ -83,3 +84,4 @@ onAdd(): void;
     createClusters(iFirst: number): void;
+    extend(obj1: any, obj2: any): any;
 }
 //# sourceMappingURL=Clusterer.d.ts.map

lib/Clusterer.js

 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -39,63 +26,62 @@ var Cluster_1 = require("./Cluster");
 var CLUSTERER_CLASS = "cluster";
-var Clusterer = (function (_super) {
-    __extends(Clusterer, _super);
+var Clusterer = (function () {
     function Clusterer(map, optMarkers, optOptions) {
         if (optMarkers === void 0) { optMarkers = []; }
         if (optOptions === void 0) { optOptions = {}; }
-        var _this = _super.call(this) || this;
-        _this.markers = [];
-        _this.clusters = [];
-        _this.listeners = [];
-        _this.activeMap = null;
-        _this.ready = false;
-        _this.gridSize = optOptions.gridSize || 60;
-        _this.minClusterSize = optOptions.minimumClusterSize || 2;
-        _this.maxZoom = optOptions.maxZoom || null;
-        _this.styles = optOptions.styles || [];
-        _this.title = optOptions.title || "";
-        _this.zoomOnClick = true;
+        this.overlayView = new google.maps.OverlayView();
+        this.markers = [];
+        this.clusters = [];
+        this.listeners = [];
+        this.activeMap = null;
+        this.ready = false;
+        this.gridSize = optOptions.gridSize || 60;
+        this.minClusterSize = optOptions.minimumClusterSize || 2;
+        this.maxZoom = optOptions.maxZoom || null;
+        this.styles = optOptions.styles || [];
+        this.title = optOptions.title || "";
+        this.zoomOnClick = true;
         if (optOptions.zoomOnClick !== undefined) {
-            _this.zoomOnClick = optOptions.zoomOnClick;
+            this.zoomOnClick = optOptions.zoomOnClick;
         }
-        _this.averageCenter = false;
+        this.averageCenter = false;
         if (optOptions.averageCenter !== undefined) {
-            _this.averageCenter = optOptions.averageCenter;
+            this.averageCenter = optOptions.averageCenter;
         }
-        _this.ignoreHidden = false;
+        this.ignoreHidden = false;
         if (optOptions.ignoreHidden !== undefined) {
-            _this.ignoreHidden = optOptions.ignoreHidden;
+            this.ignoreHidden = optOptions.ignoreHidden;
         }
-        _this.enableRetinaIcons = false;
+        this.enableRetinaIcons = false;
         if (optOptions.enableRetinaIcons !== undefined) {
-            _this.enableRetinaIcons = optOptions.enableRetinaIcons;
+            this.enableRetinaIcons = optOptions.enableRetinaIcons;
         }
-        _this.imagePath = optOptions.imagePath || IMAGE_PATH;
-        _this.imageExtension = optOptions.imageExtension || IMAGE_EXTENSION;
-        _this.imageSizes = optOptions.imageSizes || IMAGE_SIZES;
-        _this.calculator = optOptions.calculator || CALCULATOR;
-        _this.batchSize = optOptions.batchSize || BATCH_SIZE;
-        _this.batchSizeIE = optOptions.batchSizeIE || BATCH_SIZE_IE;
-        _this.clusterClass = optOptions.clusterClass || CLUSTERER_CLASS;
+        this.imagePath = optOptions.imagePath || IMAGE_PATH;
+        this.imageExtension = optOptions.imageExtension || IMAGE_EXTENSION;
+        this.imageSizes = optOptions.imageSizes || IMAGE_SIZES;
+        this.calculator = optOptions.calculator || CALCULATOR;
+        this.batchSize = optOptions.batchSize || BATCH_SIZE;
+        this.batchSizeIE = optOptions.batchSizeIE || BATCH_SIZE_IE;
+        this.clusterClass = optOptions.clusterClass || CLUSTERER_CLASS;
         if (navigator.userAgent.toLowerCase().indexOf("msie") !== -1) {
-            _this.batchSize = _this.batchSizeIE;
+            this.batchSize = this.batchSizeIE;
         }
-        _this.timerRefStatic = null;
-        _this.setupStyles();
-        _this.addMarkers(optMarkers, true);
-        _this.setMap(map);
-        return _this;
+        this.timerRefStatic = null;
+        this.setupStyles();
+        this.addMarkers(optMarkers, true);
+        this.overlayView.setMap(map);
     }
     Clusterer.prototype.onAdd = function () {
         var _this = this;
-        this.activeMap = this.getMap();
+        this.activeMap = this.overlayView.getMap();
         this.ready = true;
         this.repaint();
         this.listeners = [
-            google.maps.event.addListener(this.getMap(), "zoom_changed", function () {
+            google.maps.event.addListener(this.overlayView.getMap(), "zoom_changed", function () {
                 _this.resetViewport(false);
-                if (_this.getMap().getZoom() === (_this.get("minZoom") || 0) || _this.getMap().getZoom() === _this.get("maxZoom")) {
+                if (_this.overlayView.getMap().getZoom() === (_this.overlayView.get("minZoom") || 0) ||
+                    _this.overlayView.getMap().getZoom() === _this.overlayView.get("maxZoom")) {
                     google.maps.event.trigger(_this, "idle");
                 }
             }),
-            google.maps.event.addListener(this.getMap(), "idle", function () {
+            google.maps.event.addListener(this.overlayView.getMap(), "idle", function () {
                 _this.redraw();
@@ -142,3 +128,3 @@ })
         this
-            .getMap()
+            .overlayView.getMap()
             .fitBounds(bounds);
@@ -330,3 +316,3 @@ };
     Clusterer.prototype.getExtendedBounds = function (bounds) {
-        var projection = this.getProjection();
+        var projection = this.overlayView.getProjection();
         var trPix = projection.fromLatLngToDivPixel(new google.maps.LatLng(bounds.getNorthEast().lat(), bounds.getNorthEast().lng()));
@@ -407,7 +393,7 @@ trPix.x += this.gridSize;
         }
-        var mapBounds = this.getMap().getZoom() > 3
-            ? new google.maps.LatLngBounds(this
+        var mapBounds = this.overlayView.getMap().getZoom() > 3
+            ? new google.maps.LatLngBounds(this.overlayView
                 .getMap()
                 .getBounds()
-                .getSouthWest(), this
+                .getSouthWest(), this.overlayView
                 .getMap()
@@ -439,4 +425,12 @@ .getBounds()
     };
+    Clusterer.prototype.extend = function (obj1, obj2) {
+        return (function applyExtend(object) {
+            for (var property in object.prototype) {
+                this.prototype[property] = object.prototype[property];
+            }
+            return this;
+        }).apply(obj1, [obj2]);
+    };
     return Clusterer;
-}(google.maps.OverlayView));
+}());
 exports.Clusterer = Clusterer;

lib/ClusterIcon.d.ts

 /// <reference types="googlemaps" />
 import { Cluster } from './Cluster';
 import { ClusterIconStyle, ClusterIconInfo } from './types';
-export declare class ClusterIcon extends google.maps.OverlayView {
+export declare class ClusterIcon {
     cluster: Cluster;
@@ -24,2 +24,3 @@ className: string;
     backgroundPosition: string;
+    overlayView: google.maps.OverlayView;
     boundsChangedListener: google.maps.MapsEventListener | null;
@@ -26,0 +27,0 @@ constructor(cluster: Cluster, styles: ClusterIconStyle[]);

lib/ClusterIcon.js

 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
-var ClusterIcon = (function (_super) {
-    __extends(ClusterIcon, _super);
+var ClusterIcon = (function () {
     function ClusterIcon(cluster, styles) {
-        var _this = _super.call(this) || this;
-        _this.cluster = cluster;
-        _this.className = _this.cluster.getClusterer().getClusterClass();
-        _this.styles = styles;
-        _this.center = undefined;
-        _this.div = null;
-        _this.sums = null;
-        _this.visible = false;
-        _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(cluster.getMap());
-        return _this;
+        this.overlayView = new google.maps.OverlayView();
+        this.cluster = cluster;
+        this.className = this.cluster.getClusterer().getClusterClass();
+        this.styles = styles;
+        this.center = undefined;
+        this.div = null;
+        this.sums = null;
+        this.visible = false;
+        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.overlayView.setMap(cluster.getMap());
     }
@@ -52,4 +37,4 @@ ClusterIcon.prototype.onAdd = function () {
         }
-        this.getPanes().overlayMouseTarget.appendChild(this.div);
-        this.boundsChangedListener = google.maps.event.addListener(this.getMap(), "boundschanged", function boundsChabged() {
+        this.overlayView.getPanes().overlayMouseTarget.appendChild(this.div);
+        this.boundsChangedListener = google.maps.event.addListener(this.overlayView.getMap(), "boundschanged", function boundsChabged() {
             cDraggingMapByCluster = cMouseDownInCluster;
@@ -70,11 +55,11 @@ });
                     var bounds_1 = _this.cluster.getBounds();
-                    markerClusterer_1
+                    markerClusterer_1.overlayView
                         .getMap()
                         .fitBounds(bounds_1);
                     setTimeout(function timeout() {
-                        markerClusterer_1
+                        markerClusterer_1.overlayView
                             .getMap()
                             .fitBounds(bounds_1);
-                        if (maxZoom_1 !== null && (markerClusterer_1.getMap().getZoom() > maxZoom_1)) {
-                            markerClusterer_1.getMap().setZoom(maxZoom_1 + 1);
+                        if (maxZoom_1 !== null && (markerClusterer_1.overlayView.getMap().getZoom() > maxZoom_1)) {
+                            markerClusterer_1.overlayView.getMap().setZoom(maxZoom_1 + 1);
                         }
@@ -186,3 +171,3 @@ }, 100);
     ClusterIcon.prototype.getPosFromLatLng = function (latlng) {
-        var pos = this.getProjection().fromLatLngToDivPixel(latlng);
+        var pos = this.overlayView.getProjection().fromLatLngToDivPixel(latlng);
         pos.x -= this.anchorIcon[1];
@@ -195,3 +180,3 @@ pos.y -= this.anchorIcon[0];
     return ClusterIcon;
-}(google.maps.OverlayView));
+}());
 exports.ClusterIcon = ClusterIcon;

package.json

 {
   "name": "@react-google-maps/marker-clusterer",
-  "version": "1.2.0-alpha.4",
+  "version": "1.2.0-alpha.4.1",
   "description": "Marker Clusterer for React.js Google Maps API",
@@ -5,0 +5,0 @@ "license": "MIT",

No alert changes

Worsened metrics

Total package byte prevSize

78761

-0.25%

Lines of code

2006

-0.5%

No dependency changes