@xyo-network/react-map 2.82.0 → 2.83.1

package/dist/browser/index.cjs

@@ -1,1695 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  AnimatedHeatMap: () => AnimatedHeatMap,
-  AnimatedHeatMapLegend: () => AnimatedHeatMapLegend,
-  AnimatedHeatMapLoaded: () => AnimatedHeatMapLoaded,
-  AnimatedHeatMapSettings: () => AnimatedHeatMapSettings,
-  CircleLayerBuilder: () => CircleLayerBuilder,
-  ColorGradientLegend: () => ColorGradientLegend,
-  DefaultMapSettings: () => DefaultMapSettings,
-  FillLayerBuilder: () => FillLayerBuilder,
-  HeatMapFillLayerConfig: () => HeatMapFillLayerConfig,
-  HeatMapInitializerProvider: () => HeatMapInitializerProvider,
-  HeatMapLineLayerConfig: () => HeatMapLineLayerConfig,
-  HeatMapSettings: () => HeatMapSettings,
-  HeatMapSymbolLayerConfig: () => HeatMapSymbolLayerConfig,
-  LayerAnimator: () => LayerAnimator,
-  LineLayerBuilder: () => LineLayerBuilder,
-  LocationHeatMapLayerBuilder: () => LocationHeatMapLayerBuilder,
-  LocationHeatMapLayerBuilderAnimated: () => LocationHeatMapLayerBuilderAnimated,
-  LocationPointLayerConfig: () => LocationPointLayerConfig,
-  LocationPointsMapLayerBuilder: () => LocationPointsMapLayerBuilder,
-  MapBase: () => MapBase,
-  MapBox: () => MapBox,
-  MapBoxInstanceProvider: () => MapBoxInstanceProvider,
-  MapHeat: () => MapHeat,
-  MapHeatConstants: () => MapHeatConstants,
-  MapPoints: () => MapPoints,
-  MapPointsConstants: () => MapPointsConstants,
-  MapSettingSwitch: () => MapSettingSwitch,
-  MapSettings: () => MapSettings,
-  MapSettingsBox: () => MapSettingsBox,
-  MapSettingsProvider: () => MapSettingsProvider,
-  MapStyle: () => MapStyle,
-  MapboxAccessTokenContext: () => MapboxAccessTokenContext,
-  MapboxAccessTokenProvider: () => MapboxAccessTokenProvider,
-  MapboxHeatFlexBox: () => MapboxHeatFlexBox,
-  MapboxPointsFlexBox: () => MapboxPointsFlexBox,
-  NetworkLocationAnswerSchema: () => NetworkLocationAnswerSchema,
-  NetworkLocationHeatmapAnswerSchema: () => NetworkLocationHeatmapAnswerSchema,
-  NetworkLocationHeatmapQuadkeyAnswerSchema: () => NetworkLocationHeatmapQuadkeyAnswerSchema,
-  SymbolLayerBuilder: () => SymbolLayerBuilder,
-  isNetworkLocationAnswer: () => isNetworkLocationAnswer,
-  isNetworkLocationHeatmapAnswer: () => isNetworkLocationHeatmapAnswer,
-  isNetworkLocationHeatmapQuadkeyAnswer: () => isNetworkLocationHeatmapQuadkeyAnswer,
-  useDynamicMapResize: () => useDynamicMapResize,
-  useDynamicPositioning: () => useDynamicPositioning,
-  useFindHashes: () => useFindHashes,
-  useHeatMapColors: () => useHeatMapColors,
-  useHeatMapInitializer: () => useHeatMapInitializer,
-  useMapBoxInstance: () => useMapBoxInstance,
-  useMapSettings: () => useMapSettings,
-  useMapboxAccessToken: () => useMapboxAccessToken,
-  useQuadKeyPayloadsToFeatures: () => useQuadKeyPayloadsToFeatures
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/Settings/DefaultMapSettings.ts
-var DefaultMapSettings = /* @__PURE__ */ __name(() => ({
-  debugLayer: {
-    devMode: true,
-    field: "debugLayer",
-    hidden: true,
-    label: "Debug Layer",
-    value: false
-  },
-  debugLogging: {
-    devMode: true,
-    field: "debugLogging",
-    hidden: true,
-    label: "Debug Logging",
-    value: false
-  },
-  dynamicMapResize: {
-    devMode: true,
-    field: "dynamicMapResize",
-    hidden: true,
-    label: "Auto Map Resize",
-    value: true
-  },
-  enableControls: {
-    devMode: true,
-    field: "enableControls",
-    hidden: true,
-    label: "Map Controls",
-    value: false
-  },
-  fitToPoints: {
-    devMode: true,
-    field: "fitToPoints",
-    hidden: true,
-    label: "Fit To Points",
-    value: false
-  },
-  preferDark: {
-    devMode: false,
-    field: "preferDark",
-    hidden: true,
-    label: "Prefer dark",
-    value: false
-  },
-  scrollToZoom: {
-    devMode: true,
-    field: "scrollToZoom",
-    hidden: true,
-    label: "Scroll To Zoom",
-    value: false
-  }
-}), "DefaultMapSettings");
-
-// src/AnimatedHeatMapSettings.ts
-var AnimatedHeatMapSettings = DefaultMapSettings();
-var { debugLayer, scrollToZoom, fitToPoints, preferDark } = AnimatedHeatMapSettings;
-debugLayer.hidden = false;
-scrollToZoom.value = true;
-fitToPoints.value = false;
-preferDark.value = true;
-
-// src/Components/AnimatedHeatMap.tsx
-var import_material4 = require("@mui/material");
-var import_react_flexbox3 = require("@xylabs/react-flexbox");
-var import_react19 = __toESM(require("react"), 1);
-
-// src/Contexts/HeatMapInitializer/Provider.tsx
-var import_forget2 = require("@xylabs/forget");
-var import_react12 = __toESM(require("react"), 1);
-
-// src/hooks/useDynamicMapResize.tsx
-var import_react = require("react");
-var useDynamicMapResize = /* @__PURE__ */ __name((mapContainerRef, mapCanvasRef, mapInstance, active = true) => {
-  const [dependenciesReady, setDependenciesReady] = (0, import_react.useState)(false);
-  const resizer = (0, import_react.useMemo)(() => new ResizeObserver(() => {
-    const width = mapContainerRef.current?.getBoundingClientRect().width;
-    if (width && mapCanvasRef.current) {
-      mapCanvasRef.current.style.width = `${width}px`;
-      setTimeout(() => mapInstance?.resize());
-    }
-  }), [
-    mapCanvasRef,
-    mapContainerRef,
-    mapInstance
-  ]);
-  (0, import_react.useEffect)(() => {
-    const dependenciesReady2 = !!(active && mapInstance && mapContainerRef?.current && mapCanvasRef.current);
-    setDependenciesReady(dependenciesReady2);
-  }, [
-    active,
-    mapCanvasRef,
-    mapContainerRef,
-    mapInstance
-  ]);
-  (0, import_react.useEffect)(() => {
-    if (dependenciesReady) {
-      if (mapContainerRef.current) {
-        resizer.observe(mapContainerRef.current);
-      }
-      return () => {
-        resizer.disconnect();
-      };
-    }
-  }, [
-    active,
-    dependenciesReady,
-    mapCanvasRef,
-    mapContainerRef,
-    mapInstance,
-    resizer
-  ]);
-}, "useDynamicMapResize");
-
-// src/hooks/useDynamicPositioning.tsx
-var import_react_shared = require("@xylabs/react-shared");
-var import_react2 = require("react");
-var defaultZoom = 1.6;
-var defaultAspectRatioRange = [
-  0.5,
-  2
-];
-var latRange = [
-  0.9121644205263664,
-  1.71785031559439
-];
-var lngRange = [
-  -81.4742014851959,
-  12.788958675506933
-];
-var linearInterpolate = /* @__PURE__ */ __name((aspectRatio, degreeRange, aspectRatioRange) => {
-  const [degreeMin, degreeMax] = degreeRange;
-  const [aspectRatioMin, aspectRatioMax] = aspectRatioRange || defaultAspectRatioRange;
-  const aspectRatioRangeSpan = aspectRatioMax - aspectRatioMin;
-  const degreeRangeSpan = degreeMax - degreeMin;
-  const percent = (aspectRatio - aspectRatioMin) / aspectRatioRangeSpan;
-  const scaledDegree = percent * degreeRangeSpan + degreeMin;
-  return scaledDegree;
-}, "linearInterpolate");
-var useDynamicPositioning = /* @__PURE__ */ __name(() => {
-  const [options, setOptions] = (0, import_react2.useState)({});
-  const { width, height } = (0, import_react_shared.useWindowSize)();
-  (0, import_react2.useEffect)(() => {
-    if (width && height) {
-      const aspectRatio = width / height;
-      setOptions({
-        center: [
-          linearInterpolate(aspectRatio, lngRange),
-          linearInterpolate(aspectRatio, latRange)
-        ],
-        zoom: defaultZoom
-      });
-    }
-  }, [
-    height,
-    width
-  ]);
-  return {
-    options
-  };
-}, "useDynamicPositioning");
-
-// src/hooks/useFindHashes.tsx
-var import_react_network = require("@xyo-network/react-network");
-var import_react3 = require("react");
-var animatedAnswerHashesConst = [
-  "79af071f451fc7af10d009dc63236ef9a9b211732c1ee0c06f028fcecf2336c5",
-  "531bfba6d8dfefd3bcc888aca54cdbbd4574ed2b3ec551b230845a1f9a608898",
-  "c874412b4faa4947de81372fd1ba12fdd6f43f5e408622b7f357cb2bcb3f17cb",
-  "29d3f8b882c61a82a1a1675782a27e797ea7196f45a23b4409680ab8b8d5f14e",
-  "cfd20f80ac073fd9518f4ef3f43d2a1f5e4e56e40c2677f38d6f6fecd05df60c",
-  "1354fa73497519a39aed19fc99bdbae78a880a1eafb2f7898d607e07db36528d",
-  "1043b0d25eacfc5013ae9dba780305a6fbf01a43543bd871d7c00537fca142a9",
-  "973dfc5df142851ced258d52d0ac2784e814000ac22e35776f772256b0d4dde9",
-  "463808eb74d3d87e6563970e0301a493577f8cd1b501e6e0ffa5e027ad2cea95",
-  "15b21acea2e3fd9d1ace3768a72636ee7bdf67a6f8e0807bfa2273dea2207555",
-  "32d377bfe7ebe382598c54dd13f8af7510e0a1e2fd2e913311fdd58e517e5e2e,"
-];
-var staticAnswerHashConst = "c7bbf61f61cfd4a1b2def160c28136fc1d100d39fbdb67b227a2c6e558d9d3a5";
-var useFindHashes = /* @__PURE__ */ __name(() => {
-  const { network } = (0, import_react_network.useNetwork)();
-  const exploreMapHashes = network?.nodes?.find((node) => node.type === "archivist")?.explorerMapHashes;
-  const animatedAnswerHashes = exploreMapHashes?.animatedAnswerHashes || animatedAnswerHashesConst;
-  const staticAnswerHash = exploreMapHashes?.staticAnswerHash || staticAnswerHashConst;
-  const foundHashes = (0, import_react3.useMemo)(() => [
-    staticAnswerHash,
-    ...animatedAnswerHashes
-  ], [
-    animatedAnswerHashes,
-    staticAnswerHash
-  ]);
-  return foundHashes;
-}, "useFindHashes");
-
-// src/hooks/useHeatMapColors.tsx
-var import_material = require("@mui/material");
-var useHeatMapColors = /* @__PURE__ */ __name(() => {
-  const theme = (0, import_material.useTheme)();
-  const staticMapColor = "#FFFF75";
-  const highUsageColor = "#FF0000";
-  const heatMapColorProps = {
-    highUsageColor,
-    lowUsageColor: "#FFB3B3",
-    staticMapColor
-  };
-  const legendProps = {
-    endColor: highUsageColor,
-    endLabel: "High",
-    heading: "Network Usage",
-    startColor: staticMapColor,
-    startLabel: "Low",
-    textColor: theme.palette.common.white
-  };
-  return {
-    heatMapColorProps,
-    legendProps
-  };
-}, "useHeatMapColors");
-
-// src/hooks/useQuadKeyPayloadsToFeatures.tsx
-var import_lodash = require("@xylabs/lodash");
-var import_sdk_geo = require("@xyo-network/sdk-geo");
-var import_react4 = require("react");
-var quadKeyToFeature = /* @__PURE__ */ __name(({ density, quadkey }) => {
-  const polygonFeature = new import_sdk_geo.GeoJson(quadkey).polygonFeature();
-  polygonFeature.properties = {
-    count: density,
-    density
-  };
-  return polygonFeature;
-}, "quadKeyToFeature");
-var setDensity = /* @__PURE__ */ __name((feature) => {
-  if (feature.properties) {
-    feature.properties.value = feature.properties.density / 5;
-  }
-  return feature;
-}, "setDensity");
-var useQuadKeyPayloadsToFeatures = /* @__PURE__ */ __name((payloads) => {
-  const [multipleFeatureSets, setMultipleFeatureSets] = (0, import_react4.useState)([
-    []
-  ]);
-  const [features, setFeatures] = (0, import_react4.useState)([]);
-  const [error, setError] = (0, import_react4.useState)();
-  (0, import_react4.useEffect)(() => {
-    if (Array.isArray(payloads)) {
-      if ((0, import_lodash.compact)(payloads).length > 0) {
-        const mappedFeatures = payloads?.map((payload) => payload?.result.map(quadKeyToFeature));
-        setMultipleFeatureSets(mappedFeatures.map((features2) => features2?.map(setDensity) ?? []));
-      } else {
-        setError(new Error("Cannot find payloads for provided hashes"));
-      }
-    }
-    if (payloads && payloads.result) {
-      const singlePayload = payloads;
-      const mappedFeatures = singlePayload.result.map(quadKeyToFeature);
-      setFeatures(mappedFeatures.map(setDensity));
-    }
-  }, [
-    payloads
-  ]);
-  return {
-    error,
-    features,
-    multipleFeatureSets
-  };
-}, "useQuadKeyPayloadsToFeatures");
-
-// src/MapBoxClasses/MapBase.ts
-var import_assert = require("@xylabs/assert");
-var import_sdk_geo2 = require("@xyo-network/sdk-geo");
-var MapBase = class {
-  static {
-    __name(this, "MapBase");
-  }
-  _config;
-  constructor(config) {
-    this._config = {
-      requestLocation: true,
-      zoom: 2,
-      ...config
-    };
-  }
-  get isMapReady() {
-    return !!this._config.map;
-  }
-  initializeMapSource(layer) {
-    const getSource = /* @__PURE__ */ __name(() => {
-      const featuresCollection = import_sdk_geo2.GeoJson.featureCollection(this._config.features);
-      return import_sdk_geo2.GeoJson.featuresSource(featuresCollection);
-    }, "getSource");
-    const existingSource = this._config.map.getSource(layer.source);
-    const source = getSource();
-    if (existingSource) {
-      existingSource.setData((0, import_assert.assertEx)(source.data));
-    } else {
-      this._config.map.addSource(layer.source, source);
-    }
-    layer.update(this._config.map, true);
-    return this;
-  }
-};
-
-// src/MapBoxClasses/MapHeat.ts
-var import_assert2 = require("@xylabs/assert");
-var import_delay = require("@xylabs/delay");
-var import_forget = require("@xylabs/forget");
-var import_sdk_geo3 = require("@xyo-network/sdk-geo");
-var import_mapbox_gl = require("mapbox-gl");
-var MapHeat = class extends MapBase {
-  static {
-    __name(this, "MapHeat");
-  }
-  static animationStarted = false;
-  config;
-  constructor(config) {
-    super(config);
-    this.config = config;
-  }
-  static initialMapPositioning(options, map, features, initialBounds) {
-    if (!features) {
-      return;
-    }
-    let bounds;
-    if (initialBounds) {
-      bounds = initialBounds;
-    } else {
-      bounds = new import_mapbox_gl.LngLatBounds();
-      features.forEach((feature) => {
-        for (const coordinates of feature.geometry.coordinates) {
-          for (const position of coordinates) {
-            bounds.extend(position);
-          }
-        }
-      });
-    }
-    map.setCenter(bounds.getCenter());
-    map.fitBounds(bounds, options);
-    return this;
-  }
-  static async initializeAnimatedHeatMapSource(layers, featureSet, map, startColor, endColor) {
-    this.animationStarted = true;
-    let layerTick = 0;
-    let sourceTick = 0;
-    const sources = featureSet.map((feature) => {
-      const featuresCollection = import_sdk_geo3.GeoJson.featureCollection(feature);
-      return import_sdk_geo3.GeoJson.featuresSource(featuresCollection);
-    });
-    this.updateLayer(map, layers[0], sources[0]);
-    this.updateLayer(map, layers[1], sources[1]);
-    for (const layer of layers) {
-      map.setPaintProperty(layer.id, "fill-opacity", 0);
-    }
-    const frameLength = 3e3;
-    const initialPad = 0.5;
-    const factor = 10;
-    const steps = 30;
-    const stepLength = frameLength / steps;
-    const lowUsageColor = startColor ?? "#FFB3B3";
-    const highUsageColor = endColor ?? "#FF0000";
-    const dynamicFillColor = /* @__PURE__ */ __name((factor2, initialPad2, i) => {
-      const sinFade = Math.sin(i / steps * Math.PI / 2);
-      const cosFade = Math.cos(i / steps * Math.PI / 2);
-      const divisor = factor2 + factor2 * sinFade;
-      const offset = initialPad2 * cosFade;
-      return [
-        "let",
-        "density",
-        [
-          "+",
-          [
-            "/",
-            [
-              "number",
-              [
-                "get",
-                "value"
-              ]
-            ],
-            divisor
-          ],
-          offset
-        ],
-        [
-          "interpolate",
-          [
-            "linear"
-          ],
-          [
-            "var",
-            "density"
-          ],
-          0,
-          lowUsageColor,
-          0.5,
-          highUsageColor
-        ]
-      ];
-    }, "dynamicFillColor");
-    const fadedIn = layers.map((_) => false);
-    const fadeIn = /* @__PURE__ */ __name(async (id, index) => {
-      for (let i = steps; i >= 1; i--) {
-        map.setPaintProperty(id, "fill-color", dynamicFillColor(factor, initialPad, i * (180 / stepLength)));
-        await (0, import_delay.delay)(stepLength);
-      }
-      fadedIn[index] = true;
-    }, "fadeIn");
-    const fadeOut = /* @__PURE__ */ __name(async (id, index) => {
-      for (let i = 1; i <= steps; i++) {
-        map.setPaintProperty(id, "fill-color", dynamicFillColor(factor, initialPad, i * (180 / stepLength)));
-        await (0, import_delay.delay)(stepLength);
-      }
-      fadedIn[index] = false;
-    }, "fadeOut");
-    let started = false;
-    const startAnimation = /* @__PURE__ */ __name(async () => {
-      (0, import_assert2.assertEx)(!started, () => "Animation Already Started");
-      started = true;
-      while (this.animationStarted) {
-        const upLayer = layerTick % layers.length;
-        const downLayer = (layerTick + 1) % layers.length;
-        const incomingSource = sourceTick % featureSet.length;
-        const outgoingSource = (sourceTick + 1) % featureSet.length;
-        if (fadedIn[upLayer]) {
-          this.updateLayer(map, layers[upLayer], sources[incomingSource]);
-          (0, import_forget.forget)(fadeOut(layers[upLayer].id, upLayer));
-        }
-        if (!fadedIn[downLayer]) {
-          this.updateLayer(map, layers[downLayer], sources[outgoingSource]);
-          (0, import_forget.forget)(fadeIn(layers[downLayer].id, downLayer));
-        }
-        while ((fadedIn[upLayer] || !fadedIn[downLayer]) && this.animationStarted) {
-          await (0, import_delay.delay)(1e3);
-        }
-        layerTick++;
-        sourceTick++;
-      }
-    }, "startAnimation");
-    await startAnimation();
-  }
-  static updateLayer(map, layer, source) {
-    const existingSource = map.getSource(layer.source);
-    if (existingSource && source.data) {
-      existingSource.setData(source.data);
-    } else if (source) {
-      map.addSource(layer.source, source);
-    }
-    layer.update(map, true);
-  }
-  // Build layers each with the same features
-  initializeHeatMapSource(layers) {
-    const getSource = /* @__PURE__ */ __name((_) => {
-      const featuresCollection = import_sdk_geo3.GeoJson.featureCollection(this.config.features);
-      return import_sdk_geo3.GeoJson.featuresSource(featuresCollection);
-    }, "getSource");
-    for (const [index, layer] of layers.entries()) {
-      const existingSource = this.config.map.getSource(layer.source);
-      const source = getSource(index);
-      if (existingSource) {
-        existingSource.setData((0, import_assert2.assertEx)(source.data));
-      } else {
-        this.config.map.addSource(layer.source, source);
-      }
-      layer.update(this.config.map, true);
-    }
-    return this;
-  }
-};
-
-// src/MapBoxClasses/MapPoints.ts
-var import_mapbox_gl2 = require("mapbox-gl");
-var MapPoints = class extends MapBase {
-  static {
-    __name(this, "MapPoints");
-  }
-  config;
-  constructor(config) {
-    super(config);
-    this.config = config;
-  }
-  initialMapPositioning(options, initialBounds) {
-    let bounds;
-    if (initialBounds) {
-      bounds = initialBounds;
-    } else {
-      bounds = new import_mapbox_gl2.LngLatBounds();
-      this.config.features.forEach((feature) => {
-        bounds.extend(feature.geometry.coordinates);
-      });
-    }
-    this.config.map.setCenter(bounds.getCenter());
-    this.config.map.fitBounds(bounds, options);
-    return this.config.map;
-  }
-};
-
-// src/MapBoxClasses/MapSettings.ts
-var import_mapbox_gl3 = require("mapbox-gl");
-var MapSettings = class _MapSettings {
-  static {
-    __name(this, "MapSettings");
-  }
-  static geoLocateControl;
-  static mapListeners = {
-    logData: /* @__PURE__ */ __name((ev, map) => {
-      const target = map || ev?.target;
-      if (target) {
-        console.log("zoom", target.getZoom());
-        console.log("center", target.getCenter());
-      }
-    }, "logData")
-  };
-  static navControl;
-  static requestLocation;
-  static toggleControls(value, map, zoom, requestLocation) {
-    if (value) {
-      _MapSettings.addControls(map, zoom, requestLocation);
-    } else {
-      _MapSettings.removeControls(map);
-    }
-    return this;
-  }
-  static toggleDebugLayer(value, map, layerName) {
-    const debugLayer3 = map.getLayer(layerName);
-    if (debugLayer3) {
-      if (value) {
-        map.setLayoutProperty(layerName, "visibility", "visible");
-      } else {
-        map.setLayoutProperty(layerName, "visibility", "none");
-      }
-    }
-    return this;
-  }
-  static toggleDebugLogging(value, map) {
-    const debugEvents = [
-      "resize",
-      "zoomend",
-      "dragend"
-    ];
-    if (value) {
-      this.mapListeners.logData(void 0, map);
-      for (const event of debugEvents) map.on(event, this.mapListeners.logData);
-    } else {
-      for (const event of debugEvents) map.off(event, this.mapListeners.logData);
-    }
-  }
-  static toggleScrollToZoom(value, map) {
-    if (value) {
-      map.scrollZoom.enable();
-    } else {
-      map.scrollZoom.disable();
-    }
-    return this;
-  }
-  static updateSettings(config) {
-    const { settings, map, zoom, requestLocation, debugLayerName = "" } = config;
-    const { scrollToZoom: scrollToZoom3, enableControls, debugLayer: debugLayer3, debugLogging } = settings;
-    _MapSettings.toggleControls(enableControls?.value, map, zoom, requestLocation).toggleScrollToZoom(scrollToZoom3?.value, map).toggleDebugLayer(debugLayer3?.value, map, debugLayerName).toggleDebugLogging(debugLogging.value, map);
-  }
-  // Needs to be static so we ensure controls are only instantiated once
-  static addControls(map, zoom, requestLocation) {
-    const geolocateControl = new import_mapbox_gl3.GeolocateControl({
-      fitBoundsOptions: {
-        zoom: zoom || 2
-      },
-      positionOptions: {
-        enableHighAccuracy: true
-      },
-      trackUserLocation: true
-    });
-    const navControl = new import_mapbox_gl3.NavigationControl({
-      showCompass: false
-    });
-    this.geoLocateControl = this.geoLocateControl || geolocateControl;
-    this.navControl = this.navControl || navControl;
-    if (!map.hasControl(this.geoLocateControl) && requestLocation) {
-      map.addControl(this.geoLocateControl);
-    }
-    if (!map.hasControl(this.navControl)) {
-      map.addControl(this.navControl, "top-left");
-    }
-    return this;
-  }
-  static removeControls(map) {
-    if (this.geoLocateControl && map.hasControl(this.geoLocateControl) && this.requestLocation) {
-      map.removeControl(this.geoLocateControl);
-    }
-    if (this.navControl && map.hasControl(this.navControl)) {
-      map.removeControl(this.navControl);
-    }
-    return this;
-  }
-};
-
-// src/Contexts/MapBoxInstance/Provider.tsx
-var import_react6 = __toESM(require("react"), 1);
-
-// src/Contexts/MapBoxInstance/Context.ts
-var import_react5 = require("react");
-var MapBoxInstanceContext = (0, import_react5.createContext)({});
-
-// src/Contexts/MapBoxInstance/Provider.tsx
-var MapBoxInstanceProvider = /* @__PURE__ */ __name(({ children }) => {
-  const [map, setMapBoxInstance] = (0, import_react6.useState)();
-  const [mapInitialized, setMapInitialized] = (0, import_react6.useState)(false);
-  const value = (0, import_react6.useMemo)(() => ({
-    map,
-    mapInitialized,
-    setMapBoxInstance
-  }), [
-    map,
-    mapInitialized,
-    setMapBoxInstance
-  ]);
-  (0, import_react6.useEffect)(() => {
-    if (!mapInitialized && map) {
-      map?.on("load", () => {
-        setMapInitialized(true);
-      });
-    }
-  }, [
-    map,
-    mapInitialized,
-    setMapInitialized
-  ]);
-  return /* @__PURE__ */ import_react6.default.createElement(MapBoxInstanceContext.Provider, {
-    value
-  }, children);
-}, "MapBoxInstanceProvider");
-
-// src/Contexts/MapBoxInstance/useMapBoxInstance.tsx
-var import_assert3 = require("@xylabs/assert");
-var import_react7 = require("react");
-var useMapBoxInstance = /* @__PURE__ */ __name(() => {
-  const context = (0, import_react7.useContext)(MapBoxInstanceContext);
-  (0, import_assert3.assertEx)("map" in context, () => "useMapBoxInstance must be used within a MapBoxInstanceContext");
-  return context;
-}, "useMapBoxInstance");
-
-// src/Contexts/MapSettings/Provider.tsx
-var import_react9 = __toESM(require("react"), 1);
-
-// src/Contexts/MapSettings/Context.ts
-var import_react8 = require("react");
-var MapSettingsContext = (0, import_react8.createContext)({});
-
-// src/Contexts/MapSettings/Provider.tsx
-var MapSettingsProvider = /* @__PURE__ */ __name(({ children, debugLayerName, defaultMapSettings, requestLocation, zoom = 1 }) => {
-  const [mapSettings, setMapSettings] = (0, import_react9.useState)(defaultMapSettings || {});
-  const { map, mapInitialized } = useMapBoxInstance();
-  const value = (0, import_react9.useMemo)(() => ({
-    mapSettings,
-    setMapSettings
-  }), [
-    mapSettings,
-    setMapSettings
-  ]);
-  (0, import_react9.useEffect)(() => {
-    if (mapSettings && map && mapInitialized) {
-      MapSettings.updateSettings({
-        debugLayerName,
-        map,
-        requestLocation,
-        settings: mapSettings,
-        zoom
-      });
-    }
-  }, [
-    debugLayerName,
-    map,
-    mapInitialized,
-    mapSettings,
-    requestLocation,
-    zoom
-  ]);
-  return /* @__PURE__ */ import_react9.default.createElement(MapSettingsContext.Provider, {
-    value
-  }, children);
-}, "MapSettingsProvider");
-
-// src/Contexts/MapSettings/useMapSettings.tsx
-var import_react10 = require("react");
-var useMapSettings = /* @__PURE__ */ __name(() => {
-  const context = (0, import_react10.useContext)(MapSettingsContext);
-  return context;
-}, "useMapSettings");
-
-// src/Contexts/HeatMapInitializer/Context.ts
-var import_react11 = require("react");
-var HeatMapInitializerContext = (0, import_react11.createContext)({});
-
-// src/Contexts/HeatMapInitializer/Provider.tsx
-var HeatMapInitializerProvider = /* @__PURE__ */ __name(({ children, featureSets, featureSetsLayers, features, fitToPadding, heatMapColorProps, layers, zoom }) => {
-  const [mapHeat, setMapHeat] = (0, import_react12.useState)();
-  const { options } = useDynamicPositioning();
-  const { mapSettings } = useMapSettings();
-  const { map, mapInitialized } = useMapBoxInstance();
-  const value = (0, import_react12.useMemo)(() => ({
-    MapHeat: mapHeat,
-    heatMapColorProps
-  }), [
-    mapHeat,
-    heatMapColorProps
-  ]);
-  (0, import_react12.useEffect)(() => {
-    if (mapInitialized && featureSets?.length && featureSets[0].length > 0 && map && featureSetsLayers?.length) {
-      const { lowUsageColor, highUsageColor } = heatMapColorProps;
-      (0, import_forget2.forget)(MapHeat.initializeAnimatedHeatMapSource(featureSetsLayers, featureSets, map, lowUsageColor, highUsageColor));
-    }
-    return () => {
-      MapHeat.animationStarted = false;
-    };
-  }, [
-    featureSets,
-    featureSetsLayers,
-    mapInitialized,
-    map,
-    heatMapColorProps
-  ]);
-  (0, import_react12.useEffect)(() => {
-    if (mapHeat && mapInitialized && features?.length && layers?.length) {
-      mapHeat.initializeHeatMapSource(layers);
-    }
-  }, [
-    mapHeat,
-    features?.length,
-    layers,
-    mapInitialized
-  ]);
-  (0, import_react12.useEffect)(() => {
-    if (mapInitialized) {
-      const { fitToPoints: fitToPoints3 } = mapSettings || {};
-      if (map) {
-        if (fitToPoints3?.value === true) {
-          MapHeat.initialMapPositioning({
-            padding: {
-              bottom: fitToPadding,
-              left: fitToPadding,
-              right: fitToPadding,
-              top: fitToPadding
-            }
-          }, map, features);
-        } else if (options.zoom && options.center) {
-          map.setZoom(options.zoom);
-          map.setCenter(options.center);
-        }
-      }
-    }
-  }, [
-    mapHeat,
-    map,
-    mapSettings,
-    fitToPadding,
-    options,
-    mapInitialized,
-    features
-  ]);
-  (0, import_react12.useEffect)(() => {
-    if (map && features?.length) {
-      setMapHeat(new MapHeat({
-        features,
-        map,
-        zoom
-      }));
-    }
-  }, [
-    map,
-    features,
-    zoom
-  ]);
-  return /* @__PURE__ */ import_react12.default.createElement(HeatMapInitializerContext.Provider, {
-    value
-  }, children);
-}, "HeatMapInitializerProvider");
-
-// src/Contexts/HeatMapInitializer/useHeatMapInitializer.tsx
-var import_assert4 = require("@xylabs/assert");
-var import_react13 = require("react");
-var useHeatMapInitializer = /* @__PURE__ */ __name(() => {
-  const context = (0, import_react13.useContext)(HeatMapInitializerContext);
-  (0, import_assert4.assertEx)("heatMapInitialized" in context, () => "useHeatMapInitializer must be used within a HeatMapInitializerContext");
-  return context;
-}, "useHeatMapInitializer");
-
-// src/Contexts/MapboxAccessToken/Context.ts
-var import_react_shared2 = require("@xyo-network/react-shared");
-var MapboxAccessTokenContext = (0, import_react_shared2.createContextEx)();
-
-// src/Contexts/MapboxAccessToken/Provider.tsx
-var import_react14 = __toESM(require("react"), 1);
-var MapboxAccessTokenProvider = /* @__PURE__ */ __name(({ defaultAccessToken, ...props }) => {
-  const [accessToken, setAccessToken] = (0, import_react14.useState)();
-  return /* @__PURE__ */ import_react14.default.createElement(MapboxAccessTokenContext.Provider, {
-    value: {
-      accessToken: accessToken ?? defaultAccessToken,
-      provided: true,
-      setAccessToken
-    },
-    ...props
-  });
-}, "MapboxAccessTokenProvider");
-
-// src/Contexts/MapboxAccessToken/use.ts
-var import_react_shared3 = require("@xyo-network/react-shared");
-var useMapboxAccessToken = /* @__PURE__ */ __name((required = false) => {
-  return (0, import_react_shared3.useContextEx)(MapboxAccessTokenContext, "MapboxAccessToken", required);
-}, "useMapboxAccessToken");
-
-// src/Layers/Configs/HeatMapFillLayerConfig.ts
-var HeatMapFillLayerConfig = /* @__PURE__ */ __name((color) => ({
-  paint: {
-    "fill-color": color,
-    "fill-opacity": [
-      "let",
-      "density",
-      [
-        "+",
-        [
-          "/",
-          [
-            "number",
-            [
-              "get",
-              "value"
-            ]
-          ],
-          4
-        ],
-        0.125
-      ],
-      [
-        "interpolate",
-        [
-          "linear"
-        ],
-        [
-          "var",
-          "density"
-        ],
-        0.8,
-        [
-          "var",
-          "density"
-        ],
-        1,
-        0.85
-      ]
-    ]
-  }
-}), "HeatMapFillLayerConfig");
-
-// src/Layers/Configs/HeatMapLineLayerConfig.ts
-var HeatMapLineLayerConfig = /* @__PURE__ */ __name((color) => ({
-  layout: {
-    // Enable for debugging
-    visibility: "none"
-  },
-  paint: {
-    "line-color": color,
-    "line-opacity": [
-      "let",
-      "density",
-      0,
-      [
-        "interpolate",
-        [
-          "linear"
-        ],
-        [
-          "var",
-          "density"
-        ],
-        0.8,
-        [
-          "var",
-          "density"
-        ],
-        1,
-        0.85
-      ]
-    ],
-    "line-width": 0.5
-  }
-}), "HeatMapLineLayerConfig");
-
-// src/Layers/Configs/HeatMapSymbolLayerConfig.ts
-var HeatMapSymbolLayerConfig = /* @__PURE__ */ __name((color) => ({
-  layout: {
-    "text-anchor": "center",
-    "text-field": [
-      "concat",
-      "value: ",
-      [
-        "to-string",
-        [
-          "+",
-          [
-            "/",
-            [
-              "number",
-              [
-                "get",
-                "value"
-              ]
-            ],
-            2
-          ],
-          0.25
-        ]
-      ],
-      "\n",
-      "count: ",
-      [
-        "to-string",
-        [
-          "get",
-          "count"
-        ]
-      ]
-    ],
-    "text-size": 10,
-    "visibility": "none"
-  },
-  paint: {
-    "text-color": color
-  }
-}), "HeatMapSymbolLayerConfig");
-
-// src/Layers/Configs/LocationPointLayerConfig.ts
-var LocationPointLayerConfig = /* @__PURE__ */ __name((color, circleRadius, circleOpacity) => {
-  return {
-    paint: {
-      "circle-color": color,
-      "circle-opacity": circleOpacity,
-      "circle-radius": circleRadius
-    }
-  };
-}, "LocationPointLayerConfig");
-
-// src/Layers/FillLayer.ts
-var import_sdk_geo4 = require("@xyo-network/sdk-geo");
-var FillLayerBuilder = class extends import_sdk_geo4.LayerBase {
-  static {
-    __name(this, "FillLayerBuilder");
-  }
-  FillLayerOptions;
-  // ensures this class passes for `AnyLayer` type in MapBox
-  type = "fill";
-  constructor(id, source, FillLayerOptions) {
-    super(id, source);
-    this.FillLayerOptions = FillLayerOptions || {
-      id: this.id,
-      source: this.source
-    };
-  }
-  buildLayer() {
-    return {
-      ...this.FillLayerOptions,
-      id: this.id,
-      source: this.source,
-      type: this.type
-    };
-  }
-};
-
-// src/Layers/LineLayer.ts
-var import_sdk_geo5 = require("@xyo-network/sdk-geo");
-var LineLayerBuilder = class extends import_sdk_geo5.LayerBase {
-  static {
-    __name(this, "LineLayerBuilder");
-  }
-  LineLayerOptions;
-  // ensures this class passes for `AnyLayer` type in MapBox
-  type = "line";
-  constructor(id, source, LineLayerOptions) {
-    super(id, source);
-    this.LineLayerOptions = LineLayerOptions || {
-      id: this.id,
-      source: this.source
-    };
-  }
-  buildLayer() {
-    return {
-      ...this.LineLayerOptions,
-      id: this.id,
-      layout: {},
-      source: this.source,
-      type: this.type
-    };
-  }
-};
-
-// src/Layers/SymbolLayer.ts
-var import_sdk_geo6 = require("@xyo-network/sdk-geo");
-var SymbolLayerBuilder = class extends import_sdk_geo6.LayerBase {
-  static {
-    __name(this, "SymbolLayerBuilder");
-  }
-  SymbolLayerOptions;
-  // ensures this class passes for `AnyLayer` type in MapBox
-  type = "symbol";
-  constructor(id, source, SymbolLayerOptions) {
-    super(id, source);
-    this.SymbolLayerOptions = SymbolLayerOptions || {
-      id: this.id,
-      source: this.source
-    };
-  }
-  buildLayer() {
-    return {
-      ...this.SymbolLayerOptions,
-      id: this.id,
-      source: this.source,
-      type: this.type
-    };
-  }
-};
-
-// src/Layers/Builders/LocationHeatMapLayerBuilder.ts
-var MapHeatConstants = {
-  LocationDebugLayerId: "location-debug-id",
-  LocationDebugLayerSource: "location-debug-source",
-  LocationFillLayerId: "location-fill-id",
-  LocationFillLayerSource: "location-fill-source",
-  LocationLineLayerId: "location-line-id",
-  LocationLineLayerSource: "location-line-source"
-};
-var LocationHeatMapLayerBuilder = /* @__PURE__ */ __name((color, alternateColor = "#000") => {
-  const { LocationFillLayerId, LocationFillLayerSource, LocationLineLayerId, LocationLineLayerSource, LocationDebugLayerId, LocationDebugLayerSource } = MapHeatConstants;
-  const fillLayerConfig = HeatMapFillLayerConfig(color);
-  const lineLayerConfig = HeatMapLineLayerConfig(color);
-  const debugLayerConfig = HeatMapSymbolLayerConfig(alternateColor);
-  const fillLayer = new FillLayerBuilder(LocationFillLayerId, LocationFillLayerSource, fillLayerConfig);
-  const lineLayer = new LineLayerBuilder(LocationLineLayerId, LocationLineLayerSource, lineLayerConfig);
-  const debugLayer3 = new SymbolLayerBuilder(LocationDebugLayerId, LocationDebugLayerSource, debugLayerConfig);
-  return [
-    fillLayer,
-    lineLayer,
-    debugLayer3
-  ];
-}, "LocationHeatMapLayerBuilder");
-
-// src/Layers/Builders/LocationHeatMapLayerBuilderAnimated.ts
-var MapHeatConstants2 = /* @__PURE__ */ __name((index, type) => ({
-  LocationDebugLayerId: `location-${type}-debug-id-${index}`,
-  LocationDebugLayerSource: `location-${type}-debug-source-${index}`,
-  LocationFillLayerId: `location-${type}-fill-id-${index}`,
-  LocationFillLayerSource: `location-${type}-fill-source-${index}`,
-  LocationLineLayerId: `location-${type}-line-id-${index}`,
-  LocationLineLayerSource: `location-${type}-line-source-${index}`
-}), "MapHeatConstants");
-var LocationHeatMapLayerBuilderAnimated = /* @__PURE__ */ __name((color, index, type = "") => {
-  const { LocationFillLayerId, LocationFillLayerSource } = MapHeatConstants2(index, type);
-  const fillLayerConfig = HeatMapFillLayerConfig(color);
-  const fillLayer = new FillLayerBuilder(LocationFillLayerId, LocationFillLayerSource, fillLayerConfig);
-  return fillLayer;
-}, "LocationHeatMapLayerBuilderAnimated");
-
-// src/Layers/CircleLayer.ts
-var import_sdk_geo7 = require("@xyo-network/sdk-geo");
-var CircleLayerBuilder = class extends import_sdk_geo7.LayerBase {
-  static {
-    __name(this, "CircleLayerBuilder");
-  }
-  CircleLayerOptions;
-  // ensures this class passes for `AnyLayer` type in MapBox
-  type = "circle";
-  constructor(id, source, CircleLayerOptions) {
-    super(id, source);
-    this.CircleLayerOptions = CircleLayerOptions || {
-      id: this.id,
-      source: this.source,
-      type: "circle"
-    };
-  }
-  buildLayer() {
-    return {
-      filter: [
-        "==",
-        "$type",
-        "Point"
-      ],
-      layout: {},
-      paint: {
-        "circle-color": "#ff0000",
-        "circle-radius": 6
-      },
-      type: this.type,
-      ...this.CircleLayerOptions,
-      id: this.id,
-      source: this.source
-    };
-  }
-};
-
-// src/Layers/Builders/LocationPointsMapLayerBuilder.ts
-var MapPointsConstants = {
-  LocationDotsLayerId: "location-dots",
-  LocationDotsLayerSource: "location-dots-source"
-};
-var LocationPointsMapLayerBuilder = /* @__PURE__ */ __name((color, circleRadius = 6, circleOpacity = 0.8) => {
-  const { LocationDotsLayerId, LocationDotsLayerSource } = MapPointsConstants;
-  const dotLayerConfig = LocationPointLayerConfig(color, circleRadius, circleOpacity);
-  const dotLayer = new CircleLayerBuilder(LocationDotsLayerId, LocationDotsLayerSource, dotLayerConfig);
-  return [
-    dotLayer
-  ];
-}, "LocationPointsMapLayerBuilder");
-
-// src/Components/MapBoxHeat.tsx
-var import_react_flexbox2 = require("@xylabs/react-flexbox");
-var import_react18 = __toESM(require("react"), 1);
-
-// src/Components/MapBox.tsx
-var import_mapbox_gl4 = require("mapbox-gl/dist/mapbox-gl.css");
-var import_mapbox_gl5 = require("mapbox-gl");
-var import_react15 = __toESM(require("react"), 1);
-
-// src/lib/MapStyle.ts
-var MapStyle;
-(function(MapStyle2) {
-  MapStyle2["Dark"] = "mapbox/dark-v10";
-  MapStyle2["Light"] = "mapbox/light-v10";
-  MapStyle2["Outdoors"] = "mapbox/outdoors-v11";
-  MapStyle2["Satellite"] = "mapbox/satellite-v9";
-  MapStyle2["SatelliteStreets"] = "mapbox/satellite-streets-v11";
-  MapStyle2["Streets"] = "mapbox/streets-v11";
-})(MapStyle || (MapStyle = {}));
-
-// src/Components/MapBox.tsx
-var MapBox = /* @__PURE__ */ __name(({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {
-  const [map, setMap] = (0, import_react15.useState)();
-  const mapContainerRef = (0, import_react15.useRef)(null);
-  const mapCanvasRef = (0, import_react15.useRef)(null);
-  const { setMapBoxInstance, map: mapInstance } = useMapBoxInstance();
-  const { mapSettings } = useMapSettings();
-  const activeResize = mapSettings?.dynamicMapResize.value;
-  useDynamicMapResize(mapContainerRef, mapCanvasRef, mapInstance, activeResize);
-  (0, import_react15.useEffect)(() => {
-    if (mapSettings?.preferDark?.value === true) {
-      map?.setStyle(`mapbox://styles/${MapStyle.Dark}`);
-    } else {
-      map?.setStyle(`mapbox://styles/${darkMode ? MapStyle.Dark : MapStyle.Light}`);
-    }
-  }, [
-    map,
-    darkMode,
-    mapSettings
-  ]);
-  (0, import_react15.useEffect)(() => {
-    const map2 = new import_mapbox_gl5.Map({
-      accessToken,
-      center: [
-        0,
-        0
-      ],
-      container: mapContainerRef.current ?? "",
-      style: `mapbox://styles/${MapStyle.Light}`,
-      zoom,
-      ...options
-    });
-    setMapBoxInstance?.(map2);
-    setMap(map2);
-    mapCanvasRef.current = document.querySelector(".mapboxgl-canvas");
-    console.log("Created Map");
-    return () => {
-      console.log("Removing Map");
-      map2.remove();
-    };
-  }, [
-    mapContainerRef,
-    setMap,
-    options,
-    zoom,
-    setMapBoxInstance,
-    accessToken
-  ]);
-  return /* @__PURE__ */ import_react15.default.createElement("div", {
-    ref: /* @__PURE__ */ __name((el) => mapContainerRef.current = el, "ref"),
-    style: {
-      bottom: 0,
-      left: 0,
-      position: "absolute",
-      right: 0,
-      top: 0,
-      ...props
-    }
-  });
-}, "MapBox");
-
-// src/Components/MapSettingsComponents/Setting.tsx
-var import_material2 = require("@mui/material");
-var import_react16 = __toESM(require("react"), 1);
-var MapSettingSwitch = /* @__PURE__ */ __name(({ developerMode, field, ...props }) => {
-  const { mapSettings, setMapSettings } = useMapSettings();
-  const setting = mapSettings?.[field];
-  const onLocalChange = /* @__PURE__ */ __name((event) => {
-    if (setting) {
-      setMapSettings?.((previous) => {
-        previous[setting.field].value = event.target.checked;
-        return {
-          ...previous
-        };
-      });
-    }
-  }, "onLocalChange");
-  if (setting?.devMode && developerMode === false) {
-    return null;
-  }
-  return setting?.hidden ? null : /* @__PURE__ */ import_react16.default.createElement(import_material2.FormControlLabel, {
-    label: setting?.label,
-    control: /* @__PURE__ */ import_react16.default.createElement(import_material2.Switch, {
-      checked: setting?.value,
-      onChange: onLocalChange,
-      ...props
-    })
-  });
-}, "MapSettingSwitch");
-
-// src/Components/MapSettingsComponents/SettingsBox.tsx
-var import_material3 = require("@mui/material");
-var import_react_flexbox = require("@xylabs/react-flexbox");
-var import_react_app_settings = require("@xyo-network/react-app-settings");
-var import_react17 = __toESM(require("react"), 1);
-var MapSettingsBox = /* @__PURE__ */ __name(({ developerMode, ...props }) => {
-  const { mapSettings } = useMapSettings();
-  const { developerMode: devModeFromContext } = (0, import_react_app_settings.useAppSettings)();
-  const resolveDeveloperMode = developerMode ?? devModeFromContext;
-  return mapSettings && resolveDeveloperMode ? /* @__PURE__ */ import_react17.default.createElement(import_react_flexbox.FlexGrowRow, {
-    bottom: 36,
-    left: 10,
-    position: "absolute",
-    ...props
-  }, /* @__PURE__ */ import_react17.default.createElement(import_react_flexbox.FlexRow, {
-    paddingX: 2
-  }, /* @__PURE__ */ import_react17.default.createElement(import_material3.Paper, null, /* @__PURE__ */ import_react17.default.createElement(import_material3.Stack, {
-    direction: "row",
-    spacing: 1,
-    marginX: 1
-  }, Object.keys(mapSettings).map((key, index) => {
-    return /* @__PURE__ */ import_react17.default.createElement(MapSettingSwitch, {
-      key: index,
-      field: mapSettings[key].field,
-      developerMode
-    });
-  }))))) : null;
-}, "MapSettingsBox");
-
-// src/Components/MapBoxHeat.tsx
-var MapboxHeatFlexBox = /* @__PURE__ */ __name(({ accessToken, children, mapBoxOptions, zoom, legend, developerMode, ...props }) => {
-  return /* @__PURE__ */ import_react18.default.createElement(import_react_flexbox2.FlexCol, props, /* @__PURE__ */ import_react18.default.createElement(MapBox, {
-    accessToken,
-    options: mapBoxOptions,
-    zoom
-  }), /* @__PURE__ */ import_react18.default.createElement(MapSettingsBox, {
-    developerMode
-  }), legend, children);
-}, "MapboxHeatFlexBox");
-
-// src/Components/AnimatedHeatMap.tsx
-var AnimatedHeatMap = /* @__PURE__ */ __name(({ accessToken, animatedFeatureSets, defaultMapSettings, heatMapColorProps, staticFeatureSet, ...props }) => {
-  const theme = (0, import_material4.useTheme)();
-  const { staticMapColor, lowUsageColor, highUsageColor } = heatMapColorProps || {};
-  const localStaticMapColor = staticMapColor ?? theme.palette.primary.light;
-  const [layers] = (0, import_react19.useState)([
-    LocationHeatMapLayerBuilderAnimated(localStaticMapColor, 0, "static"),
-    LocationHeatMapLayerBuilderAnimated(lowUsageColor || localStaticMapColor, 0, "animated"),
-    LocationHeatMapLayerBuilderAnimated(highUsageColor || (0, import_material4.darken)(localStaticMapColor, 0.9), 1, "animated")
-  ]);
-  return animatedFeatureSets?.length ? /* @__PURE__ */ import_react19.default.createElement(MapBoxInstanceProvider, null, /* @__PURE__ */ import_react19.default.createElement(MapSettingsProvider, {
-    defaultMapSettings,
-    debugLayerName: MapHeatConstants.LocationDebugLayerId
-  }, /* @__PURE__ */ import_react19.default.createElement(HeatMapInitializerProvider, {
-    features: staticFeatureSet,
-    layers: [
-      layers[0]
-    ],
-    featureSets: animatedFeatureSets,
-    featureSetsLayers: layers.slice(1, 3),
-    heatMapColorProps
-  }, /* @__PURE__ */ import_react19.default.createElement(MapboxHeatFlexBox, {
-    accessToken,
-    ...props
-  })))) : /* @__PURE__ */ import_react19.default.createElement(import_react_flexbox3.FlexCol, {
-    minHeight: 160,
-    minWidth: 160,
-    busy: true
-  });
-}, "AnimatedHeatMap");
-
-// src/Components/AnimatedHeatMapLoaded.tsx
-var import_material7 = require("@mui/material");
-var import_react_flexbox6 = require("@xylabs/react-flexbox");
-var import_react_archivist = require("@xyo-network/react-archivist");
-var import_react22 = __toESM(require("react"), 1);
-
-// src/Components/Legend.tsx
-var import_material6 = require("@mui/material");
-var import_react_flexbox5 = require("@xylabs/react-flexbox");
-var import_react21 = __toESM(require("react"), 1);
-
-// src/Components/Legends/ColorGradient.tsx
-var import_material5 = require("@mui/material");
-var import_react_flexbox4 = require("@xylabs/react-flexbox");
-var import_react20 = __toESM(require("react"), 1);
-var ColorGradientLegend = /* @__PURE__ */ __name(({ startColor, endColor, startLabel, endLabel, heading, textColor, ...props }) => {
-  const theme = (0, import_material5.useTheme)();
-  return /* @__PURE__ */ import_react20.default.createElement(import_react_flexbox4.FlexCol, props, /* @__PURE__ */ import_react20.default.createElement(import_material5.Typography, {
-    mb: theme.spacing(0.25),
-    color: textColor,
-    variant: "caption",
-    textAlign: "center"
-  }, heading), /* @__PURE__ */ import_react20.default.createElement(import_react_flexbox4.FlexCol, {
-    flexGrow: 1,
-    alignItems: "stretch",
-    paddingX: theme.spacing(1),
-    mb: theme.spacing(0.25)
-  }, /* @__PURE__ */ import_react20.default.createElement(import_react_flexbox4.FlexCol, {
-    height: theme.spacing(0.75),
-    border: `1px solid ${textColor}`,
-    sx: {
-      backgroundImage: `linear-gradient(to right, ${startColor},${endColor})`
-    }
-  })), /* @__PURE__ */ import_react20.default.createElement(import_react_flexbox4.FlexRow, {
-    flexGrow: 1,
-    justifyContent: "space-between"
-  }, /* @__PURE__ */ import_react20.default.createElement(import_material5.Typography, {
-    color: textColor,
-    variant: "caption"
-  }, startLabel), /* @__PURE__ */ import_react20.default.createElement(import_material5.Typography, {
-    color: textColor,
-    variant: "caption"
-  }, endLabel)));
-}, "ColorGradientLegend");
-
-// src/Components/Legend.tsx
-var AnimatedHeatMapLegend = /* @__PURE__ */ __name(({ ...legendProps }) => {
-  const { startColor, endColor, startLabel, endLabel, heading, textColor } = legendProps;
-  const theme = (0, import_material6.useTheme)();
-  const isSmall = (0, import_material6.useMediaQuery)(theme.breakpoints.down("sm"));
-  return /* @__PURE__ */ import_react21.default.createElement(import_react_flexbox5.FlexCol, {
-    position: "absolute",
-    bottom: 0,
-    right: 0
-  }, /* @__PURE__ */ import_react21.default.createElement(ColorGradientLegend, {
-    startColor,
-    endColor,
-    startLabel,
-    endLabel,
-    heading,
-    textColor,
-    alignItems: "stretch",
-    marginBottom: theme.spacing(4),
-    marginLeft: isSmall ? theme.spacing(3) : 0,
-    marginRight: isSmall ? theme.spacing(2) : theme.spacing(3),
-    width: isSmall ? "40vw" : theme.spacing(18)
-  }));
-}, "AnimatedHeatMapLegend");
-
-// src/Components/AnimatedHeatMapLoaded.tsx
-var AnimatedHeatMapLoaded = /* @__PURE__ */ __name(({ accessToken, archivistNameOrAddress, ...props }) => {
-  const hashes = useFindHashes();
-  const [archivist] = (0, import_react_archivist.useWeakArchivistFromNode)(archivistNameOrAddress);
-  const [payloads, xyoError] = (0, import_react_archivist.useWeakArchivistGet)(archivist, hashes);
-  const { multipleFeatureSets } = useQuadKeyPayloadsToFeatures(payloads);
-  const { heatMapColorProps, legendProps } = useHeatMapColors();
-  const MapBoxHeatProps = {
-    flexGrow: 1,
-    legend: legendProps ? /* @__PURE__ */ import_react22.default.createElement(AnimatedHeatMapLegend, legendProps) : null
-  };
-  return /* @__PURE__ */ import_react22.default.createElement(import_react_flexbox6.FlexCol, {
-    alignItems: "stretch",
-    ...props
-  }, xyoError ? /* @__PURE__ */ import_react22.default.createElement(import_material7.Alert, {
-    sx: {
-      mt: 2
-    }
-  }, /* @__PURE__ */ import_react22.default.createElement(import_material7.AlertTitle, null, "Error Loading Map"), xyoError.message ? `Error: ${xyoError.message}` : null, "You might try authenticating again.") : null, hashes === void 0 ? /* @__PURE__ */ import_react22.default.createElement(import_material7.Alert, null, "Missing answer hash for heat map query") : /* @__PURE__ */ import_react22.default.createElement(AnimatedHeatMap, {
-    accessToken,
-    defaultMapSettings: AnimatedHeatMapSettings,
-    animatedFeatureSets: multipleFeatureSets.slice(1),
-    staticFeatureSet: multipleFeatureSets[0],
-    heatMapColorProps,
-    ...MapBoxHeatProps
-  }));
-}, "AnimatedHeatMapLoaded");
-
-// src/Components/HeatMapSettings.ts
-var HeatMapSettings = DefaultMapSettings();
-var { debugLayer: debugLayer2, scrollToZoom: scrollToZoom2, fitToPoints: fitToPoints2 } = HeatMapSettings;
-debugLayer2.hidden = false;
-scrollToZoom2.value = true;
-fitToPoints2.value = true;
-
-// src/Components/LayerAnimator.tsx
-var import_react_shared4 = require("@xylabs/react-shared");
-var import_react23 = __toESM(require("react"), 1);
-var timeIncrement = 2e3;
-var animatedLayerCount = 3;
-var LayerAnimator = /* @__PURE__ */ __name(({ animateLayers, children, layers, layersInitialized, map }) => {
-  const [fillLayers, setFillLayers] = (0, import_react23.useState)([]);
-  const layerIndexQueue = (0, import_react23.useRef)([]);
-  const incrementQueue = (0, import_react23.useCallback)((index) => {
-    if (fillLayers[index]) {
-      layerIndexQueue.current.push(index);
-    } else {
-      layerIndexQueue.current.push(0);
-    }
-    return layerIndexQueue.current.at(-1);
-  }, [
-    fillLayers
-  ]);
-  const lastQueuedIndex = (0, import_react23.useCallback)(() => {
-    const last = layerIndexQueue.current.at(-1);
-    if (last === void 0) {
-      incrementQueue(0);
-      return 0;
-    } else {
-      return last;
-    }
-  }, [
-    incrementQueue
-  ]);
-  const unshiftQueue = (0, import_react23.useCallback)(() => {
-    layerIndexQueue.current.shift();
-  }, []);
-  const getNextLayer = (0, import_react23.useCallback)(() => {
-    const nextLayer = fillLayers[lastQueuedIndex()];
-    incrementQueue(lastQueuedIndex() + 1);
-    return nextLayer;
-  }, [
-    fillLayers,
-    incrementQueue,
-    lastQueuedIndex
-  ]);
-  const layerAnimateWorker = (0, import_react23.useCallback)((layer) => {
-    if (layer) {
-      map?.setPaintProperty(layer.id, "fill-opacity", 0.85);
-      setTimeout(() => {
-        map?.setPaintProperty(layer.id, "fill-opacity", 0);
-        unshiftQueue();
-      }, timeIncrement * 2);
-    } else {
-      console.warn("tried to queue an empty layer");
-    }
-  }, [
-    map,
-    unshiftQueue
-  ]);
-  (0, import_react23.useEffect)(() => {
-    if (layers?.length && map && layersInitialized) {
-      setFillLayers(layers.filter((layer) => {
-        const fillLayer = layer.id.startsWith("location-fill");
-        if (fillLayer) {
-          map.setPaintProperty(layer.id, "fill-opacity-transition", {
-            delay: 0,
-            duration: 4e3
-          });
-        }
-        return fillLayer;
-      }));
-    }
-  }, [
-    layers,
-    layersInitialized,
-    map
-  ]);
-  const queueLayerAnimation = (0, import_react23.useCallback)(() => {
-    const animatedLayers = [];
-    for (let i = 0; i < animatedLayerCount; i++) {
-      animatedLayers.push(getNextLayer());
-    }
-    for (const [index, layer] of animatedLayers.entries()) {
-      if (index === 0) {
-        layerAnimateWorker(layer);
-      } else {
-        setTimeout(() => {
-          layerAnimateWorker(layer);
-        }, timeIncrement * index);
-      }
-    }
-  }, [
-    getNextLayer,
-    layerAnimateWorker
-  ]);
-  (0, import_react23.useEffect)(() => {
-    if (animateLayers && layersInitialized && map && fillLayers.length > 0) {
-      queueLayerAnimation();
-    }
-  }, [
-    animateLayers,
-    fillLayers.length,
-    layersInitialized,
-    map,
-    queueLayerAnimation
-  ]);
-  (0, import_react_shared4.useInterval)(() => {
-    if (animateLayers && layersInitialized && map && fillLayers.length > 0) {
-      queueLayerAnimation();
-    }
-  }, timeIncrement * animatedLayerCount);
-  return /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, children);
-}, "LayerAnimator");
-
-// src/Components/MapBoxPoints.tsx
-var import_material8 = require("@mui/material");
-var import_react_flexbox7 = require("@xylabs/react-flexbox");
-var import_react24 = __toESM(require("react"), 1);
-var MapboxPointsFlexBox = /* @__PURE__ */ __name(({ accessToken, features, fitToPointsPadding = 20, layers, zoom, ...props }) => {
-  const [mapPoints, setMapPoints] = (0, import_react24.useState)();
-  const { mapSettings } = useMapSettings();
-  const { map, mapInitialized } = useMapBoxInstance();
-  const customFitToBoundsOptions = /* @__PURE__ */ __name((zoom2) => {
-    if (zoom2 !== void 0) {
-      return {
-        maxZoom: zoom2
-      };
-    }
-    return {};
-  }, "customFitToBoundsOptions");
-  const updateFeatures = (0, import_react24.useCallback)(() => {
-    if (mapPoints?.isMapReady && features?.length && layers) for (const layer of layers) {
-      mapPoints.initializeMapSource(layer);
-    }
-  }, [
-    mapPoints,
-    features,
-    layers
-  ]);
-  const updateMapSetup = (0, import_react24.useCallback)(() => {
-    const { fitToPoints: fitToPoints3 } = mapSettings || {};
-    if (mapPoints && map && fitToPoints3?.value === true) {
-      mapPoints.initialMapPositioning({
-        padding: {
-          bottom: fitToPointsPadding,
-          left: fitToPointsPadding,
-          right: fitToPointsPadding,
-          top: fitToPointsPadding
-        },
-        ...customFitToBoundsOptions(zoom)
-      });
-    }
-  }, [
-    mapSettings,
-    mapPoints,
-    map,
-    fitToPointsPadding,
-    zoom
-  ]);
-  const reInitializeMap = (0, import_react24.useCallback)(() => {
-    mapPoints?.initialMapPositioning({
-      padding: {
-        bottom: fitToPointsPadding,
-        left: fitToPointsPadding,
-        right: fitToPointsPadding,
-        top: fitToPointsPadding
-      },
-      ...customFitToBoundsOptions(zoom)
-    });
-    updateFeatures();
-  }, [
-    mapPoints,
-    fitToPointsPadding,
-    updateFeatures,
-    zoom
-  ]);
-  (0, import_react24.useEffect)(() => {
-    if (map && features?.length) {
-      setMapPoints(new MapPoints({
-        features,
-        map,
-        zoom
-      }));
-    }
-  }, [
-    map,
-    features,
-    zoom
-  ]);
-  (0, import_react24.useEffect)(() => {
-    if (mapInitialized) {
-      updateMapSetup();
-      reInitializeMap();
-    }
-  }, [
-    mapInitialized,
-    reInitializeMap,
-    updateMapSetup
-  ]);
-  return /* @__PURE__ */ import_react24.default.createElement(import_react_flexbox7.FlexCol, {
-    alignItems: "stretch",
-    id: "xyo-mapbox-wrap",
-    ...props
-  }, features ? /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, /* @__PURE__ */ import_react24.default.createElement(MapBox, {
-    accessToken,
-    zoom
-  }), /* @__PURE__ */ import_react24.default.createElement(MapSettingsBox, null)) : /* @__PURE__ */ import_react24.default.createElement(import_material8.Alert, {
-    severity: "error"
-  }, "No data to show"));
-}, "MapboxPointsFlexBox");
-
-// src/types/NetworkLocationAnswerBase.ts
-var import_payload_model = require("@xyo-network/payload-model");
-var NetworkLocationAnswerSchema = "network.xyo.location.range.answer";
-var isNetworkLocationAnswer = (0, import_payload_model.isPayloadOfSchemaType)(NetworkLocationAnswerSchema);
-var NetworkLocationHeatmapAnswerSchema = "network.xyo.location.heatmap.answer";
-var isNetworkLocationHeatmapAnswer = (0, import_payload_model.isPayloadOfSchemaType)(NetworkLocationHeatmapAnswerSchema);
-var NetworkLocationHeatmapQuadkeyAnswerSchema = "network.xyo.location.heatmap.quadkey.answer";
-var isNetworkLocationHeatmapQuadkeyAnswer = (0, import_payload_model.isPayloadOfSchemaType)(NetworkLocationHeatmapQuadkeyAnswerSchema);
-//# sourceMappingURL=index.cjs.map