@xyo-network/react-map 2.77.0 → 2.77.1

package/dist/neutral/index.cjs

@@ -1,1333 +1,3 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 __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 = () => ({
-  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
-  }
-});
-
-// 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_react16 = require("react");
-
-// src/Contexts/HeatMapInitializer/Provider.tsx
-var import_forget2 = require("@xylabs/forget");
-var import_react12 = require("react");
-
-// src/hooks/useDynamicMapResize.tsx
-var import_react = require("react");
-var useDynamicMapResize = (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]);
-};
-
-// 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 = (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;
-};
-var useDynamicPositioning = () => {
-  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 };
-};
-
-// 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 = () => {
-  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;
-};
-
-// src/hooks/useHeatMapColors.tsx
-var import_material = require("@mui/material");
-var useHeatMapColors = () => {
-  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 };
-};
-
-// 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 = ({ density, quadkey }) => {
-  const polygonFeature = new import_sdk_geo.GeoJson(quadkey).polygonFeature();
-  polygonFeature.properties = {
-    count: density,
-    density
-  };
-  return polygonFeature;
-};
-var setDensity = (feature) => {
-  if (feature.properties) {
-    feature.properties.value = feature.properties.density / 5;
-  }
-  return feature;
-};
-var useQuadKeyPayloadsToFeatures = (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 };
-};
-
-// src/MapBoxClasses/MapBase.ts
-var import_assert = require("@xylabs/assert");
-var import_sdk_geo2 = require("@xyo-network/sdk-geo");
-var MapBase = class {
-  _config;
-  constructor(config) {
-    this._config = { requestLocation: true, zoom: 2, ...config };
-  }
-  get isMapReady() {
-    return !!this._config.map;
-  }
-  initializeMapSource(layer) {
-    const getSource = () => {
-      const featuresCollection = import_sdk_geo2.GeoJson.featureCollection(this._config.features);
-      return import_sdk_geo2.GeoJson.featuresSource(featuresCollection);
-    };
-    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 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 = (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]
-      ];
-    };
-    const fadedIn = layers.map((_) => false);
-    const fadeIn = 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;
-    };
-    const fadeOut = 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;
-    };
-    let started = false;
-    const startAnimation = 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++;
-      }
-    };
-    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 = (_) => {
-      const featuresCollection = import_sdk_geo3.GeoJson.featureCollection(this.config.features);
-      return import_sdk_geo3.GeoJson.featuresSource(featuresCollection);
-    };
-    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 {
-  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 geoLocateControl;
-  static mapListeners = {
-    logData: (ev, map) => {
-      const target = map || ev?.target;
-      if (target) {
-        console.log("zoom", target.getZoom());
-        console.log("center", target.getCenter());
-      }
-    }
-  };
-  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 = require("react");
-
-// src/Contexts/MapBoxInstance/Context.ts
-var import_react5 = require("react");
-var MapBoxInstanceContext = (0, import_react5.createContext)({});
-
-// src/Contexts/MapBoxInstance/Provider.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var MapBoxInstanceProvider = ({ children }) => {
-  const [map, setMapBoxInstance] = (0, import_react6.useState)();
-  const [mapInitialized, setMapInitialized] = (0, import_react6.useState)(false);
-  const value = { map, mapInitialized, setMapBoxInstance };
-  (0, import_react6.useEffect)(() => {
-    if (!mapInitialized && map) {
-      map?.on("load", () => {
-        setMapInitialized(true);
-      });
-    }
-  }, [map, mapInitialized, setMapInitialized]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MapBoxInstanceContext.Provider, { value, children });
-};
-
-// src/Contexts/MapBoxInstance/useMapBoxInstance.tsx
-var import_assert3 = require("@xylabs/assert");
-var import_react7 = require("react");
-var useMapBoxInstance = () => {
-  const context = (0, import_react7.useContext)(MapBoxInstanceContext);
-  (0, import_assert3.assertEx)("map" in context, () => "useMapBoxInstance must be used within a MapBoxInstanceContext");
-  return context;
-};
-
-// src/Contexts/MapSettings/Provider.tsx
-var import_react9 = require("react");
-
-// src/Contexts/MapSettings/Context.ts
-var import_react8 = require("react");
-var MapSettingsContext = (0, import_react8.createContext)({});
-
-// src/Contexts/MapSettings/Provider.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var MapSettingsProvider = ({
-  children,
-  debugLayerName,
-  defaultMapSettings,
-  requestLocation,
-  zoom = 1
-}) => {
-  const [mapSettings, setMapSettings] = (0, import_react9.useState)(defaultMapSettings || {});
-  const { map, mapInitialized } = useMapBoxInstance();
-  const value = {
-    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__ */ (0, import_jsx_runtime2.jsx)(MapSettingsContext.Provider, { value, children });
-};
-
-// src/Contexts/MapSettings/useMapSettings.tsx
-var import_react10 = require("react");
-var useMapSettings = () => {
-  const context = (0, import_react10.useContext)(MapSettingsContext);
-  return context;
-};
-
-// src/Contexts/HeatMapInitializer/Context.ts
-var import_react11 = require("react");
-var HeatMapInitializerContext = (0, import_react11.createContext)({});
-
-// src/Contexts/HeatMapInitializer/Provider.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var HeatMapInitializerProvider = ({
-  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 = {
-    MapHeat: 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: 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__ */ (0, import_jsx_runtime3.jsx)(HeatMapInitializerContext.Provider, { value, children });
-};
-
-// src/Contexts/HeatMapInitializer/useHeatMapInitializer.tsx
-var import_assert4 = require("@xylabs/assert");
-var import_react13 = require("react");
-var useHeatMapInitializer = () => {
-  const context = (0, import_react13.useContext)(HeatMapInitializerContext);
-  (0, import_assert4.assertEx)("heatMapInitialized" in context, () => "useHeatMapInitializer must be used within a HeatMapInitializerContext");
-  return context;
-};
-
-// 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 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var MapboxAccessTokenProvider = ({ defaultAccessToken, ...props }) => {
-  const [accessToken, setAccessToken] = (0, import_react14.useState)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MapboxAccessTokenContext.Provider, { value: { accessToken: accessToken ?? defaultAccessToken, provided: true, setAccessToken }, ...props });
-};
-
-// src/Contexts/MapboxAccessToken/use.ts
-var import_react_shared3 = require("@xyo-network/react-shared");
-var useMapboxAccessToken = (required = false) => {
-  return (0, import_react_shared3.useContextEx)(MapboxAccessTokenContext, "MapboxAccessToken", required);
-};
-
-// src/Layers/Configs/HeatMapFillLayerConfig.ts
-var HeatMapFillLayerConfig = (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]
-    ]
-  }
-});
-
-// src/Layers/Configs/HeatMapLineLayerConfig.ts
-var HeatMapLineLayerConfig = (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
-  }
-});
-
-// src/Layers/Configs/HeatMapSymbolLayerConfig.ts
-var HeatMapSymbolLayerConfig = (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
-  }
-});
-
-// src/Layers/Configs/LocationPointLayerConfig.ts
-var LocationPointLayerConfig = (color, circleRadius, circleOpacity) => {
-  return {
-    paint: {
-      "circle-color": color,
-      "circle-opacity": circleOpacity,
-      "circle-radius": circleRadius
-    }
-  };
-};
-
-// src/Layers/FillLayer.ts
-var import_sdk_geo4 = require("@xyo-network/sdk-geo");
-var FillLayerBuilder = class extends import_sdk_geo4.LayerBase {
-  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 {
-  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 {
-  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 = (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];
-};
-
-// src/Layers/Builders/LocationHeatMapLayerBuilderAnimated.ts
-var MapHeatConstants2 = (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}`
-});
-var LocationHeatMapLayerBuilderAnimated = (color, index, type = "") => {
-  const { LocationFillLayerId, LocationFillLayerSource } = MapHeatConstants2(index, type);
-  const fillLayerConfig = HeatMapFillLayerConfig(color);
-  const fillLayer = new FillLayerBuilder(LocationFillLayerId, LocationFillLayerSource, fillLayerConfig);
-  return fillLayer;
-};
-
-// src/Layers/CircleLayer.ts
-var import_sdk_geo7 = require("@xyo-network/sdk-geo");
-var CircleLayerBuilder = class extends import_sdk_geo7.LayerBase {
-  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 = (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];
-};
-
-// src/Components/MapBoxHeat.tsx
-var import_react_flexbox2 = require("@xylabs/react-flexbox");
-
-// 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 = require("react");
-
-// src/lib/MapStyle.ts
-var MapStyle = /* @__PURE__ */ ((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";
-  return MapStyle2;
-})(MapStyle || {});
-
-// src/Components/MapBox.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var MapBox = ({ 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/${"mapbox/dark-v10" /* Dark */}`);
-    } else {
-      map?.setStyle(`mapbox://styles/${darkMode ? "mapbox/dark-v10" /* Dark */ : "mapbox/light-v10" /* 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/${"mapbox/light-v10" /* 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__ */ (0, import_jsx_runtime5.jsx)(
-    "div",
-    {
-      ref: (el) => mapContainerRef.current = el,
-      style: {
-        bottom: 0,
-        left: 0,
-        position: "absolute",
-        right: 0,
-        top: 0,
-        ...props
-      }
-    }
-  );
-};
-
-// src/Components/MapSettingsComponents/Setting.tsx
-var import_material2 = require("@mui/material");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var MapSettingSwitch = ({ developerMode, field, ...props }) => {
-  const { mapSettings, setMapSettings } = useMapSettings();
-  const setting = mapSettings?.[field];
-  const onLocalChange = (event) => {
-    if (setting) {
-      setMapSettings?.((previous) => {
-        previous[setting.field].value = event.target.checked;
-        return { ...previous };
-      });
-    }
-  };
-  if (setting?.devMode && developerMode === false) {
-    return null;
-  }
-  return setting?.hidden ? null : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material2.FormControlLabel, { label: setting?.label, control: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material2.Switch, { checked: setting?.value, onChange: onLocalChange, ...props }) });
-};
-
-// 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_jsx_runtime7 = require("react/jsx-runtime");
-var MapSettingsBox = ({ developerMode, ...props }) => {
-  const { mapSettings } = useMapSettings();
-  const { developerMode: devModeFromContext } = (0, import_react_app_settings.useAppSettings)();
-  const resolveDeveloperMode = developerMode ?? devModeFromContext;
-  return mapSettings && resolveDeveloperMode ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_flexbox.FlexGrowRow, { bottom: 36, left: 10, position: "absolute", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_flexbox.FlexRow, { paddingX: 2, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material3.Paper, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material3.Stack, { direction: "row", spacing: 1, marginX: 1, children: Object.keys(mapSettings).map((key, index) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MapSettingSwitch, { field: mapSettings[key].field, developerMode }, index);
-  }) }) }) }) }) : null;
-};
-
-// src/Components/MapBoxHeat.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var MapboxHeatFlexBox = ({ accessToken, children, mapBoxOptions, zoom, legend, developerMode, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_flexbox2.FlexCol, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MapBox, { accessToken, options: mapBoxOptions, zoom }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MapSettingsBox, { developerMode }),
-    legend,
-    children
-  ] });
-};
-
-// src/Components/AnimatedHeatMap.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var AnimatedHeatMap = ({
-  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_react16.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__ */ (0, import_jsx_runtime9.jsx)(MapBoxInstanceProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MapSettingsProvider, { defaultMapSettings, debugLayerName: MapHeatConstants.LocationDebugLayerId, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    HeatMapInitializerProvider,
-    {
-      features: staticFeatureSet,
-      layers: [layers[0]],
-      featureSets: animatedFeatureSets,
-      featureSetsLayers: layers.slice(1, 3),
-      heatMapColorProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MapboxHeatFlexBox, { accessToken, ...props })
-    }
-  ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_flexbox3.FlexCol, { minHeight: 160, minWidth: 160, busy: true });
-};
-
-// 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");
-
-// src/Components/Legend.tsx
-var import_material6 = require("@mui/material");
-var import_react_flexbox5 = require("@xylabs/react-flexbox");
-
-// src/Components/Legends/ColorGradient.tsx
-var import_material5 = require("@mui/material");
-var import_react_flexbox4 = require("@xylabs/react-flexbox");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var ColorGradientLegend = ({ startColor, endColor, startLabel, endLabel, heading, textColor, ...props }) => {
-  const theme = (0, import_material5.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_flexbox4.FlexCol, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material5.Typography, { mb: theme.spacing(0.25), color: textColor, variant: "caption", textAlign: "center", children: heading }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_flexbox4.FlexCol, { flexGrow: 1, alignItems: "stretch", paddingX: theme.spacing(1), mb: theme.spacing(0.25), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_react_flexbox4.FlexCol,
-      {
-        height: theme.spacing(0.75),
-        border: `1px solid ${textColor}`,
-        sx: { backgroundImage: `linear-gradient(to right, ${startColor},${endColor})` }
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_flexbox4.FlexRow, { flexGrow: 1, justifyContent: "space-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material5.Typography, { color: textColor, variant: "caption", children: startLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material5.Typography, { color: textColor, variant: "caption", children: endLabel })
-    ] })
-  ] });
-};
-
-// src/Components/Legend.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var AnimatedHeatMapLegend = ({ ...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__ */ (0, import_jsx_runtime11.jsx)(import_react_flexbox5.FlexCol, { position: "absolute", bottom: 0, right: 0, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    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)
-      }
-    }
-  ) });
-};
-
-// src/Components/AnimatedHeatMapLoaded.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var AnimatedHeatMapLoaded = ({ 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__ */ (0, import_jsx_runtime12.jsx)(AnimatedHeatMapLegend, { ...legendProps }) : null
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_flexbox6.FlexCol, { alignItems: "stretch", ...props, children: [
-    xyoError ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_material7.Alert, { sx: { mt: 2 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material7.AlertTitle, { children: "Error Loading Map" }),
-      xyoError.message ? `Error: ${xyoError.message}` : null,
-      "You might try authenticating again."
-    ] }) : null,
-    hashes === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material7.Alert, { children: "Missing answer hash for heat map query" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      AnimatedHeatMap,
-      {
-        accessToken,
-        defaultMapSettings: AnimatedHeatMapSettings,
-        animatedFeatureSets: multipleFeatureSets.slice(1, multipleFeatureSets.length),
-        staticFeatureSet: multipleFeatureSets[0],
-        heatMapColorProps,
-        ...MapBoxHeatProps
-      }
-    )
-  ] });
-};
-
-// 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_react17 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var timeIncrement = 2e3;
-var animatedLayerCount = 3;
-var LayerAnimator = ({ animateLayers, children, layers, layersInitialized, map }) => {
-  const [fillLayers, setFillLayers] = (0, import_react17.useState)([]);
-  const layerIndexQueue = (0, import_react17.useRef)([]);
-  const incrementQueue = (0, import_react17.useCallback)(
-    (index) => {
-      if (fillLayers[index]) {
-        layerIndexQueue.current.push(index);
-      } else {
-        layerIndexQueue.current.push(0);
-      }
-      return layerIndexQueue.current.at(-1);
-    },
-    [fillLayers]
-  );
-  const lastQueuedIndex = (0, import_react17.useCallback)(() => {
-    const last = layerIndexQueue.current.at(-1);
-    if (last === void 0) {
-      incrementQueue(0);
-      return 0;
-    } else {
-      return last;
-    }
-  }, [incrementQueue]);
-  const unshiftQueue = (0, import_react17.useCallback)(() => {
-    layerIndexQueue.current.shift();
-  }, []);
-  const getNextLayer = (0, import_react17.useCallback)(() => {
-    const nextLayer = fillLayers[lastQueuedIndex()];
-    incrementQueue(lastQueuedIndex() + 1);
-    return nextLayer;
-  }, [fillLayers, incrementQueue, lastQueuedIndex]);
-  const layerAnimateWorker = (0, import_react17.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_react17.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_react17.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_react17.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__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children });
-};
-
-// src/Components/MapBoxPoints.tsx
-var import_material8 = require("@mui/material");
-var import_react_flexbox7 = require("@xylabs/react-flexbox");
-var import_react18 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var MapboxPointsFlexBox = ({
-  accessToken,
-  features,
-  fitToPointsPadding = 20,
-  layers,
-  zoom,
-  ...props
-}) => {
-  const [mapPoints, setMapPoints] = (0, import_react18.useState)();
-  const { mapSettings } = useMapSettings();
-  const { map, mapInitialized } = useMapBoxInstance();
-  const customFitToBoundsOptions = (zoom2) => {
-    if (zoom2 !== void 0) {
-      return {
-        maxZoom: zoom2
-      };
-    }
-    return {};
-  };
-  const updateFeatures = (0, import_react18.useCallback)(() => {
-    if (mapPoints?.isMapReady && features?.length && layers)
-      for (const layer of layers) {
-        mapPoints.initializeMapSource(layer);
-      }
-  }, [mapPoints, features, layers]);
-  const updateMapSetup = (0, import_react18.useCallback)(() => {
-    const { fitToPoints: fitToPoints3 } = mapSettings || {};
-    if (mapPoints && map && fitToPoints3?.value === true) {
-      mapPoints.initialMapPositioning({ padding: fitToPointsPadding, ...customFitToBoundsOptions(zoom) });
-    }
-  }, [mapSettings, mapPoints, map, fitToPointsPadding, zoom]);
-  const reInitializeMap = (0, import_react18.useCallback)(() => {
-    mapPoints?.initialMapPositioning({ padding: fitToPointsPadding, ...customFitToBoundsOptions(zoom) });
-    updateFeatures();
-  }, [mapPoints, fitToPointsPadding, updateFeatures, zoom]);
-  (0, import_react18.useEffect)(() => {
-    if (map && features?.length) {
-      setMapPoints(new MapPoints({ features, map, zoom }));
-    }
-  }, [map, features, zoom]);
-  (0, import_react18.useEffect)(() => {
-    if (mapInitialized) {
-      updateMapSetup();
-      reInitializeMap();
-    }
-  }, [mapInitialized, reInitializeMap, updateMapSetup]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_flexbox7.FlexCol, { alignItems: "stretch", id: "xyo-mapbox-wrap", ...props, children: features ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MapBox, { accessToken, zoom }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MapSettingsBox, {})
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material8.Alert, { severity: "error", children: "No data to show" }) });
-};
-
-// 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
-);
+"use strict";var Me=Object.defineProperty;var $t=Object.getOwnPropertyDescriptor;var Qt=Object.getOwnPropertyNames;var Wt=Object.prototype.hasOwnProperty;var qt=(r,e)=>{for(var o in e)Me(r,o,{get:e[o],enumerable:!0})},Zt=(r,e,o,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of Qt(e))!Wt.call(r,a)&&a!==o&&Me(r,a,{get:()=>e[a],enumerable:!(t=$t(e,a))||t.enumerable});return r};var Ut=r=>Zt(Me({},"__esModule",{value:!0}),r);var bo={};qt(bo,{AnimatedHeatMap:()=>Ge,AnimatedHeatMapLegend:()=>ze,AnimatedHeatMapLoaded:()=>mo,AnimatedHeatMapSettings:()=>ee,CircleLayerBuilder:()=>K,ColorGradientLegend:()=>De,DefaultMapSettings:()=>z,FillLayerBuilder:()=>T,HeatMapFillLayerConfig:()=>W,HeatMapInitializerProvider:()=>ke,HeatMapLineLayerConfig:()=>Ae,HeatMapSettings:()=>At,HeatMapSymbolLayerConfig:()=>Be,LayerAnimator:()=>yo,LineLayerBuilder:()=>q,LocationHeatMapLayerBuilder:()=>co,LocationHeatMapLayerBuilderAnimated:()=>U,LocationPointLayerConfig:()=>Te,LocationPointsMapLayerBuilder:()=>po,MapBase:()=>A,MapBox:()=>X,MapBoxInstanceProvider:()=>ve,MapHeat:()=>F,MapHeatConstants:()=>ce,MapPoints:()=>_,MapPointsConstants:()=>xt,MapSettingSwitch:()=>Ne,MapSettings:()=>J,MapSettingsBox:()=>Y,MapSettingsProvider:()=>He,MapStyle:()=>bt,MapboxAccessTokenContext:()=>Q,MapboxAccessTokenProvider:()=>io,MapboxHeatFlexBox:()=>Oe,MapboxPointsFlexBox:()=>Lo,NetworkLocationAnswerSchema:()=>Ot,NetworkLocationHeatmapAnswerSchema:()=>Gt,NetworkLocationHeatmapQuadkeyAnswerSchema:()=>Dt,SymbolLayerBuilder:()=>Z,isNetworkLocationAnswer:()=>Mo,isNetworkLocationHeatmapAnswer:()=>ho,isNetworkLocationHeatmapQuadkeyAnswer:()=>xo,useDynamicMapResize:()=>he,useDynamicPositioning:()=>xe,useFindHashes:()=>be,useHeatMapColors:()=>Ce,useHeatMapInitializer:()=>no,useMapBoxInstance:()=>b,useMapSettings:()=>x,useMapboxAccessToken:()=>so,useQuadKeyPayloadsToFeatures:()=>Se});module.exports=Ut(bo);var z=()=>({debugLayer:{devMode:!0,field:"debugLayer",hidden:!0,label:"Debug Layer",value:!1},debugLogging:{devMode:!0,field:"debugLogging",hidden:!0,label:"Debug Logging",value:!1},dynamicMapResize:{devMode:!0,field:"dynamicMapResize",hidden:!0,label:"Auto Map Resize",value:!0},enableControls:{devMode:!0,field:"enableControls",hidden:!0,label:"Map Controls",value:!1},fitToPoints:{devMode:!0,field:"fitToPoints",hidden:!0,label:"Fit To Points",value:!1},preferDark:{devMode:!1,field:"preferDark",hidden:!0,label:"Prefer dark",value:!1},scrollToZoom:{devMode:!0,field:"scrollToZoom",hidden:!0,label:"Scroll To Zoom",value:!1}});var ee=z(),{debugLayer:Kt,scrollToZoom:Xt,fitToPoints:Yt,preferDark:Vt}=ee;Kt.hidden=!1;Xt.value=!0;Yt.value=!1;Vt.value=!0;var ue=require("@mui/material"),wt=require("@xylabs/react-flexbox"),vt=require("react");var ct=require("@xylabs/forget"),B=require("react");var k=require("react"),he=(r,e,o,t=!0)=>{let[a,n]=(0,k.useState)(!1),i=(0,k.useMemo)(()=>new ResizeObserver(()=>{let s=r.current?.getBoundingClientRect().width;s&&e.current&&(e.current.style.width=`${s}px`,setTimeout(()=>o?.resize()))}),[e,r,o]);(0,k.useEffect)(()=>{let s=!!(t&&o&&r?.current&&e.current);n(s)},[t,e,r,o]),(0,k.useEffect)(()=>{if(a)return r.current&&i.observe(r.current),()=>{i.disconnect()}},[t,a,e,r,o,i])};var $e=require("@xylabs/react-shared"),te=require("react"),jt=1.6,eo=[.5,2],to=[.9121644205263664,1.71785031559439],oo=[-81.4742014851959,12.788958675506933],Je=(r,e,o)=>{let[t,a]=e,[n,i]=o||eo,s=i-n,c=a-t;return(r-n)/s*c+t},xe=()=>{let[r,e]=(0,te.useState)({}),{width:o,height:t}=(0,$e.useWindowSize)();return(0,te.useEffect)(()=>{if(o&&t){let a=o/t;e({center:[Je(a,oo),Je(a,to)],zoom:jt})}},[t,o]),{options:r}};var Qe=require("@xyo-network/react-network"),We=require("react"),ro=["79af071f451fc7af10d009dc63236ef9a9b211732c1ee0c06f028fcecf2336c5","531bfba6d8dfefd3bcc888aca54cdbbd4574ed2b3ec551b230845a1f9a608898","c874412b4faa4947de81372fd1ba12fdd6f43f5e408622b7f357cb2bcb3f17cb","29d3f8b882c61a82a1a1675782a27e797ea7196f45a23b4409680ab8b8d5f14e","cfd20f80ac073fd9518f4ef3f43d2a1f5e4e56e40c2677f38d6f6fecd05df60c","1354fa73497519a39aed19fc99bdbae78a880a1eafb2f7898d607e07db36528d","1043b0d25eacfc5013ae9dba780305a6fbf01a43543bd871d7c00537fca142a9","973dfc5df142851ced258d52d0ac2784e814000ac22e35776f772256b0d4dde9","463808eb74d3d87e6563970e0301a493577f8cd1b501e6e0ffa5e027ad2cea95","15b21acea2e3fd9d1ace3768a72636ee7bdf67a6f8e0807bfa2273dea2207555","32d377bfe7ebe382598c54dd13f8af7510e0a1e2fd2e913311fdd58e517e5e2e,"],ao="c7bbf61f61cfd4a1b2def160c28136fc1d100d39fbdb67b227a2c6e558d9d3a5",be=()=>{let{network:r}=(0,Qe.useNetwork)(),e=r?.nodes?.find(n=>n.type==="archivist")?.explorerMapHashes,o=e?.animatedAnswerHashes||ro,t=e?.staticAnswerHash||ao;return(0,We.useMemo)(()=>[t,...o],[o,t])};var qe=require("@mui/material"),Ce=()=>{let r=(0,qe.useTheme)(),e="#FFFF75",o="#FF0000",t={highUsageColor:o,lowUsageColor:"#FFB3B3",staticMapColor:e},a={endColor:o,endLabel:"High",heading:"Network Usage",startColor:e,startLabel:"Low",textColor:r.palette.common.white};return{heatMapColorProps:t,legendProps:a}};var Ke=require("@xylabs/lodash"),Xe=require("@xyo-network/sdk-geo"),N=require("react"),Ze=({density:r,quadkey:e})=>{let o=new Xe.GeoJson(e).polygonFeature();return o.properties={count:r,density:r},o},Ue=r=>(r.properties&&(r.properties.value=r.properties.density/5),r),Se=r=>{let[e,o]=(0,N.useState)([[]]),[t,a]=(0,N.useState)([]),[n,i]=(0,N.useState)();return(0,N.useEffect)(()=>{if(Array.isArray(r))if((0,Ke.compact)(r).length>0){let s=r?.map(c=>c?.result.map(Ze));o(s.map(c=>c?.map(Ue)??[]))}else i(new Error("Cannot find payloads for provided hashes"));if(r&&r.result){let c=r.result.map(Ze);a(c.map(Ue))}},[r]),{error:n,features:t,multipleFeatureSets:e}};var Ye=require("@xylabs/assert"),Pe=require("@xyo-network/sdk-geo"),A=class{_config;constructor(e){this._config={requestLocation:!0,zoom:2,...e}}get isMapReady(){return!!this._config.map}initializeMapSource(e){let o=()=>{let n=Pe.GeoJson.featureCollection(this._config.features);return Pe.GeoJson.featuresSource(n)},t=this._config.map.getSource(e.source),a=o();return t?t.setData((0,Ye.assertEx)(a.data)):this._config.map.addSource(e.source,a),e.update(this._config.map,!0),this}};var Fe=require("@xylabs/assert"),oe=require("@xylabs/delay"),we=require("@xylabs/forget"),E=require("@xyo-network/sdk-geo"),Ve=require("mapbox-gl");var F=class extends A{static animationStarted=!1;config;constructor(e){super(e),this.config=e}static initialMapPositioning(e,o,t,a){if(!t)return;let n;return a?n=a:(n=new Ve.LngLatBounds,t.forEach(i=>{for(let s of i.geometry.coordinates)for(let c of s)n.extend(c)})),o.setCenter(n.getCenter()),o.fitBounds(n,e),this}static async initializeAnimatedHeatMapSource(e,o,t,a,n){this.animationStarted=!0;let i=0,s=0,c=o.map(y=>{let M=E.GeoJson.featureCollection(y);return E.GeoJson.featuresSource(M)});this.updateLayer(t,e[0],c[0]),this.updateLayer(t,e[1],c[1]);for(let y of e)t.setPaintProperty(y.id,"fill-opacity",0);let l=3e3,m=.5,g=10,p=30,u=l/p,d=a??"#FFB3B3",f=n??"#FF0000",H=(y,M,h)=>{let Le=Math.sin(h/p*Math.PI/2),Et=Math.cos(h/p*Math.PI/2),_t=y+y*Le,Jt=M*Et;return["let","density",["+",["/",["number",["get","value"]],_t],Jt],["interpolate",["linear"],["var","density"],0,d,.5,f]]},I=e.map(y=>!1),Rt=async(y,M)=>{for(let h=p;h>=1;h--)t.setPaintProperty(y,"fill-color",H(g,m,h*(180/u))),await(0,oe.delay)(u);I[M]=!0},zt=async(y,M)=>{for(let h=1;h<=p;h++)t.setPaintProperty(y,"fill-color",H(g,m,h*(180/u))),await(0,oe.delay)(u);I[M]=!1},_e=!1;await(async()=>{for((0,Fe.assertEx)(!_e,()=>"Animation Already Started"),_e=!0;this.animationStarted;){let y=i%e.length,M=(i+1)%e.length,h=s%o.length,Le=(s+1)%o.length;for(I[y]&&(this.updateLayer(t,e[y],c[h]),(0,we.forget)(zt(e[y].id,y))),I[M]||(this.updateLayer(t,e[M],c[Le]),(0,we.forget)(Rt(e[M].id,M)));(I[y]||!I[M])&&this.animationStarted;)await(0,oe.delay)(1e3);i++,s++}})()}static updateLayer(e,o,t){let a=e.getSource(o.source);a&&t.data?a.setData(t.data):t&&e.addSource(o.source,t),o.update(e,!0)}initializeHeatMapSource(e){let o=t=>{let a=E.GeoJson.featureCollection(this.config.features);return E.GeoJson.featuresSource(a)};for(let[t,a]of e.entries()){let n=this.config.map.getSource(a.source),i=o(t);n?n.setData((0,Fe.assertEx)(i.data)):this.config.map.addSource(a.source,i),a.update(this.config.map,!0)}return this}};var je=require("mapbox-gl");var _=class extends A{config;constructor(e){super(e),this.config=e}initialMapPositioning(e,o){let t;return o?t=o:(t=new je.LngLatBounds,this.config.features.forEach(a=>{t.extend(a.geometry.coordinates)})),this.config.map.setCenter(t.getCenter()),this.config.map.fitBounds(t,e),this.config.map}};var re=require("mapbox-gl"),J=class r{static geoLocateControl;static mapListeners={logData:(e,o)=>{let t=o||e?.target;t&&(console.log("zoom",t.getZoom()),console.log("center",t.getCenter()))}};static navControl;static requestLocation;static toggleControls(e,o,t,a){return e?r.addControls(o,t,a):r.removeControls(o),this}static toggleDebugLayer(e,o,t){return o.getLayer(t)&&(e?o.setLayoutProperty(t,"visibility","visible"):o.setLayoutProperty(t,"visibility","none")),this}static toggleDebugLogging(e,o){let t=["resize","zoomend","dragend"];if(e){this.mapListeners.logData(void 0,o);for(let a of t)o.on(a,this.mapListeners.logData)}else for(let a of t)o.off(a,this.mapListeners.logData)}static toggleScrollToZoom(e,o){return e?o.scrollZoom.enable():o.scrollZoom.disable(),this}static updateSettings(e){let{settings:o,map:t,zoom:a,requestLocation:n,debugLayerName:i=""}=e,{scrollToZoom:s,enableControls:c,debugLayer:l,debugLogging:m}=o;r.toggleControls(c?.value,t,a,n).toggleScrollToZoom(s?.value,t).toggleDebugLayer(l?.value,t,i).toggleDebugLogging(m.value,t)}static addControls(e,o,t){let a=new re.GeolocateControl({fitBoundsOptions:{zoom:o||2},positionOptions:{enableHighAccuracy:!0},trackUserLocation:!0}),n=new re.NavigationControl({showCompass:!1});return this.geoLocateControl=this.geoLocateControl||a,this.navControl=this.navControl||n,!e.hasControl(this.geoLocateControl)&&t&&e.addControl(this.geoLocateControl),e.hasControl(this.navControl)||e.addControl(this.navControl,"top-left"),this}static removeControls(e){return this.geoLocateControl&&e.hasControl(this.geoLocateControl)&&this.requestLocation&&e.removeControl(this.geoLocateControl),this.navControl&&e.hasControl(this.navControl)&&e.removeControl(this.navControl),this}};var $=require("react");var et=require("react"),ae=(0,et.createContext)({});var tt=require("react/jsx-runtime"),ve=({children:r})=>{let[e,o]=(0,$.useState)(),[t,a]=(0,$.useState)(!1),n={map:e,mapInitialized:t,setMapBoxInstance:o};return(0,$.useEffect)(()=>{!t&&e&&e?.on("load",()=>{a(!0)})},[e,t,a]),(0,tt.jsx)(ae.Provider,{value:n,children:r})};var ot=require("@xylabs/assert"),rt=require("react");var b=()=>{let r=(0,rt.useContext)(ae);return(0,ot.assertEx)("map"in r,()=>"useMapBoxInstance must be used within a MapBoxInstanceContext"),r};var ie=require("react");var at=require("react"),ne=(0,at.createContext)({});var nt=require("react/jsx-runtime"),He=({children:r,debugLayerName:e,defaultMapSettings:o,requestLocation:t,zoom:a=1})=>{let[n,i]=(0,ie.useState)(o||{}),{map:s,mapInitialized:c}=b(),l={mapSettings:n,setMapSettings:i};return(0,ie.useEffect)(()=>{n&&s&&c&&J.updateSettings({debugLayerName:e,map:s,requestLocation:t,settings:n,zoom:a})},[e,s,c,n,t,a]),(0,nt.jsx)(ne.Provider,{value:l,children:r})};var it=require("react");var x=()=>(0,it.useContext)(ne);var st=require("react"),se=(0,st.createContext)({});var lt=require("react/jsx-runtime"),ke=({children:r,featureSets:e,featureSetsLayers:o,features:t,fitToPadding:a,heatMapColorProps:n,layers:i,zoom:s})=>{let[c,l]=(0,B.useState)(),{options:m}=xe(),{mapSettings:g}=x(),{map:p,mapInitialized:u}=b(),d={MapHeat:c,heatMapColorProps:n};return(0,B.useEffect)(()=>{if(u&&e?.length&&e[0].length>0&&p&&o?.length){let{lowUsageColor:f,highUsageColor:H}=n;(0,ct.forget)(F.initializeAnimatedHeatMapSource(o,e,p,f,H))}return()=>{F.animationStarted=!1}},[e,o,u,p,n]),(0,B.useEffect)(()=>{c&&u&&t?.length&&i?.length&&c.initializeHeatMapSource(i)},[c,t?.length,i,u]),(0,B.useEffect)(()=>{if(u){let{fitToPoints:f}=g||{};p&&(f?.value===!0?F.initialMapPositioning({padding:a},p,t):m.zoom&&m.center&&(p.setZoom(m.zoom),p.setCenter(m.center)))}},[c,p,g,a,m,u,t]),(0,B.useEffect)(()=>{p&&t?.length&&l(new F({features:t,map:p,zoom:s}))},[p,t,s]),(0,lt.jsx)(se.Provider,{value:d,children:r})};var pt=require("@xylabs/assert"),mt=require("react");var no=()=>{let r=(0,mt.useContext)(se);return(0,pt.assertEx)("heatMapInitialized"in r,()=>"useHeatMapInitializer must be used within a HeatMapInitializerContext"),r};var ut=require("@xyo-network/react-shared"),Q=(0,ut.createContextEx)();var dt=require("react");var ft=require("react/jsx-runtime"),io=({defaultAccessToken:r,...e})=>{let[o,t]=(0,dt.useState)();return(0,ft.jsx)(Q.Provider,{value:{accessToken:o??r,provided:!0,setAccessToken:t},...e})};var gt=require("@xyo-network/react-shared");var so=(r=!1)=>(0,gt.useContextEx)(Q,"MapboxAccessToken",r);var W=r=>({paint:{"fill-color":r,"fill-opacity":["let","density",["+",["/",["number",["get","value"]],4],.125],["interpolate",["linear"],["var","density"],.8,["var","density"],1,.85]]}});var Ae=r=>({layout:{visibility:"none"},paint:{"line-color":r,"line-opacity":["let","density",0,["interpolate",["linear"],["var","density"],.8,["var","density"],1,.85]],"line-width":.5}});var Be=r=>({layout:{"text-anchor":"center","text-field":["concat","value: ",["to-string",["+",["/",["number",["get","value"]],2],.25]],`
+`,"count: ",["to-string",["get","count"]]],"text-size":10,visibility:"none"},paint:{"text-color":r}});var Te=(r,e,o)=>({paint:{"circle-color":r,"circle-opacity":o,"circle-radius":e}});var yt=require("@xyo-network/sdk-geo"),T=class extends yt.LayerBase{FillLayerOptions;type="fill";constructor(e,o,t){super(e,o),this.FillLayerOptions=t||{id:this.id,source:this.source}}buildLayer(){return{...this.FillLayerOptions,id:this.id,source:this.source,type:this.type}}};var Lt=require("@xyo-network/sdk-geo"),q=class extends Lt.LayerBase{LineLayerOptions;type="line";constructor(e,o,t){super(e,o),this.LineLayerOptions=t||{id:this.id,source:this.source}}buildLayer(){return{...this.LineLayerOptions,id:this.id,layout:{},source:this.source,type:this.type}}};var Mt=require("@xyo-network/sdk-geo"),Z=class extends Mt.LayerBase{SymbolLayerOptions;type="symbol";constructor(e,o,t){super(e,o),this.SymbolLayerOptions=t||{id:this.id,source:this.source}}buildLayer(){return{...this.SymbolLayerOptions,id:this.id,source:this.source,type:this.type}}};var ce={LocationDebugLayerId:"location-debug-id",LocationDebugLayerSource:"location-debug-source",LocationFillLayerId:"location-fill-id",LocationFillLayerSource:"location-fill-source",LocationLineLayerId:"location-line-id",LocationLineLayerSource:"location-line-source"},co=(r,e="#000")=>{let{LocationFillLayerId:o,LocationFillLayerSource:t,LocationLineLayerId:a,LocationLineLayerSource:n,LocationDebugLayerId:i,LocationDebugLayerSource:s}=ce,c=W(r),l=Ae(r),m=Be(e),g=new T(o,t,c),p=new q(a,n,l),u=new Z(i,s,m);return[g,p,u]};var lo=(r,e)=>({LocationDebugLayerId:`location-${e}-debug-id-${r}`,LocationDebugLayerSource:`location-${e}-debug-source-${r}`,LocationFillLayerId:`location-${e}-fill-id-${r}`,LocationFillLayerSource:`location-${e}-fill-source-${r}`,LocationLineLayerId:`location-${e}-line-id-${r}`,LocationLineLayerSource:`location-${e}-line-source-${r}`}),U=(r,e,o="")=>{let{LocationFillLayerId:t,LocationFillLayerSource:a}=lo(e,o),n=W(r);return new T(t,a,n)};var ht=require("@xyo-network/sdk-geo"),K=class extends ht.LayerBase{CircleLayerOptions;type="circle";constructor(e,o,t){super(e,o),this.CircleLayerOptions=t||{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}}};var xt={LocationDotsLayerId:"location-dots",LocationDotsLayerSource:"location-dots-source"},po=(r,e=6,o=.8)=>{let{LocationDotsLayerId:t,LocationDotsLayerSource:a}=xt,n=Te(r,e,o);return[new K(t,a,n)]};var Ft=require("@xylabs/react-flexbox");var $r=require("mapbox-gl/dist/mapbox-gl.css"),Ct=require("mapbox-gl"),w=require("react");var bt=(i=>(i.Dark="mapbox/dark-v10",i.Light="mapbox/light-v10",i.Outdoors="mapbox/outdoors-v11",i.Satellite="mapbox/satellite-v9",i.SatelliteStreets="mapbox/satellite-streets-v11",i.Streets="mapbox/streets-v11",i))(bt||{});var St=require("react/jsx-runtime"),X=({accessToken:r,darkMode:e=!1,options:o,zoom:t=2,...a})=>{let[n,i]=(0,w.useState)(),s=(0,w.useRef)(null),c=(0,w.useRef)(null),{setMapBoxInstance:l,map:m}=b(),{mapSettings:g}=x(),p=g?.dynamicMapResize.value;return he(s,c,m,p),(0,w.useEffect)(()=>{g?.preferDark?.value===!0?n?.setStyle("mapbox://styles/mapbox/dark-v10"):n?.setStyle(`mapbox://styles/${e?"mapbox/dark-v10":"mapbox/light-v10"}`)},[n,e,g]),(0,w.useEffect)(()=>{let u=new Ct.Map({accessToken:r,center:[0,0],container:s.current??"",style:"mapbox://styles/mapbox/light-v10",zoom:t,...o});return l?.(u),i(u),c.current=document.querySelector(".mapboxgl-canvas"),console.log("Created Map"),()=>{console.log("Removing Map"),u.remove()}},[s,i,o,t,l,r]),(0,St.jsx)("div",{ref:u=>s.current=u,style:{bottom:0,left:0,position:"absolute",right:0,top:0,...a}})};var le=require("@mui/material");var Ie=require("react/jsx-runtime"),Ne=({developerMode:r,field:e,...o})=>{let{mapSettings:t,setMapSettings:a}=x(),n=t?.[e],i=s=>{n&&a?.(c=>(c[n.field].value=s.target.checked,{...c}))};return n?.devMode&&r===!1||n?.hidden?null:(0,Ie.jsx)(le.FormControlLabel,{label:n?.label,control:(0,Ie.jsx)(le.Switch,{checked:n?.value,onChange:i,...o})})};var pe=require("@mui/material"),me=require("@xylabs/react-flexbox"),Pt=require("@xyo-network/react-app-settings");var O=require("react/jsx-runtime"),Y=({developerMode:r,...e})=>{let{mapSettings:o}=x(),{developerMode:t}=(0,Pt.useAppSettings)();return o&&(r??t)?(0,O.jsx)(me.FlexGrowRow,{bottom:36,left:10,position:"absolute",...e,children:(0,O.jsx)(me.FlexRow,{paddingX:2,children:(0,O.jsx)(pe.Paper,{children:(0,O.jsx)(pe.Stack,{direction:"row",spacing:1,marginX:1,children:Object.keys(o).map((n,i)=>(0,O.jsx)(Ne,{field:o[n].field,developerMode:r},i))})})})}):null};var V=require("react/jsx-runtime"),Oe=({accessToken:r,children:e,mapBoxOptions:o,zoom:t,legend:a,developerMode:n,...i})=>(0,V.jsxs)(Ft.FlexCol,{...i,children:[(0,V.jsx)(X,{accessToken:r,options:o,zoom:t}),(0,V.jsx)(Y,{developerMode:n}),a,e]});var G=require("react/jsx-runtime"),Ge=({accessToken:r,animatedFeatureSets:e,defaultMapSettings:o,heatMapColorProps:t,staticFeatureSet:a,...n})=>{let i=(0,ue.useTheme)(),{staticMapColor:s,lowUsageColor:c,highUsageColor:l}=t||{},m=s??i.palette.primary.light,[g]=(0,vt.useState)([U(m,0,"static"),U(c||m,0,"animated"),U(l||(0,ue.darken)(m,.9),1,"animated")]);return e?.length?(0,G.jsx)(ve,{children:(0,G.jsx)(He,{defaultMapSettings:o,debugLayerName:ce.LocationDebugLayerId,children:(0,G.jsx)(ke,{features:a,layers:[g[0]],featureSets:e,featureSetsLayers:g.slice(1,3),heatMapColorProps:t,children:(0,G.jsx)(Oe,{accessToken:r,...n})})})}):(0,G.jsx)(wt.FlexCol,{minHeight:160,minWidth:160,busy:!0})};var j=require("@mui/material"),kt=require("@xylabs/react-flexbox"),fe=require("@xyo-network/react-archivist");var de=require("@mui/material"),Ht=require("@xylabs/react-flexbox");var D=require("@mui/material"),R=require("@xylabs/react-flexbox"),C=require("react/jsx-runtime"),De=({startColor:r,endColor:e,startLabel:o,endLabel:t,heading:a,textColor:n,...i})=>{let s=(0,D.useTheme)();return(0,C.jsxs)(R.FlexCol,{...i,children:[(0,C.jsx)(D.Typography,{mb:s.spacing(.25),color:n,variant:"caption",textAlign:"center",children:a}),(0,C.jsx)(R.FlexCol,{flexGrow:1,alignItems:"stretch",paddingX:s.spacing(1),mb:s.spacing(.25),children:(0,C.jsx)(R.FlexCol,{height:s.spacing(.75),border:`1px solid ${n}`,sx:{backgroundImage:`linear-gradient(to right, ${r},${e})`}})}),(0,C.jsxs)(R.FlexRow,{flexGrow:1,justifyContent:"space-between",children:[(0,C.jsx)(D.Typography,{color:n,variant:"caption",children:o}),(0,C.jsx)(D.Typography,{color:n,variant:"caption",children:t})]})]})};var Re=require("react/jsx-runtime"),ze=({...r})=>{let{startColor:e,endColor:o,startLabel:t,endLabel:a,heading:n,textColor:i}=r,s=(0,de.useTheme)(),c=(0,de.useMediaQuery)(s.breakpoints.down("sm"));return(0,Re.jsx)(Ht.FlexCol,{position:"absolute",bottom:0,right:0,children:(0,Re.jsx)(De,{startColor:e,endColor:o,startLabel:t,endLabel:a,heading:n,textColor:i,alignItems:"stretch",marginBottom:s.spacing(4),marginLeft:c?s.spacing(3):0,marginRight:c?s.spacing(2):s.spacing(3),width:c?"40vw":s.spacing(18)})})};var v=require("react/jsx-runtime"),mo=({accessToken:r,archivistNameOrAddress:e,...o})=>{let t=be(),[a]=(0,fe.useWeakArchivistFromNode)(e),[n,i]=(0,fe.useWeakArchivistGet)(a,t),{multipleFeatureSets:s}=Se(n),{heatMapColorProps:c,legendProps:l}=Ce(),m={flexGrow:1,legend:l?(0,v.jsx)(ze,{...l}):null};return(0,v.jsxs)(kt.FlexCol,{alignItems:"stretch",...o,children:[i?(0,v.jsxs)(j.Alert,{sx:{mt:2},children:[(0,v.jsx)(j.AlertTitle,{children:"Error Loading Map"}),i.message?`Error: ${i.message}`:null,"You might try authenticating again."]}):null,t===void 0?(0,v.jsx)(j.Alert,{children:"Missing answer hash for heat map query"}):(0,v.jsx)(Ge,{accessToken:r,defaultMapSettings:ee,animatedFeatureSets:s.slice(1,s.length),staticFeatureSet:s[0],heatMapColorProps:c,...m})]})};var At=z(),{debugLayer:uo,scrollToZoom:fo,fitToPoints:go}=At;uo.hidden=!1;fo.value=!0;go.value=!0;var Tt=require("@xylabs/react-shared"),L=require("react"),ge=require("react/jsx-runtime"),Ee=2e3,Bt=3,yo=({animateLayers:r,children:e,layers:o,layersInitialized:t,map:a})=>{let[n,i]=(0,L.useState)([]),s=(0,L.useRef)([]),c=(0,L.useCallback)(d=>(n[d]?s.current.push(d):s.current.push(0),s.current.at(-1)),[n]),l=(0,L.useCallback)(()=>{let d=s.current.at(-1);return d===void 0?(c(0),0):d},[c]),m=(0,L.useCallback)(()=>{s.current.shift()},[]),g=(0,L.useCallback)(()=>{let d=n[l()];return c(l()+1),d},[n,c,l]),p=(0,L.useCallback)(d=>{d?(a?.setPaintProperty(d.id,"fill-opacity",.85),setTimeout(()=>{a?.setPaintProperty(d.id,"fill-opacity",0),m()},Ee*2)):console.warn("tried to queue an empty layer")},[a,m]);(0,L.useEffect)(()=>{o?.length&&a&&t&&i(o.filter(d=>{let f=d.id.startsWith("location-fill");return f&&a.setPaintProperty(d.id,"fill-opacity-transition",{delay:0,duration:4e3}),f}))},[o,t,a]);let u=(0,L.useCallback)(()=>{let d=[];for(let f=0;f<Bt;f++)d.push(g());for(let[f,H]of d.entries())f===0?p(H):setTimeout(()=>{p(H)},Ee*f)},[g,p]);return(0,L.useEffect)(()=>{r&&t&&a&&n.length>0&&u()},[r,n.length,t,a,u]),(0,Tt.useInterval)(()=>{r&&t&&a&&n.length>0&&u()},Ee*Bt),(0,ge.jsx)(ge.Fragment,{children:e})};var It=require("@mui/material"),Nt=require("@xylabs/react-flexbox"),P=require("react");var S=require("react/jsx-runtime"),Lo=({accessToken:r,features:e,fitToPointsPadding:o=20,layers:t,zoom:a,...n})=>{let[i,s]=(0,P.useState)(),{mapSettings:c}=x(),{map:l,mapInitialized:m}=b(),g=f=>f!==void 0?{maxZoom:f}:{},p=(0,P.useCallback)(()=>{if(i?.isMapReady&&e?.length&&t)for(let f of t)i.initializeMapSource(f)},[i,e,t]),u=(0,P.useCallback)(()=>{let{fitToPoints:f}=c||{};i&&l&&f?.value===!0&&i.initialMapPositioning({padding:o,...g(a)})},[c,i,l,o,a]),d=(0,P.useCallback)(()=>{i?.initialMapPositioning({padding:o,...g(a)}),p()},[i,o,p,a]);return(0,P.useEffect)(()=>{l&&e?.length&&s(new _({features:e,map:l,zoom:a}))},[l,e,a]),(0,P.useEffect)(()=>{m&&(u(),d())},[m,d,u]),(0,S.jsx)(Nt.FlexCol,{alignItems:"stretch",id:"xyo-mapbox-wrap",...n,children:e?(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(X,{accessToken:r,zoom:a}),(0,S.jsx)(Y,{})]}):(0,S.jsx)(It.Alert,{severity:"error",children:"No data to show"})})};var ye=require("@xyo-network/payload-model"),Ot="network.xyo.location.range.answer",Mo=(0,ye.isPayloadOfSchemaType)(Ot),Gt="network.xyo.location.heatmap.answer",ho=(0,ye.isPayloadOfSchemaType)(Gt),Dt="network.xyo.location.heatmap.quadkey.answer",xo=(0,ye.isPayloadOfSchemaType)(Dt);
 //# sourceMappingURL=index.cjs.map