@terraware/web-components 3.5.9 → 3.5.11

package/components/Map/MapBox.d.ts

@@ -1,29 +1,71 @@
-/// <reference types="react" />
+import React from 'react';
+import { MultiPolygon } from 'geojson';
 import { MapMouseEvent } from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
-import { MapFillComponentStyle, MapIconComponentStyle } from './types';
-export type MapViewStyle = 'Outdoors' | 'Satellite' | 'Light' | 'Dark' | 'Streets';
-export declare const MapViewStyles: MapViewStyle[];
-export declare const stylesUrl: Record<MapViewStyle, string>;
+import { MapCursor, MapFillComponentStyle, MapIconComponentStyle, MapViewStyle } from './types';
+export type MapFeature = {
+    featureId: string;
+    geometry: MultiPolygon;
+    label?: string;
+    onClick?: () => void;
+    priority?: number;
+    selected?: boolean;
+};
+export type MapFeatureGroup = {
+    groupId: string;
+    hidden?: boolean;
+    features: MapFeature[];
+    style: MapFillComponentStyle;
+};
+export type MapHighlight = {
+    featureIds: {
+        featureGroupId: string;
+        featureId: string;
+    }[];
+    highlightId: string;
+    style: MapFillComponentStyle;
+};
+export type MapHighlightGroup = {
+    hidden?: boolean;
+    highlights: MapHighlight[];
+};
 export type MapMarker = {
-    featureId?: string;
     id: string;
     longitude: number;
     latitude: number;
-    style: MapIconComponentStyle | MapFillComponentStyle;
     onClick?: () => void;
     selected?: boolean;
 };
+export type MapMarkerGroup = {
+    hidden?: boolean;
+    markers: MapMarker[];
+    style: MapIconComponentStyle;
+};
 export type MapBoxProps = {
+    children?: React.ReactNode;
+    clusterRadius?: number;
     containerId?: string;
+    controlBottomLeft?: React.ReactNode;
+    controlTopRight?: React.ReactNode;
+    cursorInteract?: MapCursor;
+    cursorMap?: MapCursor;
+    disableDoubleClickZoom?: boolean;
     disableZoom?: boolean;
+    featureGroups?: MapFeatureGroup[];
     hideFullScreenControl?: boolean;
     hideMapViewStyleControl?: boolean;
     hideZoomControl?: boolean;
+    highlightGroups?: MapHighlightGroup[];
+    initialViewState?: {
+        latitude?: number;
+        longitude?: number;
+        zoom?: number;
+    };
     mapId: string;
+    mapImageUrls?: string[];
     mapViewStyle: MapViewStyle;
-    markers?: MapMarker[];
-    onClick?: (event: MapMouseEvent) => void;
+    markerGroups?: MapMarkerGroup[];
+    onClickCanvas?: (event: MapMouseEvent) => void;
     setMapViewStyle: (style: MapViewStyle) => void;
     token: string;
 };

