@terraware/web-components 3.5.12-rc.7 → 3.5.12

package/components/Map/MapLegend.js

@@ -0,0 +1,172 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _utils = require("../../utils");
+var _AntSwitch = _interopRequireDefault(require("../AntSwitch"));
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+const MapLegend = _ref => {
+  let {
+    legends
+  } = _ref;
+  const theme = (0, _material.useTheme)();
+  const {
+    isMobile,
+    isDesktop
+  } = (0, _utils.useDeviceInfo)();
+  const legendComponents = legends.map((legend, index) => {
+    const isFirst = index === 0;
+    const isLast = index === legends.length - 1;
+    const switchComponent = legend.type === 'highlight' ? /*#__PURE__*/_react.default.createElement(_AntSwitch.default, {
+      disabled: legend.disabled,
+      checked: legend.visible,
+      onChange: legend.setVisible
+    }) : undefined;
+    const titleComponent = /*#__PURE__*/_react.default.createElement(_material.Typography, {
+      fontSize: "16px",
+      fontWeight: 600,
+      width: isMobile ? '100%' : undefined,
+      marginRight: isMobile ? 0 : theme.spacing(4),
+      paddingLeft: switchComponent ? theme.spacing(1) : theme.spacing(0)
+    }, legend.title, legend.tooltip && /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+      title: legend.tooltip,
+      sx: {
+        display: 'inline-block',
+        verticalAlign: 'text-top',
+        marginLeft: theme.spacing(1)
+      }
+    }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+      display: "flex"
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      fillColor: theme.palette.TwClrIcnInfo,
+      name: "info",
+      size: "small"
+    }))));
+    const itemComponents = legend.items.map((item, itemIndex) => {
+      const onClick = legend.disabled ? undefined : legend.type === 'layer' ? item.disabled ? undefined : () => legend.setSelectedLayer(item.id) : legend.type === 'marker' ? item.disabled ? undefined : () => {
+        var _setVisible, _ref2;
+        return (_setVisible = (_ref2 = item).setVisible) === null || _setVisible === void 0 ? void 0 : _setVisible.call(_ref2, !item.visible);
+      } : undefined;
+      const disabled = legend.disabled || (legend.type === 'layer' ? item.disabled : legend.type === 'marker' ? item.disabled : false) || false;
+      const selected = legend.type === 'layer' ? item.id === legend.selectedLayer : legend.type === 'marker' ? item.visible : false;
+      const logoComponent = () => {
+        if (item.style.type === 'icon') {
+          return /*#__PURE__*/_react.default.createElement(_Icon.default, {
+            name: item.style.iconName,
+            fillColor: item.style.iconColor,
+            style: {
+              marginRight: theme.spacing(1)
+            },
+            size: 'small'
+          });
+        } else {
+          var _item$style$borderCol, _item$style$opacity;
+          return /*#__PURE__*/_react.default.createElement(_material.Box, {
+            display: 'flex',
+            sx: {
+              border: "2px solid ".concat((_item$style$borderCol = item.style.borderColor) !== null && _item$style$borderCol !== void 0 ? _item$style$borderCol : theme.palette.TwClrBaseGreen300),
+              opacity: disabled ? 0.7 : 1.0,
+              height: '16px',
+              width: '24px',
+              minWidth: '24px',
+              marginRight: theme.spacing(1)
+            }
+          }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+            height: '16px',
+            width: '24px',
+            sx: {
+              backgroundColor: item.style.fillColor,
+              backgroundImage: item.style.fillPatternUrl ? "url('".concat(item.style.fillPatternUrl, "')") : undefined,
+              backgroundRepeat: 'repeat',
+              opacity: (_item$style$opacity = item.style.opacity) !== null && _item$style$opacity !== void 0 ? _item$style$opacity : 0.2
+            }
+          }));
+        }
+      };
+      const visibleComponent = () => {
+        switch (legend.type) {
+          case 'marker':
+            const featureItem = item;
+            const visibleIcon = featureItem.visible ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+              name: "iconEye"
+            }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
+              name: "iconEyeOff"
+            });
+            return /*#__PURE__*/_react.default.createElement(_material.Box, {
+              display: "flex"
+            }, visibleIcon);
+          case 'layer':
+            const layerItem = item;
+            return /*#__PURE__*/_react.default.createElement(_material.Box, {
+              display: "flex",
+              sx: {
+                visibility: layerItem.id === legend.selectedLayer ? 'visible' : 'hidden'
+              }
+            }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+              name: "checkmark",
+              style: {
+                marginRight: theme.spacing(1)
+              }
+            }));
+          case 'highlight':
+            return undefined;
+        }
+      };
+      return /*#__PURE__*/_react.default.createElement(_material.Box, {
+        onClick: onClick,
+        display: "flex",
+        alignItems: "center",
+        sx: {
+          cursor: onClick ? 'pointer' : 'default',
+          background: selected ? theme.palette.TwClrBgSecondary : 'none',
+          borderRadius: theme.spacing(1),
+          padding: theme.spacing(1, 1),
+          opacity: disabled ? '0.5' : 1
+        },
+        justifyContent: 'space-between',
+        key: "".concat(index, "-").concat(itemIndex)
+      }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+        display: "flex",
+        alignItems: "center",
+        paddingRight: theme.spacing(1)
+      }, logoComponent(), /*#__PURE__*/_react.default.createElement(_material.Typography, {
+        fontSize: "14px",
+        fontWeight: 400
+      }, item.label)), /*#__PURE__*/_react.default.createElement(_material.Box, {
+        display: "flex"
+      }, visibleComponent()));
+    });
+    return /*#__PURE__*/_react.default.createElement(_material.Box, {
+      key: legend.title,
+      sx: {
+        opacity: legend.disabled ? 0.7 : 1
+      },
+      borderBottom: isLast ? 'none' : "1px solid ".concat(theme.palette.TwClrBrdrTertiary)
+    }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+      paddingBottom: 2,
+      paddingTop: isFirst ? 0 : 2,
+      flexDirection: 'column'
+    }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+      display: "flex",
+      alignItems: 'center',
+      paddingLeft: theme.spacing(1)
+    }, switchComponent, titleComponent), itemComponents));
+  });
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    display: "flex",
+    justifyItems: "flex-start",
+    padding: theme.spacing(2, 1),
+    flexDirection: 'column',
+    maxWidth: isDesktop ? '184px' : 'stretch',
+    minWidth: isDesktop ? '160px' : undefined,
+    width: isDesktop ? 'auto' : 'stretch',
+    margin: 0,
+    overflow: 'scroll'
+  }, legendComponents);
+};
+var _default = exports.default = MapLegend;

