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

package/components/Map/MapBox.js

@@ -1,554 +1,461 @@
-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
-                });
+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
             });
+          }
         });
-    }, [
-        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);
+      }
+    });
+  }, [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);
             }
+          }
         });
-        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`);
-        });
+        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 {
-            borderLayers: _borderLayers ?? [],
-            fillLayers: _fillLayers ?? [],
-            textLayers: _textLayers ?? []
+          type: 'Feature',
+          geometry: feature.geometry,
+          properties
         };
-    }, [
-        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;
-            }
-        }
-        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 (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
+      });
+    });
+    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
         },
-        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
+        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
                 },
-                children: controlBottomLeft
-            }),
-            geojson && /*#__PURE__*/ jsxs(Source, {
-                id: "mapData",
-                type: "geojson",
-                data: geojson,
-                children: [
-                    fillLayers,
-                    highlightLayers,
-                    borderLayers,
-                    textLayers
-                ]
-            }),
-            markersComponents
-        ]
-    }, mapId);
+                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 && 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;
+        }
+      }
+      // 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);
 };
-const Map_MapBox = MapBox;
-export default Map_MapBox;
+
+export { MapBox as default };