@cashub/ui 0.19.3 → 0.19.5

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,14 +333,45 @@ var Map = function Map(_ref3) {
         }
 
         markers.push(marker);
+        oms.addMarker(marker);
       });
-      new _markerclusterer.MarkerClusterer({
+      var markerClusterer = 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());
+          }
+        }
       });
+      return function () {
+        popup.setMap(null);
+        markerClusterer.setMap(null);
+      };
     }
   }, [map, locations, checkPrimaryLocation, customPopup]); // geofencing
 

package/map/subComponent/GoogleMapPopup.js

@@ -34,7 +34,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 var GoogleMapPopup = /*#__PURE__*/_createClass(function GoogleMapPopup(options) {
   _classCallCheck(this, GoogleMapPopup);
 
-  // wrap class to prevent cannot reference maps during bundler / compile stage
+  // 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);

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.3",
+  "version": "0.19.5",
   "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",