package/components/Map/MapBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapBox.d.ts","sourceRoot":"","sources":["../../../src/components/Map/MapBox.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,8BAA8B,CAAC;AAKtC,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AACnF,eAAO,MAAM,aAAa,EAAE,YAAY,EAA0D,CAAC;AAEnG,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAMlD,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,qBAAqB,GAAG,qBAAqB,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,YAAY,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,eAAe,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,QAAA,MAAM,MAAM,UAAW,WAAW,KAAG,WA+FpC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"MapBox.d.ts","sourceRoot":"","sources":["../../../src/components/Map/MapBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAYtE,OAAO,EAA8B,YAAY,EAAE,MAAM,SAAS,CAAC;AACnE,OAAO,EAAuB,aAAa,EAAS,MAAM,WAAW,CAAC;AACtE,OAAO,8BAA8B,CAAC;AAKtC,OAAO,EACL,SAAS,EACT,qBAAqB,EACrB,qBAAqB,EAErB,YAAY,EAEb,MAAM,SAAS,CAAC;AAGjB,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAGF,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,KAAK,EAAE,qBAAqB,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,EAAE;QAAE,cAAc,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5D,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,qBAAqB,CAAC;CAC9B,CAAC;AAGF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,YAAY,EAAE,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB,KAAK,EAAE,qBAAqB,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,eAAe,EAAE,CAAC;IAClC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACtC,gBAAgB,CAAC,EAAE;QACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,YAAY,EAAE,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,cAAc,EAAE,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC/C,eAAe,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,QAAA,MAAM,MAAM,UAAW,WAAW,KAAG,WA4iBpC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/components/Map/MapBox.js

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.stylesUrl = exports.default = exports.MapViewStyles = void 0;
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _mapbox = _interopRequireWildcard(require("react-map-gl/mapbox"));
 var _material = require("@mui/material");
@@ -13,25 +13,35 @@ require("mapbox-gl/dist/mapbox-gl.css");
 var _utils = require("../../utils");
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 var _MapViewStyleControl = _interopRequireDefault(require("./MapViewStyleControl"));
-const MapViewStyles = exports.MapViewStyles = ['Outdoors', 'Satellite', 'Light', 'Dark', 'Streets'];
-const stylesUrl = exports.stylesUrl = {
-  Outdoors: 'mapbox://styles/mapbox/outdoors-v12?optimize=true',
-  Satellite: 'mapbox://styles/mapbox/satellite-streets-v12?optimize=true',
-  Streets: 'mapbox://styles/mapbox/streets-v12?optimize=true',
-  Light: 'mapbox://styles/mapbox/light-v11?optimize=true',
-  Dark: 'mapbox://styles/mapbox/dark-v11?optimize=true'
-};
+var _types = require("./types");
+// Each layer item will become a feature, with a property of id.
+
+// Each layer will become a set of features that have the same type.
+
+// Additional shading/annotations for map entities
+
 const MapBox = props => {
   const {
+    children,
+    clusterRadius,
     containerId,
+    controlBottomLeft,
+    controlTopRight,
+    cursorInteract,
+    cursorMap,
+    disableDoubleClickZoom,
     disableZoom,
+    featureGroups,
     hideFullScreenControl,
     hideMapViewStyleControl,
     hideZoomControl,
+    highlightGroups,
+    initialViewState,
     mapId,
+    mapImageUrls,
     mapViewStyle,
-    markers,
-    onClick,
+    markerGroups,
+    onClickCanvas,
     setMapViewStyle,
     token
   } = props;
@@ -40,58 +50,387 @@ const MapBox = props => {
   const {
     isDesktop
   } = (0, _utils.useDeviceInfo)();
+  const [cursor, setCursor] = (0, _react.useState)('auto');
+  const [hoverFeatureId, setHoverFeatureId] = (0, _react.useState)();
+  const [zoom, setZoom] = (0, _react.useState)();
+  const loadImages = (0, _react.useCallback)(map => {
+    mapImageUrls === null || mapImageUrls === void 0 ? void 0 : mapImageUrls.forEach(url => {
+      if (!map.hasImage(url)) {
+        map.loadImage(url, (error, image) => {
+          if (image) {
+            map.addImage(url, image, {
+              sdf: true
+            });
+          }
+        });
+      }
+    });
+  }, [mapImageUrls]);
   const mapRefCallback = (0, _react.useCallback)(map => {
     if (map !== null) {
       mapRef.current = map;
+      setZoom(map.getZoom());
+      loadImages(map);
     }
   }, []);
+  const onMove = (0, _react.useCallback)(view => {
+    setZoom(view.viewState.zoom);
+  }, []);
+  const clusterMarkers = (0, _react.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 !== null && clusterRadius !== void 0 ? clusterRadius : 40)) {
+              cluster.push(otherMarker);
+              visited.add(otherMarker.id);
+            }
+          }
+        });
+        clusters.push(cluster);
+      }
+    });
+    return clusters;
+  }, [clusterRadius]);
+
+  // Find all layers with at least some clickable elements
+  const interactiveLayerIds = (0, _react.useMemo)(() => {
+    var _featureGroups$filter;
+    return featureGroups === null || featureGroups === void 0 ? void 0 : (_featureGroups$filter = featureGroups.filter(group => group.features.some(feature => feature.onClick !== undefined))) === null || _featureGroups$filter === void 0 ? void 0 : _featureGroups$filter.map(group => group.groupId);
+  }, [featureGroups]);
+  const geojson = (0, _react.useMemo)(() => {
+    const features = featureGroups === null || featureGroups === void 0 ? void 0 : featureGroups.flatMap(group => {
+      return group.features.map(feature => {
+        var _feature$priority, _feature$selected;
+        const properties = {
+          id: feature.featureId,
+          clickable: feature.onClick !== undefined,
+          label: feature.label,
+          layerFeatureId: "".concat(group.groupId, "/").concat(feature.featureId),
+          layerId: group.groupId,
+          priority: (_feature$priority = feature.priority) !== null && _feature$priority !== void 0 ? _feature$priority : 0,
+          selected: (_feature$selected = feature.selected) !== null && _feature$selected !== void 0 ? _feature$selected : false
+        };
+        return {
+          type: 'Feature',
+          geometry: feature.geometry,
+          properties
+        };
+      });
+    });
+    return features ? {
+      type: 'FeatureCollection',
+      features
+    } : undefined;
+  }, [featureGroups]);
+  const {
+    borderLayers,
+    fillLayers,
+    textLayers
+  } = (0, _react.useMemo)(() => {
+    const visibleGroups = featureGroups === null || featureGroups === void 0 ? void 0 : featureGroups.filter(group => !group.hidden);
+    const _borderLayers = visibleGroups === null || visibleGroups === void 0 ? void 0 : visibleGroups.map(group => {
+      return /*#__PURE__*/_react.default.createElement(_mapbox.Layer, {
+        key: "".concat(group.groupId, "-border"),
+        id: "".concat(group.groupId, "-border"),
+        source: 'mapData',
+        type: "line",
+        paint: {
+          'line-color': group.style.borderColor,
+          'line-width': 2
+        },
+        filter: ['==', ['get', 'layerId'], group.groupId]
+      });
+    });
+    const _fillLayers = visibleGroups === null || visibleGroups === void 0 ? void 0 : visibleGroups.map(group => {
+      var _group$style$opacity;
+      const opacity = Math.min(0.4, (_group$style$opacity = group.style.opacity) !== null && _group$style$opacity !== void 0 ? _group$style$opacity : 0.2);
+      const selectedOpacity = opacity * 2;
+      const hoverOpacity = opacity * 1.5;
+      const hoverAndSelectedOpacity = opacity * 2.5;
+      const groupFilter = ['==', ['get', 'layerId'], group.groupId];
+      const selectedFilter = ['==', ['get', 'selected'], true];
+      const notSelectedFilter = ['==', ['get', 'selected'], false];
+      const hoverFilter = ['==', ['get', 'id'], hoverFeatureId !== null && hoverFeatureId !== void 0 ? hoverFeatureId : null];
+      const notHoverFilter = ['!=', ['get', 'id'], hoverFeatureId !== null && hoverFeatureId !== void 0 ? hoverFeatureId : null];
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_mapbox.Layer, {
+        key: group.groupId,
+        id: group.groupId,
+        source: 'mapData',
+        type: 'fill',
+        paint: {
+          'fill-opacity': 0
+        },
+        filter: groupFilter
+      }), /*#__PURE__*/_react.default.createElement(_mapbox.Layer, {
+        key: "".concat(group.groupId, "-unselected"),
+        id: "".concat(group.groupId, "-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]
+      }), /*#__PURE__*/_react.default.createElement(_mapbox.Layer, {
+        key: "".concat(group.groupId, "-selected"),
+        id: "".concat(group.groupId, "-selected"),
+        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]
+      }), /*#__PURE__*/_react.default.createElement(_mapbox.Layer, {
+        key: "".concat(group.groupId, "-hover"),
+        id: "".concat(group.groupId, "-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]
+      }), /*#__PURE__*/_react.default.createElement(_mapbox.Layer, {
+        key: "".concat(group.groupId, "-selected-hover"),
+        id: "".concat(group.groupId, "-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]
+      }));
+    });
+    const _textLayers = visibleGroups === null || visibleGroups === void 0 ? void 0 : visibleGroups.map(group => {
+      const groupFilter = ['==', ['get', 'layerId'], group.groupId];
+      const labelFilter = ['has', 'label'];
+      return /*#__PURE__*/_react.default.createElement(_mapbox.Layer, {
+        key: "".concat(group.groupId, "-label"),
+        id: "".concat(group.groupId, "-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]
+      });
+    });
+    return {
+      borderLayers: _borderLayers,
+      fillLayers: _fillLayers,
+      textLayers: _textLayers
+    };
+  }, [featureGroups, hoverFeatureId]);
+  const highlightLayers = (0, _react.useMemo)(() => {
+    var _visibleGroups$flatMa;
+    const visibleGroups = highlightGroups === null || highlightGroups === void 0 ? void 0 : highlightGroups.filter(group => !group.hidden);
+    return (_visibleGroups$flatMa = visibleGroups === null || visibleGroups === void 0 ? void 0 : visibleGroups.flatMap(group => {
+      return group.highlights.map(highlight => {
+        var _highlight$style$opac, _highlight$style$opac2;
+        const highlightFeatureIds = highlight.featureIds.map(_ref => {
+          let {
+            featureGroupId,
+            featureId
+          } = _ref;
+          return "".concat(featureGroupId, "/").concat(featureId);
+        });
+        return /*#__PURE__*/_react.default.createElement(_mapbox.Layer, {
+          key: "highlight-".concat(highlight.highlightId),
+          id: "highlight-".concat(highlight.highlightId),
+          source: 'mapData',
+          type: 'fill',
+          paint: highlight.style.fillPatternUrl ? {
+            'fill-pattern': highlight.style.fillPatternUrl,
+            'fill-opacity': (_highlight$style$opac = highlight.style.opacity) !== null && _highlight$style$opac !== void 0 ? _highlight$style$opac : 0.5
+          } : {
+            'fill-color': highlight.style.fillColor,
+            'fill-opacity': (_highlight$style$opac2 = highlight.style.opacity) !== null && _highlight$style$opac2 !== void 0 ? _highlight$style$opac2 : 0.5
+          },
+          filter: ['all', ['has', 'layerFeatureId'], ['match', ['get', 'layerFeatureId'], highlightFeatureIds, true, false]]
+        });
+      });
+    })) !== null && _visibleGroups$flatMa !== void 0 ? _visibleGroups$flatMa : [];
+  }, [highlightGroups]);
   const markersComponents = (0, _react.useMemo)(() => {
-    return markers === null || markers === void 0 ? void 0 : markers.map(marker => {
-      // TODO: implement clustering
-      const fillStyle = marker.style.type === 'fill' ? {
-        border: "2px solid ".concat(marker.style.borderColor),
-        backgroundColor: marker.style.fillColor,
-        backgroundImage: marker.style.fillPatternUrl ? "url('".concat(marker.style.fillPatternUrl, "')") : undefined,
-        backgroundRepeat: 'repeat',
-        opacity: marker.style.opacity
-      } : undefined;
-      return /*#__PURE__*/_react.default.createElement(_mapbox.Marker, {
-        className: "map-marker",
-        key: marker.id,
-        longitude: marker.longitude,
-        latitude: marker.latitude,
-        anchor: "center",
-        onClick: marker.onClick,
-        style: fillStyle
-      }, marker.style.type === 'icon' && /*#__PURE__*/_react.default.createElement(_Icon.default, {
-        fillColor: marker.style.iconColor,
-        name: marker.style.iconName,
-        size: 'small',
-        style: {
-          opacity: marker.style.iconOpacity
+    var _markerGroups$filter;
+    return markerGroups === null || markerGroups === void 0 ? void 0 : (_markerGroups$filter = markerGroups.filter(markerGroup => !markerGroup.hidden)) === null || _markerGroups$filter === void 0 ? void 0 : _markerGroups$filter.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__*/_react.default.createElement(_mapbox.Marker, {
+            className: "map-marker",
+            key: "marker-".concat(i),
+            longitude: marker.longitude,
+            latitude: marker.latitude,
+            anchor: "center",
+            onClick: event => {
+              var _marker$onClick;
+              (_marker$onClick = marker.onClick) === null || _marker$onClick === void 0 ? void 0 : _marker$onClick.call(marker);
+              event.originalEvent.stopPropagation();
+            },
+            style: {
+              backgroundColor: marker.selected ? markerGroup.style.iconColor : theme.palette.TwClrBg
+            }
+          }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+            fillColor: marker.selected ? theme.palette.TwClrBg : markerGroup.style.iconColor,
+            name: markerGroup.style.iconName,
+            size: 'small'
+          }));
+        } 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__*/_react.default.createElement(_mapbox.Marker, {
+            className: "map-marker map-marker--cluster",
+            key: "marker-".concat(i),
+            longitude: lngAvg,
+            latitude: latAvg,
+            anchor: "center",
+            onClick: event => {
+              var _mapRef$current;
+              (_mapRef$current = mapRef.current) === null || _mapRef$current === void 0 ? void 0 : _mapRef$current.easeTo({
+                center: {
+                  lat: latAvg,
+                  lon: lngAvg
+                },
+                zoom: (zoom !== null && zoom !== void 0 ? zoom : 10) + 1,
+                duration: 500
+              });
+              event.originalEvent.stopPropagation();
+            },
+            style: {
+              backgroundColor: selected ? markerGroup.style.iconColor : theme.palette.TwClrBg
+            }
+          }, /*#__PURE__*/_react.default.createElement("p", {
+            className: "title"
+          }, markers.length), /*#__PURE__*/_react.default.createElement(_Icon.default, {
+            fillColor: selected ? theme.palette.TwClrBg : markerGroup.style.iconColor,
+            name: markerGroup.style.iconName,
+            size: 'small'
+          }));
         }
-      }));
+      });
     });
