awing-library 2.1.189-dev → 2.1.190-dev

package/lib/AWING/GoogleMap/GGMap.js

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -25,6 +29,7 @@ var mapContainerStyle = {
     height: '320px',
     width: '100%',
 };
+var myEffectExit = (0, material_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    transform: scale(1);\n    border: 0px solid #fff;\n    opacity: 1;\n  }\n  25% {\n    transform: scale(1.1);\n    border: 10px solid #1a78fc;\n    opacity: 0.8;\n  }\n  50% {\n    transform: scale(1.12);\n\tborder: 8px solid #1a78fc;\n    opacity: 0.5;\n  }\n  75% {\n    transform: scale(1.14);\n\tborder: 6px solid #1a78fc;\n    opacity: 0.3;\n  }\n  100% {\n    transform: scale(1.16);\n\tborder: 4px solid #1a78fc;\n    opacity: 0.2;\n  }\n"], ["\n  0% {\n    transform: scale(1);\n    border: 0px solid #fff;\n    opacity: 1;\n  }\n  25% {\n    transform: scale(1.1);\n    border: 10px solid #1a78fc;\n    opacity: 0.8;\n  }\n  50% {\n    transform: scale(1.12);\n\tborder: 8px solid #1a78fc;\n    opacity: 0.5;\n  }\n  75% {\n    transform: scale(1.14);\n\tborder: 6px solid #1a78fc;\n    opacity: 0.3;\n  }\n  100% {\n    transform: scale(1.16);\n\tborder: 4px solid #1a78fc;\n    opacity: 0.2;\n  }\n"])));
 var libraries = ['places'];
 var stylesDefault = {
     position: 'relative',
@@ -44,6 +49,22 @@ var GGMap = function (_a) {
     var onLoad = function (autocomplete) {
         autocompleteRef.current = autocomplete;
     };
+    var markerConvert = (0, react_1.useMemo)(function () {
+        var _a;
+        var coordMap = (_a = markerPositions === null || markerPositions === void 0 ? void 0 : markerPositions.reduce(function (acc, _a) {
+            var longitude = _a.longitude, latitude = _a.latitude;
+            var key = "".concat(longitude, ",").concat(latitude);
+            if (acc[key]) {
+                acc[key].count += 1;
+            }
+            else {
+                acc[key] = { longitude: longitude, latitude: latitude, count: 1 };
+            }
+            return acc;
+        }, {})) !== null && _a !== void 0 ? _a : {};
+        // Convert the object to an array
+        return Object.values(coordMap);
+    }, [markerPosition]);
     var onPlaceChanged = function () {
         var _a, _b, _c, _d;
         if (autocompleteRef.current !== null) {
@@ -116,6 +137,9 @@ var GGMap = function (_a) {
             lng: (_b = Number(markerPosition === null || markerPosition === void 0 ? void 0 : markerPosition.longitude)) !== null && _b !== void 0 ? _b : 0,
         };
     }, [markerPosition]);
+    var calculateRadius = function (currentZoom) {
+        return 100000 * Math.pow(2, 5 - currentZoom);
+    };
     return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: sxMap ? sxMap : stylesDefault, ref: boxRef, children: (0, jsx_runtime_1.jsxs)(api_1.LoadScript, { googleMapsApiKey: apiKey || '', libraries: libraries, children: [!isDisplayAutoComplete &&
                     ((0, jsx_runtime_1.jsx)(api_1.Autocomplete, { onPlaceChanged: onPlaceChanged, onLoad: onLoad, children: (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: t('Common.PlaceHolderLocation'), onFocus: function () {
                                 var _a;
@@ -139,7 +163,10 @@ var GGMap = function (_a) {
                                 margin: '10px 0',
                                 zIndex: 99,
                                 top: '50px',
-                            } }) })), (0, jsx_runtime_1.jsx)(api_1.GoogleMap, __assign({ id: "map", mapContainerStyle: sizeMap !== null && sizeMap !== void 0 ? sizeMap : mapContainerStyle, zoom: zoom, center: marker, onLoad: onLoadMap, onClick: onMapClick }, isTypeTracking && {
+                            } }) })), (0, jsx_runtime_1.jsx)(api_1.GoogleMap, __assign({ id: "map", mapContainerStyle: sizeMap !== null && sizeMap !== void 0 ? sizeMap : mapContainerStyle, zoom: zoom, onZoomChanged: function () {
+                        var _a;
+                        setZoom((_a = map === null || map === void 0 ? void 0 : map.getZoom()) !== null && _a !== void 0 ? _a : 0);
+                    }, center: marker, onLoad: onLoadMap, onClick: onMapClick }, isTypeTracking && {
                     options: {
                         disableDefaultUI: true,
                         styles: utils_1.mapStyles,
@@ -157,17 +184,16 @@ var GGMap = function (_a) {
                                         strokeOpacity: 1,
                                         strokeWeight: 2,
                                     } })] })
-                        : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: markerPositions === null || markerPositions === void 0 ? void 0 : markerPositions.map(function (coordinates, index, positions) {
-                                var _a, _b;
-                                // const radius =
-                                //     Math.max(
-                                //         30,
-                                //         (coordinates.count /
-                                //             Math.max(...positions.map((p) => p.count))) *
-                                //         120
-                                //     ) *
-                                //     (1 / 7);
-                                return (0, jsx_runtime_1.jsx)(api_1.Marker, { position: { lat: (_a = coordinates.latitude) !== null && _a !== void 0 ? _a : 0, lng: (_b = coordinates.longitude) !== null && _b !== void 0 ? _b : 0 } }, index);
+                        : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: markerConvert === null || markerConvert === void 0 ? void 0 : markerConvert.map(function (coordinates, index, positions) {
+                                var _a, _b, _c;
+                                return (0, jsx_runtime_1.jsx)(api_1.CircleF, { center: { lat: (_a = coordinates.latitude) !== null && _a !== void 0 ? _a : 0, lng: (_b = coordinates.longitude) !== null && _b !== void 0 ? _b : 0 }, radius: calculateRadius(zoom * (((_c = coordinates === null || coordinates === void 0 ? void 0 : coordinates.count) !== null && _c !== void 0 ? _c : 0))), options: {
+                                        strokeColor: '#4285F4',
+                                        strokeOpacity: 0.8,
+                                        strokeWeight: 2,
+                                        fillColor: "#4285F4",
+                                        fillOpacity: 0.35,
+                                    } }, index);
                             }) }) }))] }) }));
 };
 exports.default = GGMap;
+var templateObject_1;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "awing-library",
-    "version": "2.1.189-dev",
+    "version": "2.1.190-dev",
     "description": "",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",