@cashub/ui 0.19.2 → 0.19.4

package/map/GoogleMap.js

@@ -17,6 +17,8 @@ var _GoogleMapContainer = _interopRequireDefault(require("./subComponent/GoogleM
 
 var _GoogleMapPopup = _interopRequireDefault(require("./subComponent/GoogleMapPopup"));
 
+var _GoogleMarkerSpiderfier = _interopRequireDefault(require("./subComponent/GoogleMarkerSpiderfier"));
+
 var _map_icon = _interopRequireDefault(require("../assets/icons/map_icon1.png"));
 
 var _map_icon2 = _interopRequireDefault(require("../assets/icons/map_icon4.png"));
@@ -223,6 +225,7 @@ var Map = function Map(_ref3) {
       rotateControl: false,
       fullscreenControl: false,
       minZoom: 3,
+      maxZoom: 20,
       restriction: {
         latLngBounds: {
           east: 179.9999,
@@ -283,6 +286,11 @@ var Map = function Map(_ref3) {
       map.addListener('click', function () {
         popup.setMap(null);
       });
+      var oms = new _GoogleMarkerSpiderfier.default(map, {
+        markersWontMove: true,
+        markersWontHide: true,
+        basicFormatEvents: true
+      });
       locations.forEach(function (location) {
         var latitude = location.latitude,
             longitude = location.longitude;
@@ -302,6 +310,7 @@ var Map = function Map(_ref3) {
 
         var marker = new window.google.maps.Marker({
           icon: icon,
+          map: map,
           position: {
             lat: latitude,
             lng: longitude
@@ -324,13 +333,40 @@ var Map = function Map(_ref3) {
         }
 
         markers.push(marker);
+        oms.addMarker(marker);
       });
       new _markerclusterer.MarkerClusterer({
         map: map,
         markers: markers,
         algorithm: new _markerclusterer.SuperClusterAlgorithm({
           radius: 120
-        })
+        }),
+        onClusterClick: function onClusterClick(event, cluster, map) {
+          // fix: cluster marker spiderfier
+          // const targetPosition = cluster.markers[0].getPosition().toJSON();
+          // const isAllSamePosition = cluster.markers.every((marker) => {
+          //   const position = marker.getPosition().toJSON();
+          //   return (
+          //     targetPosition.lat === position.lat &&
+          //     targetPosition.lng === position.lng
+          //   );
+          // });
+          // if (isAllSamePosition) {
+          //   return;
+          // }
+          // fix: need to call twice to actually work
+          map.fitBounds(cluster.bounds);
+          map.fitBounds(cluster.bounds); // check current view has marker, if not set view to first marker
+
+          var currentBounds = map.getBounds();
+          var found = cluster.markers.find(function (marker) {
+            return currentBounds.contains(marker.getPosition());
+          });
+
+          if (!found) {
+            map.setCenter(cluster.markers[0].getPosition());
+          }
+        }
       });
     }
   }, [map, locations, checkPrimaryLocation, customPopup]); // geofencing

package/map/subComponent/GoogleMapPopup.js

@@ -7,12 +7,6 @@ exports.default = void 0;
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
@@ -29,94 +23,108 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
 // custom popup
 // https://developers.google.com/maps/documentation/javascript/examples/overlay-popup
-var GoogleMapPopup = /*#__PURE__*/function (_window$google$maps$O) {
-  _inherits(GoogleMapPopup, _window$google$maps$O);
+var GoogleMapPopup = /*#__PURE__*/_createClass(function GoogleMapPopup(options) {
+  _classCallCheck(this, GoogleMapPopup);
 
-  var _super = _createSuper(GoogleMapPopup);
+  // wrap class to prevent cannot reference maps during runtime
+  // because google map library will load after render map only
+  var MapPopup = /*#__PURE__*/function (_window$google$maps$O) {
+    _inherits(MapPopup, _window$google$maps$O);
 
-  function GoogleMapPopup() {
-    var _this;
+    var _super = _createSuper(MapPopup);
 
-    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-        maxWidth = _ref.maxWidth,
-        offset = _ref.offset;
+    function MapPopup() {
+      var _this;
 
-    _classCallCheck(this, GoogleMapPopup);
+      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          maxWidth = _ref.maxWidth,
+          offset = _ref.offset;
 
-    _this = _super.call(this); // This zero-height div is positioned at the bottom of the tip.
+      _classCallCheck(this, MapPopup);
 
-    _defineProperty(_assertThisInitialized(_this), "position", void 0);
+      _this = _super.call(this); // This zero-height div is positioned at the bottom of the tip.
 
-    _defineProperty(_assertThisInitialized(_this), "containerDiv", void 0);
+      _defineProperty(_assertThisInitialized(_this), "position", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "offset", 16);
+      _defineProperty(_assertThisInitialized(_this), "containerDiv", void 0);
 
-    _this.containerDiv = document.createElement('div');
+      _defineProperty(_assertThisInitialized(_this), "offset", 16);
 
-    _this.containerDiv.classList.add('google-popup-content-wrapper');
+      _this.containerDiv = document.createElement('div');
 
-    if (maxWidth) {
-      _this.containerDiv.style.maxWidth = "".concat(maxWidth, "px");
-    }
-
-    if (offset) {
-      _this.offset = offset;
-    } // Optionally stop clicks, etc., from bubbling up to the map.
+      _this.containerDiv.classList.add('google-popup-content-wrapper');
 
+      if (maxWidth) {
+        _this.containerDiv.style.maxWidth = "".concat(maxWidth, "px");
+      }
 
-    GoogleMapPopup.preventMapHitsAndGesturesFrom(_this.containerDiv);
-    return _this;
-  }
-  /** Called when the popup is added to the map. */
+      if (offset) {
+        _this.offset = offset;
+      } // Optionally stop clicks, etc., from bubbling up to the map.
 
 
-  _createClass(GoogleMapPopup, [{
-    key: "onAdd",
-    value: function onAdd() {
-      this.getPanes().floatPane.appendChild(this.containerDiv);
+      MapPopup.preventMapHitsAndGesturesFrom(_this.containerDiv);
+      return _this;
     }
-    /** Called when the popup is removed from the map. */
+    /** Called when the popup is added to the map. */
 
-  }, {
-    key: "onRemove",
-    value: function onRemove() {
-      if (this.containerDiv.parentElement) {
-        this.containerDiv.parentElement.removeChild(this.containerDiv);
+
+    _createClass(MapPopup, [{
+      key: "onAdd",
+      value: function onAdd() {
+        this.getPanes().floatPane.appendChild(this.containerDiv);
       }
-    }
-    /** Called each frame when the popup needs to draw itself. */
-
-  }, {
-    key: "draw",
-    value: function draw() {
-      if (this.position) {
-        var divPosition = this.getProjection().fromLatLngToDivPixel(this.position);
-        this.containerDiv.style.left = "".concat(divPosition.x, "px");
-        this.containerDiv.style.top = "".concat(divPosition.y - this.offset, "px");
+      /** Called when the popup is removed from the map. */
+
+    }, {
+      key: "onRemove",
+      value: function onRemove() {
+        if (this.containerDiv.parentElement) {
+          this.containerDiv.parentElement.removeChild(this.containerDiv);
+        }
       }
-    }
-  }, {
-    key: "setPosition",
-    value: function setPosition(position) {
-      this.position = position;
-    }
-  }, {
-    key: "setContent",
-    value: function setContent(content) {
-      if (!content) return;
-
-      if (_typeof(content) === 'object') {
-        this.containerDiv.replaceChildren(content);
-      } else {
-        this.containerDiv.innerHTML = content;
+      /** Called each frame when the popup needs to draw itself. */
+
+    }, {
+      key: "draw",
+      value: function draw() {
+        if (this.position) {
+          var divPosition = this.getProjection().fromLatLngToDivPixel(this.position);
+          this.containerDiv.style.left = "".concat(divPosition.x, "px");
+          this.containerDiv.style.top = "".concat(divPosition.y - this.offset, "px");
+        }
       }
-    }
-  }]);
+    }, {
+      key: "setPosition",
+      value: function setPosition(position) {
+        this.position = position;
+      }
+    }, {
+      key: "setContent",
+      value: function setContent(content) {
+        if (!content) return;
+
+        if (_typeof(content) === 'object') {
+          this.containerDiv.replaceChildren(content);
+        } else {
+          this.containerDiv.innerHTML = content;
+        }
+      }
+    }]);
+
+    return MapPopup;
+  }(window.google.maps.OverlayView);
 
-  return GoogleMapPopup;
-}(window.google.maps.OverlayView);
+  return new MapPopup(options);
+});
 
 var _default = GoogleMapPopup;
 exports.default = _default;

package/map/subComponent/GoogleMarkerSpiderfier.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var GoogleMarkerSpiderfier = /*#__PURE__*/_createClass(function GoogleMarkerSpiderfier(map, options) {
+  _classCallCheck(this, GoogleMarkerSpiderfier);
+
+  _defineProperty(this, "oms", void 0);
+
+  // dynamic import to prevent cannot reference maps during runtime
+  // because google map library will load after render map only
+  var OverlappingMarkerSpiderfier = require('overlapping-marker-spiderfier');
+
+  this.oms = new OverlappingMarkerSpiderfier(map, options);
+  return this.oms;
+});
+
+var _default = GoogleMarkerSpiderfier;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.19.2",
+  "version": "0.19.4",
   "private": false,
   "author": "CASHUB Team",
   "description": "CASHUB UI components library",
@@ -25,6 +25,7 @@
     "leaflet-draw": "^1.0.4",
     "lodash.uniqueid": "^4.0.1",
     "moment": "^2.29.3",
+    "overlapping-marker-spiderfier": "^1.1.4",
     "qrcode.react": "^3.0.2",
     "rc-time-picker": "^3.7.3",
     "react-chartjs-2": "^3.3.0",