-  }, [markers]);
+  }, [markerGroups, theme, zoom]);
+  const onMouseMove = (0, _react.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);
+  }, []);
+
+  // Hovering interactive layers
+  const onMouseEnter = (0, _react.useCallback)(event => {
+    if (event.features && event.features.some(feature => {
+      var _feature$properties;
+      return (_feature$properties = feature.properties) === null || _feature$properties === void 0 ? void 0 : _feature$properties.clickable;
+    })) {
+      setCursor(cursorInteract !== null && cursorInteract !== void 0 ? cursorInteract : 'auto');
+    } else {
+      setCursor('auto');
+    }
+  }, [cursorInteract]);
+  const onMouseLeave = (0, _react.useCallback)(() => setCursor('auto'), []);
+
+  // Entering and exiting canvases
+  const onMouseOver = (0, _react.useCallback)(() => setCursor(cursorMap !== null && cursorMap !== void 0 ? cursorMap : 'auto'), [cursorMap]);
+  const onMouseOut = (0, _react.useCallback)(() => setCursor('auto'), []);
+
+  // On layer click
+  const onMapClick = (0, _react.useCallback)(event => {
+    var _event$features;
+    if (featureGroups && (_event$features = event.features) !== null && _event$features !== void 0 && _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]);
   return /*#__PURE__*/_react.default.createElement(_mapbox.default, {
     key: mapId,
     attributionControl: false,
+    cursor: cursor,
+    doubleClickZoom: !disableZoom && !disableDoubleClickZoom,
+    interactiveLayerIds: interactiveLayerIds,
+    initialViewState: initialViewState,
     mapboxAccessToken: token,
+    mapStyle: _types.stylesUrl[mapViewStyle],
     ref: mapRefCallback,
-    mapStyle: stylesUrl[mapViewStyle],
-    initialViewState: {
-      longitude: -122.4,
-      latitude: 37.8,
-      zoom: 14
-    },
+    scrollZoom: !disableZoom,
     style: {
       width: 'fill',
       height: isDesktop ? 'fill' : '80vh',
       flexGrow: isDesktop ? 1 : undefined
     },
-    scrollZoom: !disableZoom,
-    doubleClickZoom: !disableZoom,
-    onClick: onClick
+    onClick: onMapClick,
+    onMove: onMove,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onMouseOver: onMouseOver,
+    onMouseOut: onMouseOut,
+    onMouseMove: onMouseMove
   }, isDesktop && !hideFullScreenControl && /*#__PURE__*/_react.default.createElement(_mapbox.FullscreenControl, {
     position: "top-left",
     containerId: containerId
@@ -106,6 +445,28 @@ const MapBox = props => {
     containerId: containerId,
     mapViewStyle: mapViewStyle,
     setMapViewStyle: setMapViewStyle
-  }), markersComponents);
+  }), controlTopRight && /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: {
+      height: 'max-content',
+      position: 'absolute',
+      right: theme.spacing(2),
+      top: theme.spacing(2),
+      width: 'max-content',
+      zIndex: 1000
+    }
+  }, controlTopRight), controlBottomLeft && /*#__PURE__*/_react.default.createElement(_material.Box, {
+    style: {
+      height: 'max-content',
+      position: 'absolute',
+      left: theme.spacing(2),
+      bottom: theme.spacing(4),
+      width: 'max-content',
+      zIndex: 1000
+    }
+  }, controlBottomLeft), geojson && /*#__PURE__*/_react.default.createElement(_mapbox.Source, {
+    id: "mapData",
+    type: "geojson",
+    data: geojson
+  }, borderLayers, fillLayers, highlightLayers, textLayers), markersComponents, children);
 };
 var _default = exports.default = MapBox;