package/components/Map/MapViewStyleControl.js

@@ -0,0 +1,74 @@
+"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 _PopoverMenu = _interopRequireDefault(require("../PopoverMenu"));
+var _types = require("./types");
+const MapViewStyleControl = _ref => {
+  var _mapViewStyleNames2;
+  let {
+    containerId,
+    mapViewStyle,
+    mapViewStyleNames,
+    setMapViewStyle
+  } = _ref;
+  const theme = (0, _material.useTheme)();
+  const viewOptions = (0, _react.useMemo)(() => {
+    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,
+        value: style
+      };
+    });
+  }, [mapViewStyleNames]);
+  const onSelectMapViewStyle = (0, _react.useCallback)(item => {
+    setMapViewStyle(item.value);
+  }, []);
+  const container = (0, _react.useMemo)(() => {
+    if (containerId) {
+      return document.getElementById(containerId);
+    }
+  }, [containerId]);
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: {
+      position: 'absolute',
+      top: '10px',
+      left: '45px',
+      zIndex: 10,
+      height: 28,
+      backgroundColor: "".concat(theme.palette.TwClrBaseWhite),
+      borderRadius: '4px',
+      display: 'flex',
+      alignItems: 'center',
+      '& .MuiButtonBase-root': {
+        padding: 0
+      },
+      '& .MuiButtonBase-root.MuiMenuItem-root': {
+        fontSize: '12px'
+      },
+      '& svg': {
+        marginLeft: 0
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_PopoverMenu.default, {
+    anchor: /*#__PURE__*/_react.default.createElement(_material.Box, {
+      component: "span",
+      sx: {
+        fontSize: '12px',
+        paddingLeft: theme.spacing(0.5),
+        color: theme.palette.TwClrTxt
+      }
+    }, (_mapViewStyleNames2 = mapViewStyleNames === null || mapViewStyleNames === void 0 ? void 0 : mapViewStyleNames(mapViewStyle)) !== null && _mapViewStyleNames2 !== void 0 ? _mapViewStyleNames2 : mapViewStyle),
+    container: container,
+    menuSections: [viewOptions],
+    onClick: onSelectMapViewStyle
+  }));
+};
+var _default = exports.default = MapViewStyleControl;

package/components/Map/ReactMapboxWrapper.d.ts

@@ -0,0 +1,3 @@
+import ReactMapbox from 'react-map-gl/mapbox';
+export default ReactMapbox;
+//# sourceMappingURL=ReactMapboxWrapper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReactMapboxWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/Map/ReactMapboxWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,qBAAqB,CAAC;AAE9C,eAAe,WAAW,CAAC"}

