@terraware/web-components 5.0.27 → 5.1.1-rc.0

package/components/Map/MapBox.js

@@ -1,461 +1,554 @@
-import { useRef, useState, useCallback, useMemo, useEffect } from 'react';
-import ReactMapbox, { Layer, Marker, FullscreenControl, NavigationControl, Source } from 'react-map-gl/mapbox';
-import { useTheme, Box } from '@mui/material';
-import 'mapbox-gl/dist/mapbox-gl.css';
-import 'lodash';
-import 'luxon';
-import useDeviceInfo from '../../utils/useDeviceInfo.js';
-import Icon from '../Icon/Icon.js';
-import MapViewStyleControl from './MapViewStyleControl.js';
-import { stylesUrl } from './types.js';
-import { useMaintainLayerOrder } from './useMaintainLayerOrder.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-const MapBox = props => {
-  const {
-    clusterRadius,
-    containerId,
-    controlBottomLeft,
-    controlTopRight,
-    cursorInteract,
-    cursorMap,
-    disableDoubleClickZoom,
-    disableZoom,
-    drawerOpen,
-    layers: featureGroups,
-    hideFullScreenControl,
-    hideMapViewStyleControl,
-    hideZoomControl,
-    highlightGroups,
-    initialViewState,
-    mapId,
-    mapImageUrls,
-    mapViewStyle,
-    markerGroups,
-    onClickCanvas,
-    setMapViewStyle,
-    token
-  } = props;
-  const theme = useTheme();
-  const mapRef = useRef(null);
-  const {
-    isDesktop
-  } = useDeviceInfo();
-  const [cursor, setCursor] = useState('auto');
-  const [hoverFeatureId, setHoverFeatureId] = useState();
-  const [zoom, setZoom] = useState();
-  const loadImages = useCallback(map => {
-    mapImageUrls?.forEach(url => {
-      if (!map.hasImage(url)) {
-        map.loadImage(url, (error, image) => {
-          if (image) {
-            map.addImage(url, image, {
-              sdf: true
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { FullscreenControl, Layer, Marker, NavigationControl, Source } from "react-map-gl/mapbox";
+import { Box, useTheme } from "@mui/material";
+import "mapbox-gl/dist/mapbox-gl.css";
+import { useDeviceInfo } from "../../utils/index.js";
+import Icon from "../Icon/Icon.js";
+import MapViewStyleControl from "./MapViewStyleControl.js";
+import ReactMapboxWrapper from "./ReactMapboxWrapper.js";
+import { stylesUrl } from "./types.js";
+import { useMaintainLayerOrder } from "./useMaintainLayerOrder.js";
+const MapBox = (props)=>{
+    const { clusterRadius, containerId, controlBottomLeft, controlTopRight, cursorInteract, cursorMap, disableDoubleClickZoom, disableZoom, drawerOpen, layers: featureGroups, hideFullScreenControl, hideMapViewStyleControl, hideZoomControl, highlightGroups, initialViewState, mapId, mapImageUrls, mapViewStyle, markerGroups, onClickCanvas, setMapViewStyle, token } = props;
+    const theme = useTheme();
+    const mapRef = useRef(null);
+    const { isDesktop } = useDeviceInfo();
+    const [cursor, setCursor] = useState('auto');
+    const [hoverFeatureId, setHoverFeatureId] = useState();
+    const [zoom, setZoom] = useState();
+    const loadImages = useCallback((map)=>{
+        mapImageUrls?.forEach((url)=>{
+            if (!map.hasImage(url)) map.loadImage(url, (error, image)=>{
+                if (image) map.addImage(url, image, {
+                    sdf: true
+                });
             });
-          }
         });
-      }
-    });
-  }, [mapImageUrls]);
-  const mapRefCallback = useCallback(map => {
-    if (map !== null) {
-      mapRef.current = map;
-      setZoom(map.getZoom());
-      loadImages(map);
-    }
-  }, []);
-  const onMove = useCallback(view => {
-    setZoom(view.viewState.zoom);
-  }, []);
-  const clusterMarkers = useCallback((map, markers) => {
-    if (!map || map.getZoom() > 15) {
-      // Too zoomed in. Return all marker as is
-      return markers.map(marker => [marker]);
-    }
-    const visited = new Set();
-    const markerPixels = {};
-    markers.forEach(marker => {
-      markerPixels[marker.id] = map.project({
-        lat: marker.latitude,
-        lon: marker.longitude
-      });
-    });
-    const clusters = [];
-    markers.forEach((marker, idx) => {
-      if (!visited.has(marker.id)) {
-        const cluster = [marker];
-        markers.slice(idx + 1).forEach(otherMarker => {
-          if (!visited.has(otherMarker.id)) {
-            const dx = markerPixels[marker.id].x - markerPixels[otherMarker.id].x;
-            const dy = markerPixels[marker.id].y - markerPixels[otherMarker.id].y;
-            const dist = Math.sqrt(dx * dx + dy * dy);
-            if (dist <= (clusterRadius ?? 40)) {
-              cluster.push(otherMarker);
-              visited.add(otherMarker.id);
+    }, [
+        mapImageUrls
+    ]);
+    const mapRefCallback = useCallback((map)=>{
+        if (null !== map) {
+            mapRef.current = map;
+            setZoom(map.getZoom());
+            loadImages(map);
+        }
+    }, []);
+    const onMove = useCallback((view)=>{
+        setZoom(view.viewState.zoom);
+    }, []);
+    const clusterMarkers = useCallback((map, markers)=>{
+        if (!map || map.getZoom() > 15) return markers.map((marker)=>[
+                marker
+            ]);
+        const visited = new Set();
+        const markerPixels = {};
+        markers.forEach((marker)=>{
+            markerPixels[marker.id] = map.project({
+                lat: marker.latitude,
+                lon: marker.longitude
+            });
+        });
+        const clusters = [];
+        markers.forEach((marker, idx)=>{
+            if (!visited.has(marker.id)) {
+                const cluster = [
+                    marker
+                ];
+                markers.slice(idx + 1).forEach((otherMarker)=>{
+                    if (!visited.has(otherMarker.id)) {
+                        const dx = markerPixels[marker.id].x - markerPixels[otherMarker.id].x;
+                        const dy = markerPixels[marker.id].y - markerPixels[otherMarker.id].y;
+                        const dist = Math.sqrt(dx * dx + dy * dy);
+                        if (dist <= (clusterRadius ?? 40)) {
+                            cluster.push(otherMarker);
+                            visited.add(otherMarker.id);
+                        }
+                    }
+                });
+                clusters.push(cluster);
             }
-          }
         });
-        clusters.push(cluster);
-      }
-    });
-    return clusters;
-  }, [clusterRadius]);
-
-  // Find all layers with at least some clickable elements
-  const interactiveLayerIds = useMemo(() => {
-    return featureGroups?.filter(group => group.features.some(feature => feature.onClick !== undefined))?.map(group => group.layerId);
-  }, [featureGroups]);
-  const geojson = useMemo(() => {
-    const features = featureGroups?.flatMap(group => {
-      return group.features.map(feature => {
-        const properties = {
-          id: feature.featureId,
-          clickable: feature.onClick !== undefined,
-          label: feature.label,
-          layerFeatureId: `${group.layerId}/${feature.featureId}`,
-          layerId: group.layerId,
-          priority: feature.priority ?? 0,
-          selected: feature.selected ?? false
-        };
+        return clusters;
+    }, [
+        clusterRadius
+    ]);
+    const interactiveLayerIds = useMemo(()=>featureGroups?.filter((group)=>group.features.some((feature)=>void 0 !== feature.onClick))?.map((group)=>group.layerId), [
+        featureGroups
+    ]);
+    const geojson = useMemo(()=>{
+        const features = featureGroups?.flatMap((group)=>group.features.map((feature)=>{
+                const properties = {
+                    id: feature.featureId,
+                    clickable: void 0 !== feature.onClick,
+                    label: feature.label,
+                    layerFeatureId: `${group.layerId}/${feature.featureId}`,
+                    layerId: group.layerId,
+                    priority: feature.priority ?? 0,
+                    selected: feature.selected ?? false
+                };
+                return {
+                    type: 'Feature',
+                    geometry: feature.geometry,
+                    properties
+                };
+            }));
+        return features ? {
+            type: 'FeatureCollection',
+            features
+        } : void 0;
+    }, [
+        featureGroups
+    ]);
+    const { borderLayers, fillLayers, textLayers } = useMemo(()=>{
+        const _borderLayers = featureGroups?.map((group)=>/*#__PURE__*/ jsx(Layer, {
+                id: `${group.layerId}-border`,
+                source: 'mapData',
+                type: "line",
+                paint: {
+                    'line-color': group.style.borderColor,
+                    'line-width': 2
+                },
+                filter: [
+                    '==',
+                    [
+                        'get',
+                        'layerId'
+                    ],
+                    group.layerId
+                ]
+            }, `${group.layerId}-border`));
+        const _fillLayers = featureGroups?.map((group)=>{
+            const opacity = Math.min(0.4, group.style.opacity ?? 0.2);
+            const selectedOpacity = 2 * opacity;
+            const hoverOpacity = 1.5 * opacity;
+            const hoverAndSelectedOpacity = 2.5 * opacity;
+            const groupFilter = [
+                '==',
+                [
+                    'get',
+                    'layerId'
+                ],
+                group.layerId
+            ];
+            const clickableFilter = [
+                '==',
+                [
+                    'get',
+                    'clickable'
+                ],
+                true
+            ];
+            const selectedFilter = [
+                '==',
+                [
+                    'get',
+                    'selected'
+                ],
+                true
+            ];
+            const notSelectedFilter = [
+                '==',
+                [
+                    'get',
+                    'selected'
+                ],
+                false
+            ];
+            const hoverFilter = [
+                '==',
+                [
+                    'get',
+                    'id'
+                ],
+                hoverFeatureId ?? null
+            ];
+            const notHoverFilter = [
+                '!=',
+                [
+                    'get',
+                    'id'
+                ],
+                hoverFeatureId ?? null
+            ];
+            return /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(Layer, {
+                        id: group.layerId,
+                        source: 'mapData',
+                        type: 'fill',
+                        paint: {
+                            'fill-opacity': 0
+                        },
+                        filter: [
+                            'all',
+                            groupFilter,
+                            clickableFilter
+                        ]
+                    }, group.layerId),
+                    /*#__PURE__*/ jsx(Layer, {
+                        id: `${group.layerId}-unselected`,
+                        source: 'mapData',
+                        type: 'fill',
+                        paint: group.style.fillPatternUrl ? {
+                            'fill-pattern': group.style.fillPatternUrl,
+                            'fill-opacity': opacity
+                        } : {
+                            'fill-color': group.style.fillColor,
+                            'fill-opacity': opacity
+                        },
+                        filter: [
+                            'all',
+                            groupFilter,
+                            notSelectedFilter,
+                            notHoverFilter
+                        ]
+                    }, `${group.layerId}-unselected`),
+                    /*#__PURE__*/ jsx(Layer, {
+                        id: `${group.layerId}-selected`,
+                        slot: 'bottom',
+                        source: 'mapData',
+                        type: 'fill',
+                        paint: group.style.fillPatternUrl ? {
+                            'fill-pattern': group.style.fillPatternUrl,
+                            'fill-opacity': selectedOpacity
+                        } : {
+                            'fill-color': group.style.fillColor,
+                            'fill-opacity': selectedOpacity
+                        },
+                        filter: [
+                            'all',
+                            groupFilter,
+                            selectedFilter,
+                            notHoverFilter
+                        ]
+                    }, `${group.layerId}-selected`),
+                    /*#__PURE__*/ jsx(Layer, {
+                        id: `${group.layerId}-hover`,
+                        source: 'mapData',
+                        type: 'fill',
+                        paint: group.style.fillPatternUrl ? {
+                            'fill-pattern': group.style.fillPatternUrl,
+                            'fill-opacity': hoverOpacity
+                        } : {
+                            'fill-color': group.style.fillColor,
+                            'fill-opacity': hoverOpacity
+                        },
+                        filter: [
+                            'all',
+                            groupFilter,
+                            hoverFilter,
+                            notSelectedFilter
+                        ]
+                    }, `${group.layerId}-hover`),
+                    /*#__PURE__*/ jsx(Layer, {
+                        id: `${group.layerId}-selected-hover`,
+                        source: 'mapData',
+                        type: 'fill',
+                        paint: group.style.fillPatternUrl ? {
+                            'fill-pattern': group.style.fillPatternUrl,
+                            'fill-opacity': hoverAndSelectedOpacity
+                        } : {
+                            'fill-color': group.style.fillColor,
+                            'fill-opacity': hoverAndSelectedOpacity
+                        },
+                        filter: [
+                            'all',
+                            groupFilter,
+                            hoverFilter,
+                            selectedFilter
+                        ]
+                    }, `${group.layerId}-selected-hover`)
+                ]
+            });
+        });
+        const _textLayers = featureGroups?.map((group)=>{
+            const groupFilter = [
+                '==',
+                [
+                    'get',
+                    'layerId'
+                ],
+                group.layerId
+            ];
+            const labelFilter = [
+                'has',
+                'label'
+            ];
+            return /*#__PURE__*/ jsx(Layer, {
+                id: `${group.layerId}-label`,
+                source: 'mapData',
+                type: 'symbol',
+                layout: {
+                    'text-field': [
+                        'get',
+                        'label'
+                    ],
+                    'text-size': 14,
+                    'text-line-height': 20,
+                    'text-font': [
+                        'Open Sans Bold',
+                        'Arial Unicode MS Regular'
+                    ],
+                    'text-anchor': 'center',
+                    'text-justify': 'center'
+                },
+                paint: {
+                    'text-color': '#ffffff'
+                },
+                filter: [
+                    'all',
+                    groupFilter,
+                    labelFilter
+                ]
+            }, `${group.layerId}-label`);
+        });
         return {
-          type: 'Feature',
-          geometry: feature.geometry,
-          properties
+            borderLayers: _borderLayers ?? [],
+            fillLayers: _fillLayers ?? [],
+            textLayers: _textLayers ?? []
         };
-      });
-    });
-    return features ? {
-      type: 'FeatureCollection',
-      features
-    } : undefined;
-  }, [featureGroups]);
-  const {
-    borderLayers,
-    fillLayers,
-    textLayers
-  } = useMemo(() => {
-    const _borderLayers = featureGroups?.map(group => {
-      return /*#__PURE__*/jsx(Layer, {
-        id: `${group.layerId}-border`,
-        source: 'mapData',
-        type: "line",
-        paint: {
-          'line-color': group.style.borderColor,
-          'line-width': 2
-        },
-        filter: ['==', ['get', 'layerId'], group.layerId]
-      }, `${group.layerId}-border`);
-    });
-    const _fillLayers = featureGroups?.map(group => {
-      const opacity = Math.min(0.4, group.style.opacity ?? 0.2);
-      const selectedOpacity = opacity * 2;
-      const hoverOpacity = opacity * 1.5;
-      const hoverAndSelectedOpacity = opacity * 2.5;
-      const groupFilter = ['==', ['get', 'layerId'], group.layerId];
-      const clickableFilter = ['==', ['get', 'clickable'], true];
-      const selectedFilter = ['==', ['get', 'selected'], true];
-      const notSelectedFilter = ['==', ['get', 'selected'], false];
-      const hoverFilter = ['==', ['get', 'id'], hoverFeatureId ?? null];
-      const notHoverFilter = ['!=', ['get', 'id'], hoverFeatureId ?? null];
-      return /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsx(Layer, {
-          id: group.layerId,
-          source: 'mapData',
-          type: 'fill',
-          paint: {
-            'fill-opacity': 0
-          },
-          filter: ['all', groupFilter, clickableFilter]
-        }, group.layerId), /*#__PURE__*/jsx(Layer, {
-          id: `${group.layerId}-unselected`,
-          source: 'mapData',
-          type: 'fill',
-          paint: group.style.fillPatternUrl ? {
-            'fill-pattern': group.style.fillPatternUrl,
-            'fill-opacity': opacity
-          } : {
-            'fill-color': group.style.fillColor,
-            'fill-opacity': opacity
-          },
-          filter: ['all', groupFilter, notSelectedFilter, notHoverFilter]
-        }, `${group.layerId}-unselected`), /*#__PURE__*/jsx(Layer, {
-          id: `${group.layerId}-selected`,
-          slot: 'bottom',
-          source: 'mapData',
-          type: 'fill',
-          paint: group.style.fillPatternUrl ? {
-            'fill-pattern': group.style.fillPatternUrl,
-            'fill-opacity': selectedOpacity
-          } : {
-            'fill-color': group.style.fillColor,
-            'fill-opacity': selectedOpacity
-          },
-          filter: ['all', groupFilter, selectedFilter, notHoverFilter]
-        }, `${group.layerId}-selected`), /*#__PURE__*/jsx(Layer, {
-          id: `${group.layerId}-hover`,
-          source: 'mapData',
-          type: 'fill',
-          paint: group.style.fillPatternUrl ? {
-            'fill-pattern': group.style.fillPatternUrl,
-            'fill-opacity': hoverOpacity
-          } : {
-            'fill-color': group.style.fillColor,
-            'fill-opacity': hoverOpacity
-          },
-          filter: ['all', groupFilter, hoverFilter, notSelectedFilter]
-        }, `${group.layerId}-hover`), /*#__PURE__*/jsx(Layer, {
-          id: `${group.layerId}-selected-hover`,
-          source: 'mapData',
-          type: 'fill',
-          paint: group.style.fillPatternUrl ? {
-            'fill-pattern': group.style.fillPatternUrl,
-            'fill-opacity': hoverAndSelectedOpacity
-          } : {
-            'fill-color': group.style.fillColor,
-            'fill-opacity': hoverAndSelectedOpacity
-          },
-          filter: ['all', groupFilter, hoverFilter, selectedFilter]
-        }, `${group.layerId}-selected-hover`)]
-      });
-    });
-    const _textLayers = featureGroups?.map(group => {
-      const groupFilter = ['==', ['get', 'layerId'], group.layerId];
-      const labelFilter = ['has', 'label'];
-      return /*#__PURE__*/jsx(Layer, {
-        id: `${group.layerId}-label`,
-        source: 'mapData',
-        type: 'symbol',
-        layout: {
-          'text-field': ['get', 'label'],
-          'text-size': 14,
-          'text-line-height': 20,
-          'text-font': ['Open Sans Bold', 'Arial Unicode MS Regular'],
-          'text-anchor': 'center',
-          'text-justify': 'center'
-        },
-        paint: {
-          'text-color': '#ffffff'
-        },
-        filter: ['all', groupFilter, labelFilter]
-      }, `${group.layerId}-label`);
-    });
-    return {
-      borderLayers: _borderLayers ?? [],
-      fillLayers: _fillLayers ?? [],
-      textLayers: _textLayers ?? []
-    };
-  }, [featureGroups, hoverFeatureId]);
-  const highlightLayers = useMemo(() => {
-    return highlightGroups?.flatMap(group => {
-      return group.highlights.map((highlight, index) => {
-        const highlightFeatureIds = highlight.featureIds.map(({
-          layerId,
-          featureId
-        }) => `${layerId}/${featureId}`);
-        return /*#__PURE__*/jsx(Layer, {
-          id: `highlight-${group.highlightId}-${index}`,
-          source: 'mapData',
-          type: 'fill',
-          paint: highlight.style.fillPatternUrl ? {
-            'fill-pattern': highlight.style.fillPatternUrl,
-            'fill-opacity': highlight.style.opacity ?? 0.5
-          } : {
-            'fill-color': highlight.style.fillColor,
-            'fill-opacity': highlight.style.opacity ?? 0.5
-          },
-          filter: ['all', ['has', 'layerFeatureId'], ['match', ['get', 'layerFeatureId'], highlightFeatureIds, true, false]]
-        }, `highlight-${group.highlightId}-${index}`);
-      });
-    }) ?? [];
-  }, [highlightGroups]);
-  const markersComponents = useMemo(() => {
-    return markerGroups?.flatMap(markerGroup => {
-      // cluster markers here
-      const clusteredMarkers = clusterMarkers(mapRef.current, markerGroup.markers);
-      return clusteredMarkers.map((markers, i) => {
-        if (markers.length === 1) {
-          const marker = markers[0];
-          return /*#__PURE__*/jsx(Marker, {
-            className: "map-marker",
-            longitude: marker.longitude,
-            latitude: marker.latitude,
-            anchor: "center",
-            onClick: event => {
-              marker.onClick?.();
-              event.originalEvent.stopPropagation();
-            },
-            style: {
-              backgroundColor: marker.selected ? markerGroup.style.iconColor : theme.palette.TwClrBg
-            },
-            children: /*#__PURE__*/jsx(Icon, {
-              fillColor: marker.selected ? theme.palette.TwClrBg : markerGroup.style.iconColor,
-              name: markerGroup.style.iconName,
-              size: 'small'
-            })
-          }, `marker-${i}`);
-        } else if (markers.length > 1) {
-          const latSum = markers.reduce((sum, marker) => sum + marker.latitude, 0);
-          const lngSum = markers.reduce((sum, marker) => sum + marker.longitude, 0);
-          const latAvg = latSum / markers.length;
-          const lngAvg = lngSum / markers.length;
-          const selected = markers.some(marker => marker.selected);
-          return /*#__PURE__*/jsxs(Marker, {
-            className: "map-marker map-marker--cluster",
-            longitude: lngAvg,
-            latitude: latAvg,
-            anchor: "center",
-            onClick: event => {
-              mapRef.current?.easeTo({
-                center: {
-                  lat: latAvg,
-                  lon: lngAvg
-                },
-                zoom: (zoom ?? 10) + 1,
-                duration: 500
-              });
-              event.originalEvent.stopPropagation();
-            },
-            style: {
-              backgroundColor: selected ? markerGroup.style.iconColor : theme.palette.TwClrBg
-            },
-            children: [/*#__PURE__*/jsx("p", {
-              className: "count",
-              children: markers.length
-            }), /*#__PURE__*/jsx(Icon, {
-              fillColor: selected ? theme.palette.TwClrBg : markerGroup.style.iconColor,
-              name: markerGroup.style.iconName,
-              size: 'small'
-            })]
-          }, `marker-${i}`);
+    }, [
+        featureGroups,
+        hoverFeatureId
+    ]);
+    const highlightLayers = useMemo(()=>highlightGroups?.flatMap((group)=>group.highlights.map((highlight, index)=>{
+                const highlightFeatureIds = highlight.featureIds.map(({ layerId, featureId })=>`${layerId}/${featureId}`);
+                return /*#__PURE__*/ jsx(Layer, {
+                    id: `highlight-${group.highlightId}-${index}`,
+                    source: 'mapData',
+                    type: 'fill',
+                    paint: highlight.style.fillPatternUrl ? {
+                        'fill-pattern': highlight.style.fillPatternUrl,
+                        'fill-opacity': highlight.style.opacity ?? 0.5
+                    } : {
+                        'fill-color': highlight.style.fillColor,
+                        'fill-opacity': highlight.style.opacity ?? 0.5
+                    },
+                    filter: [
+                        'all',
+                        [
+                            'has',
+                            'layerFeatureId'
+                        ],
+                        [
+                            'match',
+                            [
+                                'get',
+                                'layerFeatureId'
+                            ],
+                            highlightFeatureIds,
+                            true,
+                            false
+                        ]
+                    ]
+                }, `highlight-${group.highlightId}-${index}`);
+            })) ?? [], [
+        highlightGroups
+    ]);
+    const markersComponents = useMemo(()=>markerGroups?.flatMap((markerGroup)=>{
+            const clusteredMarkers = clusterMarkers(mapRef.current, markerGroup.markers);
+            return clusteredMarkers.map((markers, i)=>{
+                if (1 === markers.length) {
+                    const marker = markers[0];
+                    return /*#__PURE__*/ jsx(Marker, {
+                        className: "map-marker",
+                        longitude: marker.longitude,
+                        latitude: marker.latitude,
+                        anchor: "center",
+                        onClick: (event)=>{
+                            marker.onClick?.();
+                            event.originalEvent.stopPropagation();
+                        },
+                        style: {
+                            backgroundColor: marker.selected ? markerGroup.style.iconColor : theme.palette.TwClrBg
+                        },
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            fillColor: marker.selected ? theme.palette.TwClrBg : markerGroup.style.iconColor,
+                            name: markerGroup.style.iconName,
+                            size: 'small'
+                        })
+                    }, `marker-${i}`);
+                } else if (markers.length > 1) {
+                    const latSum = markers.reduce((sum, marker)=>sum + marker.latitude, 0);
+                    const lngSum = markers.reduce((sum, marker)=>sum + marker.longitude, 0);
+                    const latAvg = latSum / markers.length;
+                    const lngAvg = lngSum / markers.length;
+                    const selected = markers.some((marker)=>marker.selected);
+                    return /*#__PURE__*/ jsxs(Marker, {
+                        className: "map-marker map-marker--cluster",
+                        longitude: lngAvg,
+                        latitude: latAvg,
+                        anchor: "center",
+                        onClick: (event)=>{
+                            mapRef.current?.easeTo({
+                                center: {
+                                    lat: latAvg,
+                                    lon: lngAvg
+                                },
+                                zoom: (zoom ?? 10) + 1,
+                                duration: 500
+                            });
+                            event.originalEvent.stopPropagation();
+                        },
+                        style: {
+                            backgroundColor: selected ? markerGroup.style.iconColor : theme.palette.TwClrBg
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx("p", {
+                                className: "count",
+                                children: markers.length
+                            }),
+                            /*#__PURE__*/ jsx(Icon, {
+                                fillColor: selected ? theme.palette.TwClrBg : markerGroup.style.iconColor,
+                                name: markerGroup.style.iconName,
+                                size: 'small'
+                            })
+                        ]
+                    }, `marker-${i}`);
+                }
+            });
+        }), [
+        markerGroups,
+        theme,
+        zoom
+    ]);
+    const onMouseMove = useCallback((event)=>{
+        if (event.features && event.features.length) {
+            const properties = event.features.map((feature)=>feature.properties).filter((featureProperties)=>featureProperties && void 0 !== featureProperties.id && void 0 !== featureProperties.priority && featureProperties.clickable);
+            if (properties.length) {
+                const topPriorityFeature = properties.reduce((top, current)=>current.priority > top.priority ? current : top, properties[0]);
+                setHoverFeatureId(topPriorityFeature.id);
+                return;
+            }
         }
-      });
-    });
-  }, [markerGroups, theme, zoom]);
-  const onMouseMove = useCallback(event => {
-    if (event.features && event.features.length) {
-      const properties = event.features.map(feature => feature.properties).filter(featureProperties => featureProperties && featureProperties.id !== undefined && featureProperties.priority !== undefined && featureProperties.clickable);
-      if (properties.length) {
-        const topPriorityFeature = properties.reduce((top, current) => {
-          return current.priority > top.priority ? current : top;
-        }, properties[0]);
-        setHoverFeatureId(topPriorityFeature.id);
-        return;
-      }
-    }
-    setHoverFeatureId(undefined);
-  }, []);
-  useEffect(() => {
-    if (!mapRef.current) {
-      return;
-    }
-    const observer = new ResizeObserver(() => {
-      mapRef.current?.resize();
-    });
-    observer.observe(mapRef.current.getContainer());
-    return () => observer.disconnect();
-  }, []);
-  useEffect(() => {
-    if (!mapRef.current) {
-      return;
-    }
-    mapRef.current.resize();
-  }, [drawerOpen]);
-
-  // Hovering interactive layers
-  const onMouseEnter = useCallback(() => setCursor(cursorInteract ?? 'pointer'), [cursorInteract]);
-  const onMouseLeave = useCallback(() => setCursor('auto'), []);
-
-  // Entering and exiting canvases
-  const onMouseOver = useCallback(() => setCursor(cursorMap ?? 'auto'), [cursorMap]);
-  const onMouseOut = useCallback(() => setCursor('auto'), []);
-
-  // On layer click
-  const onMapClick = useCallback(event => {
-    if (featureGroups && event.features?.length) {
-      const properties = event.features.map(feature => feature.properties).filter(featureProperties => featureProperties && featureProperties.id !== undefined && featureProperties.priority !== undefined && featureProperties.clickable);
-      if (properties.length) {
-        const topPriorityFeature = properties.reduce((top, current) => {
-          return current.priority > top.priority ? current : top;
-        }, properties[0]);
-        const clickedItem = featureGroups.flatMap(group => group.features).find(feature => feature.featureId === topPriorityFeature.id);
-        if (clickedItem && clickedItem.onClick) {
-          clickedItem.onClick();
-          return;
+        setHoverFeatureId(void 0);
+    }, []);
+    useEffect(()=>{
+        if (!mapRef.current) return;
+        const observer = new ResizeObserver(()=>{
+            mapRef.current?.resize();
+        });
+        observer.observe(mapRef.current.getContainer());
+        return ()=>observer.disconnect();
+    }, []);
+    useEffect(()=>{
+        if (!mapRef.current) return;
+        mapRef.current.resize();
+    }, [
+        drawerOpen
+    ]);
+    const onMouseEnter = useCallback(()=>setCursor(cursorInteract ?? 'pointer'), [
+        cursorInteract
+    ]);
+    const onMouseLeave = useCallback(()=>setCursor('auto'), []);
+    const onMouseOver = useCallback(()=>setCursor(cursorMap ?? 'auto'), [
+        cursorMap
+    ]);
+    const onMouseOut = useCallback(()=>setCursor('auto'), []);
+    const onMapClick = useCallback((event)=>{
+        if (featureGroups && event.features?.length) {
+            const properties = event.features.map((feature)=>feature.properties).filter((featureProperties)=>featureProperties && void 0 !== featureProperties.id && void 0 !== featureProperties.priority && featureProperties.clickable);
+            if (properties.length) {
+                const topPriorityFeature = properties.reduce((top, current)=>current.priority > top.priority ? current : top, properties[0]);
+                const clickedItem = featureGroups.flatMap((group)=>group.features).find((feature)=>feature.featureId === topPriorityFeature.id);
+                if (clickedItem && clickedItem.onClick) return void clickedItem.onClick();
+            }
         }
-      }
-      // If feature not clickable or not handled, fall through to canvas
-    }
-    if (onClickCanvas !== undefined) {
-      onClickCanvas(event);
-    }
-  }, [featureGroups, onClickCanvas]);
-  const orderedLayerIds = useMemo(() => {
-    return [...fillLayers.map(layer => layer.props.id), ...highlightLayers.map(layer => layer.props.id), ...borderLayers.map(layer => layer.props.id), ...textLayers.map(layer => layer.props.id)];
-  }, [borderLayers, fillLayers, highlightLayers, textLayers]);
-  useMaintainLayerOrder(mapRef, orderedLayerIds);
-  return /*#__PURE__*/jsxs(ReactMapbox, {
-    attributionControl: false,
-    cursor: cursor,
-    doubleClickZoom: !disableZoom && !disableDoubleClickZoom,
-    interactiveLayerIds: interactiveLayerIds,
-    initialViewState: initialViewState,
-    mapboxAccessToken: token,
-    mapStyle: stylesUrl[mapViewStyle],
-    ref: mapRefCallback,
-    scrollZoom: !disableZoom,
-    style: {
-      width: 'auto',
-      height: isDesktop ? 'auto' : '80vh',
-      flexGrow: isDesktop ? 1 : undefined
-    },
-    onClick: onMapClick,
-    onMove: onMove,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    onMouseOver: onMouseOver,
-    onMouseOut: onMouseOut,
-    onMouseMove: onMouseMove,
-    children: [isDesktop && !hideFullScreenControl && /*#__PURE__*/jsx(FullscreenControl, {
-      position: "top-left",
-      containerId: containerId
-    }), !hideZoomControl && /*#__PURE__*/jsx(NavigationControl, {
-      showCompass: false,
-      style: {
-        marginRight: theme.spacing(2),
-        marginBottom: theme.spacing(2)
-      },
-      position: "bottom-right"
-    }), !hideMapViewStyleControl && /*#__PURE__*/jsx(MapViewStyleControl, {
-      containerId: containerId,
-      mapViewStyle: mapViewStyle,
-      setMapViewStyle: setMapViewStyle
-    }), controlTopRight && /*#__PURE__*/jsx(Box, {
-      sx: {
-        height: 'max-content',
-        position: 'absolute',
-        right: theme.spacing(2),
-        top: theme.spacing(2),
-        width: 'max-content',
-        zIndex: 1000
-      },
-      children: controlTopRight
-    }), controlBottomLeft && /*#__PURE__*/jsx(Box, {
-      style: {
-        height: 'max-content',
-        position: 'absolute',
-        left: theme.spacing(2),
-        bottom: theme.spacing(4),
-        width: 'max-content',
-        zIndex: 1000
-      },
-      children: controlBottomLeft
-    }), geojson && /*#__PURE__*/jsxs(Source, {
-      id: "mapData",
-      type: "geojson",
-      data: geojson,
-      children: [fillLayers, highlightLayers, borderLayers, textLayers]
-    }), markersComponents]
-  }, mapId);
+        if (void 0 !== onClickCanvas) onClickCanvas(event);
+    }, [
+        featureGroups,
+        onClickCanvas
+    ]);
+    const orderedLayerIds = useMemo(()=>[
+            ...fillLayers.map((layer)=>layer.props.id),
+            ...highlightLayers.map((layer)=>layer.props.id),
+            ...borderLayers.map((layer)=>layer.props.id),
+            ...textLayers.map((layer)=>layer.props.id)
+        ], [
+        borderLayers,
+        fillLayers,
+        highlightLayers,
+        textLayers
+    ]);
+    useMaintainLayerOrder(mapRef, orderedLayerIds);
+    return /*#__PURE__*/ jsxs(ReactMapboxWrapper, {
+        attributionControl: false,
+        cursor: cursor,
+        doubleClickZoom: !disableZoom && !disableDoubleClickZoom,
+        interactiveLayerIds: interactiveLayerIds,
+        initialViewState: initialViewState,
+        mapboxAccessToken: token,
+        mapStyle: stylesUrl[mapViewStyle],
+        ref: mapRefCallback,
+        scrollZoom: !disableZoom,
+        style: {
+            width: 'auto',
+            height: isDesktop ? 'auto' : '80vh',
+            flexGrow: isDesktop ? 1 : void 0
+        },
+        onClick: onMapClick,
+        onMove: onMove,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onMouseOver: onMouseOver,
+        onMouseOut: onMouseOut,
+        onMouseMove: onMouseMove,
+        children: [
+            isDesktop && !hideFullScreenControl && /*#__PURE__*/ jsx(FullscreenControl, {
+                position: "top-left",
+                containerId: containerId
+            }),
+            !hideZoomControl && /*#__PURE__*/ jsx(NavigationControl, {
+                showCompass: false,
+                style: {
+                    marginRight: theme.spacing(2),
+                    marginBottom: theme.spacing(2)
+                },
+                position: "bottom-right"
+            }),
+            !hideMapViewStyleControl && /*#__PURE__*/ jsx(MapViewStyleControl, {
+                containerId: containerId,
+                mapViewStyle: mapViewStyle,
+                setMapViewStyle: setMapViewStyle
+            }),
+            controlTopRight && /*#__PURE__*/ jsx(Box, {
+                sx: {
+                    height: 'max-content',
+                    position: 'absolute',
+                    right: theme.spacing(2),
+                    top: theme.spacing(2),
+                    width: 'max-content',
+                    zIndex: 1000
+                },
+                children: controlTopRight
+            }),
+            controlBottomLeft && /*#__PURE__*/ jsx(Box, {
+                style: {
+                    height: 'max-content',
+                    position: 'absolute',
+                    left: theme.spacing(2),
+                    bottom: theme.spacing(4),
+                    width: 'max-content',
+                    zIndex: 1000
+                },
+                children: controlBottomLeft
+            }),
+            geojson && /*#__PURE__*/ jsxs(Source, {
+                id: "mapData",
+                type: "geojson",
+                data: geojson,
+                children: [
+                    fillLayers,
+                    highlightLayers,
+                    borderLayers,
+                    textLayers
+                ]
+            }),
+            markersComponents
+        ]
+    }, mapId);
 };
-
-export { MapBox as default };
+const Map_MapBox = MapBox;
+export default Map_MapBox;