package/components/Map/MapDateSliderControl.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { DateTime } from 'luxon';
+export type MapDateSliderControlProps = {
+    dates: DateTime[];
+    selectedDate: DateTime;
+    onChange: (newDate: DateTime) => void;
+};
+declare const MapDateSliderControl: ({ dates, selectedDate, onChange }: MapDateSliderControlProps) => JSX.Element;
+export default MapDateSliderControl;
+//# sourceMappingURL=MapDateSliderControl.d.ts.map

package/components/Map/MapDateSliderControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapDateSliderControl.d.ts","sourceRoot":"","sources":["../../../src/components/Map/MapDateSliderControl.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAKjC,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,YAAY,EAAE,QAAQ,CAAC;IACvB,QAAQ,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,QAAA,MAAM,oBAAoB,sCAAuC,yBAAyB,KAAG,WA0D5F,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/components/Map/MapDateSliderControl.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _luxon = require("luxon");
+var _date = require("../../utils/date");
+var _Slider = _interopRequireDefault(require("../Slider"));
+const MapDateSliderControl = _ref => {
+  let {
+    dates,
+    selectedDate,
+    onChange
+  } = _ref;
+  const theme = (0, _material.useTheme)();
+  const earliestDate = (0, _react.useMemo)(() => {
+    return dates.reduce((earliest, current) => {
+      return current < earliest ? current : earliest;
+    });
+  }, [dates]);
+  const latestDate = (0, _react.useMemo)(() => {
+    return dates.reduce((latest, current) => {
+      return current > latest ? current : latest;
+    });
+  }, [dates]);
+  const marks = (0, _react.useMemo)(() => {
+    return dates.map(date => ({
+      value: date.valueOf()
+    }));
+  }, [dates]);
+  const getDateString = date => (0, _date.getShortDate)(date);
+  const getDateLabel = date => /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    fontSize: "12px"
+  }, getDateString(date));
+  return /*#__PURE__*/_react.default.createElement(_material.Card, {
+    style: {
+      border: "1px solid ".concat(theme.palette.TwClrBrdrTertiary),
+      borderRadius: '8px',
+      display: 'flex',
+      flexDirection: 'column',
+      padding: theme.spacing(2),
+      maxWidth: '270px',
+      width: dates.length > 1 ? '270px' : undefined
+    }
+  }, selectedDate && /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    fontSize: "14px",
+    fontWeight: 600,
+    textAlign: "right"
+  }, getDateString(selectedDate)), dates.length > 1 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Slider.default, {
+    value: selectedDate.valueOf(),
+    min: earliestDate.valueOf(),
+    max: latestDate.valueOf(),
+    marks: marks,
+    valueLabelDisplay: "off",
+    onChange: value => onChange(_luxon.DateTime.fromMillis(value))
+  }), /*#__PURE__*/_react.default.createElement(_material.Box, {
+    display: "flex",
+    justifyContent: "space-between"
+  }, getDateLabel(earliestDate), getDateLabel(latestDate))));
+};
+var _default = exports.default = MapDateSliderControl;

package/components/Map/MapLegend.d.ts

@@ -1,36 +1,36 @@
 /// <reference types="react" />
 import { MapFillComponentStyle, MapIconComponentStyle } from './types';