package/components/Map/ReactMapboxWrapper.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _mapbox = _interopRequireDefault(require("react-map-gl/mapbox"));
+var _default = exports.default = _mapbox.default;

package/components/Map/index.js

@@ -0,0 +1,190 @@
+"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 _MapBox = _interopRequireDefault(require("./MapBox"));
+var _MapContainer = _interopRequireDefault(require("./MapContainer"));
+var _MapDrawer = _interopRequireDefault(require("./MapDrawer"));
+var _MapLegend = _interopRequireDefault(require("./MapLegend"));
+const MapComponent = props => {
+  const {
+    clusterRadius,
+    controlBottomLeft,
+    controlTopRight,
+    cursorInteract,
+    cursorMap,
+    disableDoubleClickZoom,
+    disableZoom,
+    drawerChildren,
+    drawerOpen,
+    drawerSize,
+    drawerTitle,
+    features,
+    hideFullScreenControl,
+    hideLegend,
+    hideMapViewStyleControl,
+    hideZoomControl,
+    initialSelectedLayerId,
+    initialMapViewStyle,
+    initialViewState,
+    mapContainerId,
+    mapId,
+    onClickCanvas,
+    setDrawerOpen,
+    token
+  } = props;
+  const [mapViewStyle, setMapViewStyle] = (0, _react.useState)(initialMapViewStyle !== null && initialMapViewStyle !== void 0 ? initialMapViewStyle : 'Streets');
+  const [visibleHighlights, setVisibleHighlights] = (0, _react.useState)([]);
+  const setHighlightVisible = (0, _react.useCallback)(highlightId => visible => {
+    if (visible) {
+      setVisibleHighlights(_visibleHighlights => [..._visibleHighlights, highlightId]);
+    } else {
+      setVisibleHighlights(_visibleHighlights => _visibleHighlights.filter(_highlightId => _highlightId !== highlightId));
+    }
+  }, []);
+  const [visibleMarkers, setVisibleMarkers] = (0, _react.useState)([]);
+  const setMarkerVisible = (0, _react.useCallback)(markerGroupId => visible => {
+    if (visible) {
+      setVisibleMarkers(_visibleMarkers => [..._visibleMarkers, markerGroupId]);
+    } else {
+      setVisibleMarkers(_visibleMarkers => _visibleMarkers.filter(_markerGroupId => _markerGroupId !== markerGroupId));
+    }
+  }, []);
+  const [selectedLayer, setSelectedLayer] = (0, _react.useState)(initialSelectedLayerId);
+  const legends = (0, _react.useMemo)(() => {
+    return features === null || features === void 0 ? void 0 : features.map(feature => {
+      const baseLegendGroup = {
+        disabled: feature.sectionDisabled,
+        title: feature.sectionTitle,
+        tooltip: feature.sectionTooltip
+      };
+      switch (feature.type) {
+        case 'highlight':
+          return {
+            ...baseLegendGroup,
+            items: feature.legendItems,
+            type: 'highlight',
+            visible: visibleHighlights.findIndex(highlightId => highlightId === feature.highlight.highlightId) >= 0,
+            setVisible: setHighlightVisible(feature.highlight.highlightId)
+          };
+        case 'layer':
+          return {
+            ...baseLegendGroup,
+            items: feature.layers.map(layer => ({
+              disabled: layer.disabled,
+              id: layer.layerId,
+              label: layer.label,
+              style: layer.style
+            })),
+            selectedLayer,
+            setSelectedLayer,
+            type: 'layer'
+          };
+        case 'marker':
+          return {
+            ...baseLegendGroup,
+            items: feature.groups.map(group => ({
+              disabled: group.disabled,
+              id: group.markerGroupId,
+              label: group.label,
+              style: group.style,
+              setVisible: setMarkerVisible(group.markerGroupId),
+              visible: visibleMarkers.findIndex(markerId => markerId === group.markerGroupId) >= 0
+            })),
+            type: 'marker'
+          };
+      }
+    });
+  }, [features, selectedLayer, visibleHighlights, visibleMarkers]);
+  const layers = (0, _react.useMemo)(() => {
+    var _features$filter, _features$filter$flat;
+    return features === null || features === void 0 ? void 0 : (_features$filter = features.filter(feature => feature.type === 'layer')) === null || _features$filter === void 0 ? void 0 : (_features$filter$flat = _features$filter.flatMap(feature => feature.layers)) === null || _features$filter$flat === void 0 ? void 0 : _features$filter$flat.filter(layer => layer.layerId === selectedLayer);
+  }, [features, selectedLayer]);
+  const highlightGroups = (0, _react.useMemo)(() => {
+    var _features$filter2, _features$filter2$map;
+    return features === null || features === void 0 ? void 0 : (_features$filter2 = features.filter(feature => feature.type === 'highlight')) === null || _features$filter2 === void 0 ? void 0 : (_features$filter2$map = _features$filter2.map(feature => feature.highlight)) === null || _features$filter2$map === void 0 ? void 0 : _features$filter2$map.filter(highlight => visibleHighlights.findIndex(_highlightId => _highlightId === highlight.highlightId) >= 0);
+  }, [features, visibleHighlights]);
+  const markerGroups = (0, _react.useMemo)(() => {
+    var _features$filter3;
+    return features === null || features === void 0 ? void 0 : (_features$filter3 = features.filter(feature => feature.type === 'marker')) === null || _features$filter3 === void 0 ? void 0 : _features$filter3.flatMap(feature => feature.groups).filter(group => visibleMarkers.findIndex(_markerId => _markerId === group.markerGroupId) >= 0);
+  }, [features, visibleMarkers]);
+  const mapViewState = (0, _react.useMemo)(() => {
+    if (initialViewState) {
+      return initialViewState;
+    } else if (features) {
+      const coordinates = features.filter(feature => feature.type === 'layer').flatMap(feature => feature.layers).flatMap(layer => layer.features).map(geoFeature => geoFeature.geometry.coordinates).flat().flat().flat();
+      if (coordinates.length > 0) {
+        let minLat = Infinity;
+        let maxLat = -Infinity;
+        let minLng = Infinity;
+        let maxLng = -Infinity;
+        for (const [lng, lat] of coordinates) {
+          minLat = Math.min(minLat, lat);
+          maxLat = Math.max(maxLat, lat);
+          minLng = Math.min(minLng, lng);
+          maxLng = Math.max(maxLng, lng);
+        }
+        const centerLng = (minLng + maxLng) / 2;
+        const centerLat = (minLat + maxLat) / 2;
+        return {
+          latitude: centerLat,
+          longitude: centerLng,
+          zoom: 12
+        };
+      }
+    }
+  }, [initialViewState]);
+  const mapImageUrls = (0, _react.useMemo)(() => {
+    var _features$filter4, _features$filter5;
+    const layerFeatures = (_features$filter4 = features === null || features === void 0 ? void 0 : features.filter(feature => feature.type === 'layer')) !== null && _features$filter4 !== void 0 ? _features$filter4 : [];
+    const highlightFeatures = (_features$filter5 = features === null || features === void 0 ? void 0 : features.filter(feature => feature.type === 'highlight')) !== null && _features$filter5 !== void 0 ? _features$filter5 : [];
+    const layerImageUrls = layerFeatures.flatMap(feature => feature.layers).map(layer => layer.style.fillPatternUrl).filter(url => url !== undefined);
+    const highlightImageUrls = highlightFeatures.flatMap(feature => feature.highlight.highlights).map(highlight => highlight.style.fillPatternUrl).filter(url => url !== undefined);
+    const imageUrls = new Set(layerImageUrls);
+    highlightImageUrls.forEach(url => imageUrls.add(url));
+    return Array.from(imageUrls);
+  }, [features]);
+  return /*#__PURE__*/_react.default.createElement(_MapContainer.default, {
+    containerId: mapContainerId !== null && mapContainerId !== void 0 ? mapContainerId : 'map-container',
+    map: /*#__PURE__*/_react.default.createElement(_MapBox.default, {
+      clusterRadius: clusterRadius,
+      containerId: mapContainerId !== null && mapContainerId !== void 0 ? mapContainerId : 'map-container',
+      controlBottomLeft: controlBottomLeft,
+      controlTopRight: controlTopRight,
+      cursorInteract: cursorInteract,
+      cursorMap: cursorMap,
+      disableDoubleClickZoom: disableDoubleClickZoom,
+      disableZoom: disableZoom,
+      drawerOpen: drawerOpen,
+      hideFullScreenControl: hideFullScreenControl,
+      hideMapViewStyleControl: hideMapViewStyleControl,
+      hideZoomControl: hideZoomControl,
+      highlightGroups: highlightGroups,
+      initialViewState: mapViewState,
+      layers: layers,
+      mapId: mapId !== null && mapId !== void 0 ? mapId : 'mapId',
+      mapImageUrls: mapImageUrls,
+      mapViewStyle: mapViewStyle,
+      markerGroups: markerGroups,
+      onClickCanvas: onClickCanvas,
+      setMapViewStyle: setMapViewStyle,
+      token: token
+    }),
+    drawer: /*#__PURE__*/_react.default.createElement(_MapDrawer.default, {
+      open: drawerOpen !== null && drawerOpen !== void 0 ? drawerOpen : false,
+      onClose: () => setDrawerOpen === null || setDrawerOpen === void 0 ? void 0 : setDrawerOpen(false),
+      size: drawerSize !== null && drawerSize !== void 0 ? drawerSize : 'small',
+      title: drawerTitle !== null && drawerTitle !== void 0 ? drawerTitle : ''
+    }, drawerChildren),
+    drawerOpen: drawerOpen,
+    legend: !hideLegend && legends && /*#__PURE__*/_react.default.createElement(_MapLegend.default, {
+      legends: legends
+    })
+  });
+};
+var _default = exports.default = MapComponent;

package/components/Map/styles.scss

@@ -0,0 +1,130 @@
+@import '../../style-dictionary-dist/terraware.scss';
+
+.map-container {
+  border: 1px solid $tw-clr-brdr-tertiary;
+  border-radius: 8px;
+  display: flex;
+  overflow: hidden;
+
+  &--desktop {
+    flex-direction: row;
+    height: 700px;
+    max-height: 700px;
+
+    :fullscreen {
+      max-height: none;
+    }
+  }
+
+  &--mobile {
+    flex-direction: column;
+  }
+
+  &--mobile-drawer-open {
+    border: none;
+    border-radius: none;
+  }
+
+  .map-holder {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    width: 100%;
+
+    &--hidden {
+      display: none;
+    }
+  }
+}
+
+.map-drawer {
+  display: flex;
+  flex-direction: column;
+  background: $tw-clr-base-white;
+
+  &--mobile {
+    width: stretch;
+  }
+
+  &--small {
+    min-width: 280px;
+    width: 280px;
+  }
+  &--medium {
+    min-width: 420px;
+    width: 420px;
+  }
+
+  &--header {
+    padding: $tw-spc-base-x-small;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .title {
+      font-family: $tw-fnt-mssg-title-font-family;
+      font-size: $tw-fnt-mssg-title-font-size;
+      font-weight: $tw-fnt-mssg-title-font-weight;
+      line-height: $tw-fnt-mssg-title-line-height;
+      color: $tw-clr-txt;
+      text-align: center;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      margin: 0;
+      width: 100%;
+    }
+
+    .icon-close {
+      fill: $tw-clr-icn-secondary;
+      height: $tw-sz-base-medium;
+      width: $tw-sz-base-medium;
+    }
+  }
+
+  &--body {
+    background: $tw-clr-base-white;
+    padding: $tw-spc-base-x-small $tw-spc-base-small;
+    text-align: start;
+    overflow: auto;
+    white-space: pre-wrap;
+  }
+
+  &--message {
+    font-family: $tw-fnt-dlg-bx-message-font-family;
+    font-size: $tw-fnt-dlg-bx-message-font-size;
+    font-weight: $tw-fnt-dlg-bx-message-font-weight;
+    line-height: $tw-fnt-dlg-bx-message-line-height;
+    color: $tw-clr-txt;
+    width: 100%;
+    text-align: start;
+  }
+}
+
+.map-marker {
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  background-color: white;
+  border: 1px solid black;
+  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.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stylesUrl = exports.MapViewStyles = void 0;
+/**
+ * Properties class for GeoJson, with a few reserved object defined.
+ */
+
+// 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 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/components/Map/useMaintainLayerOrder.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMaintainLayerOrder = void 0;
+var _react = require("react");
+/**
+ * Ensures that all given layers maintain strict order in the Mapbox layer stack.
+ */
+const useMaintainLayerOrder = (mapRef, orderedLayerIds) => {
+  (0, _react.useEffect)(() => {
+    const map = mapRef.current;
+    if (!map) {
+      return;
+    }
+
+    // Only move layers that exist
+    const existingLayerIds = orderedLayerIds.filter(id => map.getLayer(id));
+
+    // Reverse iterate so first in array ends up lowest
+    for (let i = existingLayerIds.length - 1; i >= 0; i--) {
+      const layerId = existingLayerIds[i];
+      try {
+        map.moveLayer(layerId, i < existingLayerIds.length - 1 ? existingLayerIds[i + 1] : undefined);
+      } catch (e) {
+        // moveLayer will throw if layer doesn't exist in current style
+      }
+    }
+  }, [mapRef, orderedLayerIds]);
+};
+exports.useMaintainLayerOrder = useMaintainLayerOrder;