-export type MapLayerItem = {
+export type MapLayerLegendItem = {
     disabled?: boolean;
     id: string;
     label: string;
     style: MapIconComponentStyle | MapFillComponentStyle;
 };
-export type MapLayerGroup = {
+export type MapLayerLegendGroup = {
     type: 'layer';
-    items: MapLayerItem[];
+    items: MapLayerLegendItem[];
     setSelectedLayer: (id: string) => void;
     selectedLayer: string;
 };
-export type MapMarkerItem = {
+export type MapMarkerLegendItem = {
     disabled?: boolean;
     id: string;
     label: string;
-    style: MapIconComponentStyle | MapFillComponentStyle;
+    style: MapIconComponentStyle;
     setVisible?: (visible: boolean) => void;
     visible: boolean;
 };
-export type MapMarkerGroup = {
+export type MapMarkerLegendGroup = {
     type: 'marker';
-    items: MapMarkerItem[];
+    items: MapMarkerLegendItem[];
 };
-export type MapHighlightItem = {
+export type MapHighlightLegendItem = {
     label: string;
     style: MapIconComponentStyle | MapFillComponentStyle;
 };
-export type MapHighlightGroup = {
+export type MapHighlightLegendGroup = {
     type: 'highlight';
-    items: MapHighlightItem[];
+    items: MapHighlightLegendItem[];
     setVisible?: (visible: boolean) => void;
     visible: boolean;
 };
@@ -38,7 +38,7 @@ export type MapLegendGroup = {
     disabled?: boolean;
     tooltip?: string;
     title: string;
-} & (MapMarkerGroup | MapLayerGroup | MapHighlightGroup);
+} & (MapMarkerLegendGroup | MapLayerLegendGroup | MapHighlightLegendGroup);
 export type MapLegendProps = {
     legends: MapLegendGroup[];
 };

package/components/Map/MapLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapLegend.d.ts","sourceRoot":"","sources":["../../../src/components/Map/MapLegend.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,qBAAqB,GAAG,qBAAqB,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,qBAAqB,GAAG,qBAAqB,CAAC;IACrD,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,qBAAqB,GAAG,qBAAqB,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,CAAC,cAAc,GAAG,aAAa,GAAG,iBAAiB,CAAC,CAAC;AAEzD,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,SAAS,gBAAiB,cAAc,KAAG,WAqLhD,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"MapLegend.d.ts","sourceRoot":"","sources":["../../../src/components/Map/MapLegend.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEvE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,qBAAqB,GAAG,qBAAqB,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,qBAAqB,CAAC;IAC7B,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,mBAAmB,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,qBAAqB,GAAG,qBAAqB,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,sBAAsB,EAAE,CAAC;IAChC,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,CAAC,oBAAoB,GAAG,mBAAmB,GAAG,uBAAuB,CAAC,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,SAAS,gBAAiB,cAAc,KAAG,WAqLhD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/Map/MapLegend.js

@@ -60,14 +60,13 @@ const MapLegend = _ref => {
             name: item.style.iconName,
             fillColor: item.style.iconColor,
             style: {
-              marginRight: theme.spacing(1),
-              opacity: item.style.iconOpacity
+              marginRight: theme.spacing(1)
             },
             size: 'small'
           });
         } else {
           var _item$style$opacity, _item$style$borderCol;
-          const opacity = (_item$style$opacity = item.style.opacity) !== null && _item$style$opacity !== void 0 ? _item$style$opacity : 1.0;
+          const opacity = (_item$style$opacity = item.style.opacity) !== null && _item$style$opacity !== void 0 ? _item$style$opacity : 0.2;
           return /*#__PURE__*/_react.default.createElement(_material.Box, {
             sx: {
               border: "2px solid ".concat((_item$style$borderCol = item.style.borderColor) !== null && _item$style$borderCol !== void 0 ? _item$style$borderCol : theme.palette.TwClrBrdr),

package/components/Map/MapViewStyleControl.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { MapViewStyle } from './MapBox';
+import { MapViewStyle } from './types';
 type MapViewStyleControlProps = {
     containerId?: string;
     mapViewStyle: MapViewStyle;

package/components/Map/MapViewStyleControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapViewStyleControl.d.ts","sourceRoot":"","sources":["../../../src/components/Map/MapViewStyleControl.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,YAAY,EAAiB,MAAM,UAAU,CAAC;AAEvD,KAAK,wBAAwB,GAAG;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,YAAY,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,MAAM,CAAC;IACpD,eAAe,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,QAAA,MAAM,mBAAmB,uEAKtB,wBAAwB,KAAG,WAAW,GAAG,SA8D3C,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"MapViewStyleControl.d.ts","sourceRoot":"","sources":["../../../src/components/Map/MapViewStyleControl.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,YAAY,EAAiB,MAAM,SAAS,CAAC;AAEtD,KAAK,wBAAwB,GAAG;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,YAAY,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,MAAM,CAAC;IACpD,eAAe,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,QAAA,MAAM,mBAAmB,uEAKtB,wBAAwB,KAAG,WAAW,GAAG,SA8D3C,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/components/Map/MapViewStyleControl.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
 var _PopoverMenu = _interopRequireDefault(require("../PopoverMenu"));
-var _MapBox = require("./MapBox");
+var _types = require("./types");
 const MapViewStyleControl = _ref => {
   var _mapViewStyleNames2;
   let {
@@ -20,7 +20,7 @@ const MapViewStyleControl = _ref => {
   } = _ref;
   const theme = (0, _material.useTheme)();
   const viewOptions = (0, _react.useMemo)(() => {
-    return _MapBox.MapViewStyles.map(style => {
+    return _types.MapViewStyles.map(style => {
       var _mapViewStyleNames;
       return {
         label: (_mapViewStyleNames = mapViewStyleNames === null || mapViewStyleNames === void 0 ? void 0 : mapViewStyleNames(style)) !== null && _mapViewStyleNames !== void 0 ? _mapViewStyleNames : style,

package/components/Map/styles.scss

@@ -97,5 +97,22 @@
   border-radius: 50%;
   cursor: pointer;
   display: flex;
+  flex-direction: column;
   justify-content: center;
+
+  &--cluster {
+    width: 42px;
+    height: 42px;
+
+    .count {
+      font-family: 'Inter', sans-serif;
+      font-size: 10px;
+      font-weight: 600;
+      line-height: 16px;
+      color: $tw-clr-txt;
+      text-align: center;
+      margin: 0;
+      width: 100%;
+    }
+  }
 }

package/components/Map/types.d.ts

@@ -1,8 +1,19 @@
 import { IconName } from '../Icon/icons';
+/**
+ * Properties class for GeoJson, with a few reserved object defined.
+ */
+export type MapProperties = {
+    id: string;
+    clickable: boolean;
+    layerFeatureId: string;
+    layerId: string;
+    priority: number;
+    [name: string]: any;
+};
+export type MapCursor = 'auto' | 'crosshair' | 'default' | 'pointer' | 'grab';
 export type MapIconComponentStyle = {
     iconColor: string;
     iconName: IconName;
-    iconOpacity?: number;
     type: 'icon';
 };
 export type MapFillComponentStyle = {
@@ -12,4 +23,7 @@ export type MapFillComponentStyle = {
     opacity?: number;
     type: 'fill';
 };
+export type MapViewStyle = 'Outdoors' | 'Satellite' | 'Light' | 'Dark' | 'Streets';
+export declare const MapViewStyles: MapViewStyle[];
+export declare const stylesUrl: Record<MapViewStyle, string>;
 //# sourceMappingURL=types.d.ts.map

package/components/Map/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Map/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,qBAAqB,GAAG;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,QAAQ,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Map/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAE9E,MAAM,MAAM,qBAAqB,GAAG;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,QAAQ,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AACnF,eAAO,MAAM,aAAa,EAAE,YAAY,EAA0D,CAAC;AAEnG,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAMlD,CAAC"}

package/components/Map/types.js

@@ -2,4 +2,17 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.stylesUrl = exports.MapViewStyles = void 0;
+/**
+ * Properties class for GeoJson, with a few reserved object defined.
+ */
+
+const MapViewStyles = exports.MapViewStyles = ['Outdoors', 'Satellite', 'Light', 'Dark', 'Streets'];
+const stylesUrl = exports.stylesUrl = {
+  Outdoors: 'mapbox://styles/mapbox/outdoors-v12?optimize=true',
+  Satellite: 'mapbox://styles/mapbox/satellite-streets-v12?optimize=true',
+  Streets: 'mapbox://styles/mapbox/streets-v12?optimize=true',
+  Light: 'mapbox://styles/mapbox/light-v11?optimize=true',
+  Dark: 'mapbox://styles/mapbox/dark-v11?optimize=true'
+};

package/license-report.html

@@ -45,6 +45,6 @@ th, td {
     padding: 15px;
 }
 </style>
-<table><thead><tr><th class="string">department</th><th class="string">related to</th><th class="string">name</th><th class="string">license period</th><th class="string">material / not material</th><th class="string">license type</th><th class="string">link</th><th class="string">remote version</th><th class="string">installed version</th><th class="string">defined version</th><th class="string">author</th></tr></thead><tbody><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">@dnd-kit/core</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/clauderic/dnd-kit.git</td><td class="string">6.3.1</td><td class="string">6.1.0</td><td class="string">^6.0.7</td><td class="string">Claudéric Demers</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">@dnd-kit/sortable</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/clauderic/dnd-kit.git</td><td class="string">7.0.2</td><td class="string">7.0.2</td><td class="string">^7.0.2</td><td class="string">Claudéric Demers</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">@emotion/react</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/emotion-js/emotion.git#main</td><td class="string">11.14.0</td><td class="string">11.11.4</td><td class="string">^11.11.3</td><td class="string">Emotion Contributors</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">@emotion/styled</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/emotion-js/emotion.git#main</td><td class="string">11.14.1</td><td class="string">11.11.5</td><td class="string">^11.11.3</td><td class="string">n/a</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">@mui/icons-material</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/mui/material-ui.git</td><td class="string">6.5.0</td><td class="string">6.5.0</td><td class="string">^6.0.0</td><td class="string">MUI Team</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">@mui/lab</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/mui/material-ui.git</td><td class="string">6.0.1-beta.36</td><td class="string">6.0.1-beta.36</td><td class="string">^6.0.1-beta.36</td><td class="string">MUI Team</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">@mui/material</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/mui/material-ui.git</td><td class="string">6.5.0</td><td class="string">6.5.0</td><td class="string">^6.0.0</td><td class="string">MUI Team</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">@mui/x-date-pickers</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/mui/mui-x.git</td><td class="string">7.29.4</td><td class="string">7.22.0</td><td class="string">^7.22.0</td><td class="string">MUI Team</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">classnames</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/JedWatson/classnames.git</td><td class="string">2.5.1</td><td class="string">2.5.1</td><td class="string">^2.3.2</td><td class="string">Jed Watson</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">luxon</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/moment/luxon.git</td><td class="string">3.7.1</td><td class="string">3.4.4</td><td class="string">^3.3.0</td><td class="string">Isaac Cambron</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">mapbox-gl</td><td class="string">perpetual</td><td class="string">material</td><td class="string">SEE LICENSE IN LICENSE.txt</td><td class="string">git://github.com/mapbox/mapbox-gl-js.git</td><td class="string">3.14.0</td><td class="string">3.13.0</td><td class="string">^3.13.0</td><td class="string">n/a</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">react</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/facebook/react.git</td><td class="string">18.3.1</td><td class="string">18.3.1</td><td class="string">^18.2.0</td><td class="string">n/a</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">react-dom</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/facebook/react.git</td><td class="string">18.3.1</td><td class="string">18.3.1</td><td class="string">^18.2.0</td><td class="string">n/a</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">react-intersection-observer</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/thebuilder/react-intersection-observer.git</td><td class="string">9.16.0</td><td class="string">9.10.2</td><td class="string">^9.5.2</td><td class="string">Daniel Schmidt</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">react-map-gl</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">https://github.com/visgl/react-map-gl.git</td><td class="string">8.0.4</td><td class="string">8.0.4</td><td class="string">^8.0.4</td><td class="string">n/a</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">react-multi-carousel</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/YIZHUANG/react-multi-carousel.git</td><td class="string">2.8.6</td><td class="string">2.8.5</td><td class="string">^2.8.2</td><td class="string">YI ZHUANG https://github.com/YIZHUANG</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">react-responsive</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git://github.com/contra/react-responsive.git</td><td class="string">9.0.2</td><td class="string">9.0.2</td><td class="string">^9.0.2</td><td class="string">Contra <yo@contra.io> (https://contra.io)</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">react-sortable-hoc</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/clauderic/react-sortable-hoc.git</td><td class="string">2.0.0</td><td class="string">2.0.0</td><td class="string">^2.0.0</td><td class="string">Clauderic Demers me@ced.io</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">sass</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/sass/dart-sass.git</td><td class="string">1.90.0</td><td class="string">1.77.2</td><td class="string">^1.75.0</td><td class="string">Natalie Weizenbaum nweiz@google.com https://github.com/nex3</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">tinycolor2</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/bgrins/TinyColor.git</td><td class="string">1.6.0</td><td class="string">1.6.0</td><td class="string">^1.6.0</td><td class="string">Brian Grinstead <briangrinstead@gmail.com> (http://briangrinstead.com)</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">tslint</td><td class="string">perpetual</td><td class="string">material</td><td class="string">Apache-2.0</td><td class="string">https://github.com/palantir/tslint.git</td><td class="string">6.1.3</td><td class="string">6.1.3</td><td class="string">^6.1.3</td><td class="string">n/a</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">web-vitals</td><td class="string">perpetual</td><td class="string">material</td><td class="string">Apache-2.0</td><td class="string">git+https://github.com/GoogleChrome/web-vitals.git</td><td class="string">3.5.2</td><td class="string">3.5.2</td><td class="string">^3.5.2</td><td class="string">Philip Walton philip@philipwalton.com http://philipwalton.com</td></tr></tbody></table>
+<table><thead><tr><th class="string">department</th><th class="string">related to</th><th class="string">name</th><th class="string">license period</th><th class="string">material / not material</th><th class="string">license type</th><th class="string">link</th><th class="string">remote version</th><th class="string">installed version</th><th class="string">defined version</th><th class="string">author</th></tr></thead><tbody><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">@dnd-kit/core</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/clauderic/dnd-kit.git</td><td class="string">6.3.1</td><td class="string">6.1.0</td><td class="string">^6.0.7</td><td class="string">Claudéric Demers</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">@dnd-kit/sortable</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/clauderic/dnd-kit.git</td><td class="string">7.0.2</td><td class="string">7.0.2</td><td class="string">^7.0.2</td><td class="string">Claudéric Demers</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">@emotion/react</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/emotion-js/emotion.git#main</td><td class="string">11.14.0</td><td class="string">11.11.4</td><td class="string">^11.11.3</td><td class="string">Emotion Contributors</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">@emotion/styled</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/emotion-js/emotion.git#main</td><td class="string">11.14.1</td><td class="string">11.11.5</td><td class="string">^11.11.3</td><td class="string">n/a</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">@mui/icons-material</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/mui/material-ui.git</td><td class="string">6.5.0</td><td class="string">6.5.0</td><td class="string">^6.0.0</td><td class="string">MUI Team</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">@mui/lab</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/mui/material-ui.git</td><td class="string">6.0.1-beta.36</td><td class="string">6.0.1-beta.36</td><td class="string">^6.0.1-beta.36</td><td class="string">MUI Team</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">@mui/material</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/mui/material-ui.git</td><td class="string">6.5.0</td><td class="string">6.5.0</td><td class="string">^6.0.0</td><td class="string">MUI Team</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">@mui/x-date-pickers</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/mui/mui-x.git</td><td class="string">7.29.4</td><td class="string">7.22.0</td><td class="string">^7.22.0</td><td class="string">MUI Team</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">classnames</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/JedWatson/classnames.git</td><td class="string">2.5.1</td><td class="string">2.5.1</td><td class="string">^2.3.2</td><td class="string">Jed Watson</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">geojson</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">http://github.com/caseycesari/geojson.js.git</td><td class="string">0.5.0</td><td class="string">0.5.0</td><td class="string">^0.5.0</td><td class="string">Casey Cesari</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">luxon</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/moment/luxon.git</td><td class="string">3.7.1</td><td class="string">3.4.4</td><td class="string">^3.3.0</td><td class="string">Isaac Cambron</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">mapbox-gl</td><td class="string">perpetual</td><td class="string">material</td><td class="string">SEE LICENSE IN LICENSE.txt</td><td class="string">git://github.com/mapbox/mapbox-gl-js.git</td><td class="string">3.14.0</td><td class="string">3.13.0</td><td class="string">^3.13.0</td><td class="string">n/a</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">react</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/facebook/react.git</td><td class="string">18.3.1</td><td class="string">18.3.1</td><td class="string">^18.2.0</td><td class="string">n/a</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">react-dom</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/facebook/react.git</td><td class="string">18.3.1</td><td class="string">18.3.1</td><td class="string">^18.2.0</td><td class="string">n/a</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">react-intersection-observer</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/thebuilder/react-intersection-observer.git</td><td class="string">9.16.0</td><td class="string">9.10.2</td><td class="string">^9.5.2</td><td class="string">Daniel Schmidt</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">react-map-gl</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">https://github.com/visgl/react-map-gl.git</td><td class="string">8.0.4</td><td class="string">8.0.4</td><td class="string">^8.0.4</td><td class="string">n/a</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">react-multi-carousel</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/YIZHUANG/react-multi-carousel.git</td><td class="string">2.8.6</td><td class="string">2.8.5</td><td class="string">^2.8.2</td><td class="string">YI ZHUANG https://github.com/YIZHUANG</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">react-responsive</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git://github.com/contra/react-responsive.git</td><td class="string">9.0.2</td><td class="string">9.0.2</td><td class="string">^9.0.2</td><td class="string">Contra <yo@contra.io> (https://contra.io)</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">react-sortable-hoc</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/clauderic/react-sortable-hoc.git</td><td class="string">2.0.0</td><td class="string">2.0.0</td><td class="string">^2.0.0</td><td class="string">Clauderic Demers me@ced.io</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">sass</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/sass/dart-sass.git</td><td class="string">1.90.0</td><td class="string">1.77.2</td><td class="string">^1.75.0</td><td class="string">Natalie Weizenbaum nweiz@google.com https://github.com/nex3</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">tinycolor2</td><td class="string">perpetual</td><td class="string">material</td><td class="string">MIT</td><td class="string">git+https://github.com/bgrins/TinyColor.git</td><td class="string">1.6.0</td><td class="string">1.6.0</td><td class="string">^1.6.0</td><td class="string">Brian Grinstead <briangrinstead@gmail.com> (http://briangrinstead.com)</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">tslint</td><td class="string">perpetual</td><td class="string">material</td><td class="string">Apache-2.0</td><td class="string">https://github.com/palantir/tslint.git</td><td class="string">6.1.3</td><td class="string">6.1.3</td><td class="string">^6.1.3</td><td class="string">n/a</td></tr><tr><td class="string">terraware</td><td class="string">web-components</td><td class="string">web-vitals</td><td class="string">perpetual</td><td class="string">material</td><td class="string">Apache-2.0</td><td class="string">git+https://github.com/GoogleChrome/web-vitals.git</td><td class="string">3.5.2</td><td class="string">3.5.2</td><td class="string">^3.5.2</td><td class="string">Philip Walton philip@philipwalton.com http://philipwalton.com</td></tr></tbody></table>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terraware/web-components",
-  "version": "3.5.9",
+  "version": "3.5.11",
   "author": "Terraformation Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -23,6 +23,7 @@
     "@mui/material": "^6.0.0",
     "@mui/x-date-pickers": "^7.22.0",
     "classnames": "^2.3.2",
+    "geojson": "^0.5.0",
     "luxon": "^3.3.0",
     "mapbox-gl": "^3.13.0",
     "react": "^18.2.0",

package/stories/MapBox.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapBox.stories.d.ts","sourceRoot":"","sources":["../../src/stories/MapBox.stories.tsx"],"names":[],"mappings":";AAKA,OAAe,EAAE,WAAW,EAAgB,MAAM,0BAA0B,CAAC;;;;;AAI7E,wBAGE;AA+BF,eAAO,MAAM,OAAO,oGAAoB,CAAC"}
+{"version":3,"file":"MapBox.stories.d.ts","sourceRoot":"","sources":["../../src/stories/MapBox.stories.tsx"],"names":[],"mappings":";AAMA,OAAe,EAAE,WAAW,EAAsC,MAAM,0BAA0B,CAAC;;;;;AAMnG,wBAGE;AA0MF,eAAO,MAAM,OAAO,oGAAoB,CAAC"}

package/stories/MapDateSlider.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { MapBoxProps } from '../components/Map/MapBox';
+declare const _default: {
+    title: string;
+    component: (props: MapBoxProps) => JSX.Element;
+};
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, MapBoxProps>;
+//# sourceMappingURL=MapDateSlider.stories.d.ts.map

package/stories/MapDateSlider.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapDateSlider.stories.d.ts","sourceRoot":"","sources":["../../src/stories/MapDateSlider.stories.tsx"],"names":[],"mappings":";AAOA,OAAe,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;;;;;AAM/D,wBAGE;AAuDF,eAAO,MAAM,OAAO,oGAAoB,CAAC"}

package/stories/MapLegend.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapLegend.stories.d.ts","sourceRoot":"","sources":["../../src/stories/MapLegend.stories.tsx"],"names":[],"mappings":";AAMA,OAAkB,EAAkB,cAAc,EAAE,MAAM,6BAA6B,CAAC;;;;;AAExF,wBAGE;AA8LF,eAAO,MAAM,OAAO,uGAAoB,CAAC"}
+{"version":3,"file":"MapLegend.stories.d.ts","sourceRoot":"","sources":["../../src/stories/MapLegend.stories.tsx"],"names":[],"mappings":";AAMA,OAAkB,EAAkB,cAAc,EAAE,MAAM,6BAA6B,CAAC;;;;;AAExF,wBAGE;AA0LF,eAAO,MAAM,OAAO,uGAAoB,CAAC"}

package/stories/MapMarker.stories.d.ts

@@ -5,6 +5,7 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
+    clusterRadius: number;
     token: string;
 }>;
 //# sourceMappingURL=MapMarker.stories.d.ts.map

package/stories/MapMarker.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapMarker.stories.d.ts","sourceRoot":"","sources":["../../src/stories/MapMarker.stories.tsx"],"names":[],"mappings":";;;;;AAgBA,wBAGE;AAoIF,eAAO,MAAM,OAAO;WAlIW,MAAM;EAkIG,CAAC"}
+{"version":3,"file":"MapMarker.stories.d.ts","sourceRoot":"","sources":["../../src/stories/MapMarker.stories.tsx"],"names":[],"mappings":";;;;;AAcA,wBAGE;AAmHF,eAAO,MAAM,OAAO;mBAjHmB,MAAM;WAAS,MAAM;EAiHpB,CAAC"}

package/utils/date.d.ts

@@ -11,6 +11,10 @@ export type DateType = string | number | Date | DateTime;
  * Helper util that returns default time zone as a fallback.
  */
 export declare const tz: (timeZoneId?: string) => string;
+/**
+ * Returns <Month> <Year> (eg. July 2023).
+ */
+export declare const getShortDate: (date: DateTime) => string;
 /**
  * Utility that constructs a valid DateTime object from
  * any DateType value passed in (ISO string or epoch milliseconds or DateTime object).

package/utils/date.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../src/utils/date.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC;;;;;;GAMG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,QAAQ,CAAC;AAEzD;;GAEG;AACH,eAAO,MAAM,EAAE,gBAAiB,MAAM,WAA4B,CAAC;AA8BnE;;;;GAIG;AACH,eAAO,MAAM,OAAO,SAAU,QAAQ,eAAe,MAAM,qCAoB1D,CAAC;AAEF;;;GAGG;AACH,QAAA,MAAM,mBAAmB,SAAU,QAAQ,eAAe,MAAM,WAS/D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,gBAAiB,MAAM,WAEzD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,SAAU,QAAQ,eAAe,MAAM,YAOhE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../src/utils/date.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC;;;;;;GAMG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,QAAQ,CAAC;AAEzD;;GAEG;AACH,eAAO,MAAM,EAAE,gBAAiB,MAAM,WAA4B,CAAC;AA8BnE;;GAEG;AACH,eAAO,MAAM,YAAY,SAAU,QAAQ,WAM1C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,OAAO,SAAU,QAAQ,eAAe,MAAM,qCAoB1D,CAAC;AAEF;;;GAGG;AACH,QAAA,MAAM,mBAAmB,SAAU,QAAQ,eAAe,MAAM,WAS/D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,gBAAiB,MAAM,WAEzD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,SAAU,QAAQ,eAAe,MAAM,YAOhE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/utils/date.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tz = exports.isInTheFuture = exports.getTodaysDateFormatted = exports.getDate = exports.default = void 0;
+exports.tz = exports.isInTheFuture = exports.getTodaysDateFormatted = exports.getShortDate = exports.getDate = exports.default = void 0;
 var _lodash = _interopRequireDefault(require("lodash"));
 var _luxon = require("luxon");
 /**
@@ -51,11 +51,22 @@ const getDisplayValue = date => {
   return date.toString();
 };
 
+/**
+ * Returns <Month> <Year> (eg. July 2023).
+ */
+const getShortDate = date => {
+  if (date.isValid) {
+    return date.toFormat('LLLL yyyy');
+  }
+  return date.toString();
+};
+
 /**
  * Utility that constructs a valid DateTime object from
  * any DateType value passed in (ISO string or epoch milliseconds or DateTime object).
  * Note: the DateTime object input support is mostly for ease of use and will essentially be a pass-through.
  */
+exports.getShortDate = getShortDate;
 const getDate = (date, timeZoneId) => {
   if (typeof date === 'string') {
     const fromString = getDateFromISOString(date, timeZoneId);