@xyo-network/react-map 2.64.9 → 2.64.10

package/dist/browser/Components/index.js

@@ -1,1085 +0,0 @@
-// src/Components/AnimatedHeatMap.tsx
-import { darken, useTheme as useTheme2 } from "@mui/material";
-import { FlexCol as FlexCol2 } from "@xylabs/react-flexbox";
-import { useState as useState8 } from "react";
-
-// src/Contexts/HeatMapInitializer/Provider.tsx
-import { forget as forget2 } from "@xylabs/forget";
-import { useEffect as useEffect6, useState as useState6 } from "react";
-
-// src/hooks/useDynamicMapResize.tsx
-import { useEffect, useMemo, useState } from "react";
-var useDynamicMapResize = (mapContainerRef, mapCanvasRef, mapInstance, active = true) => {
-  const [dependenciesReady, setDependenciesReady] = useState(false);
-  const resizer = 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]
-  );
-  useEffect(() => {
-    const dependenciesReady2 = !!(active && mapInstance && mapContainerRef?.current && mapCanvasRef.current);
-    setDependenciesReady(dependenciesReady2);
-  }, [active, mapCanvasRef, mapContainerRef, mapInstance]);
-  useEffect(() => {
-    if (dependenciesReady) {
-      if (mapContainerRef.current) {
-        resizer.observe(mapContainerRef.current);
-      }
-      return () => {
-        resizer.disconnect();
-      };
-    }
-  }, [active, dependenciesReady, mapCanvasRef, mapContainerRef, mapInstance, resizer]);
-};
-
-// src/hooks/useDynamicPositioning.tsx
-import { useWindowSize } from "@xylabs/react-shared";
-import { useEffect as useEffect2, useState as useState2 } from "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] = useState2({});
-  const { width, height } = useWindowSize();
-  useEffect2(() => {
-    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
-import { useNetwork } from "@xyo-network/react-network";
-import { useMemo as useMemo2 } from "react";
-var animatedAnswerHashesConst = [
-  "79af071f451fc7af10d009dc63236ef9a9b211732c1ee0c06f028fcecf2336c5",
-  "531bfba6d8dfefd3bcc888aca54cdbbd4574ed2b3ec551b230845a1f9a608898",
-  "c874412b4faa4947de81372fd1ba12fdd6f43f5e408622b7f357cb2bcb3f17cb",
-  "29d3f8b882c61a82a1a1675782a27e797ea7196f45a23b4409680ab8b8d5f14e",
-  "cfd20f80ac073fd9518f4ef3f43d2a1f5e4e56e40c2677f38d6f6fecd05df60c",
-  "1354fa73497519a39aed19fc99bdbae78a880a1eafb2f7898d607e07db36528d",
-  "1043b0d25eacfc5013ae9dba780305a6fbf01a43543bd871d7c00537fca142a9",
-  "973dfc5df142851ced258d52d0ac2784e814000ac22e35776f772256b0d4dde9",
-  "463808eb74d3d87e6563970e0301a493577f8cd1b501e6e0ffa5e027ad2cea95",
-  "15b21acea2e3fd9d1ace3768a72636ee7bdf67a6f8e0807bfa2273dea2207555",
-  "32d377bfe7ebe382598c54dd13f8af7510e0a1e2fd2e913311fdd58e517e5e2e,"
-];
-var staticAnswerHashConst = "c7bbf61f61cfd4a1b2def160c28136fc1d100d39fbdb67b227a2c6e558d9d3a5";
-var useFindHashes = () => {
-  const { network } = useNetwork();
-  const exploreMapHashes = network?.nodes?.find((node) => node.type === "archivist")?.explorerMapHashes;
-  const animatedAnswerHashes = exploreMapHashes?.animatedAnswerHashes || animatedAnswerHashesConst;
-  const staticAnswerHash = exploreMapHashes?.staticAnswerHash || staticAnswerHashConst;
-  const foundHashes = useMemo2(() => [staticAnswerHash, ...animatedAnswerHashes], [animatedAnswerHashes, staticAnswerHash]);
-  return foundHashes;
-};
-
-// src/hooks/useHeatMapColors.tsx
-import { useTheme } from "@mui/material";
-var useHeatMapColors = () => {
-  const theme = 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
-import { compact } from "@xylabs/lodash";
-import { GeoJson } from "@xyo-network/sdk-geo";
-import { useEffect as useEffect3, useState as useState3 } from "react";
-var quadKeyToFeature = ({ density, quadkey }) => {
-  const polygonFeature = new 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] = useState3([[]]);
-  const [features, setFeatures] = useState3([]);
-  const [error, setError] = useState3();
-  useEffect3(() => {
-    if (Array.isArray(payloads)) {
-      if (compact(payloads).length !== 0) {
-        const payloadsArray = payloads;
-        const mappedFeatures = payloadsArray?.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
-import { assertEx } from "@xylabs/assert";
-import { GeoJson as GeoJson2 } from "@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 = GeoJson2.featureCollection(this._config.features);
-      return GeoJson2.featuresSource(featuresCollection);
-    };
-    const existingSource = this._config.map.getSource(layer.source);
-    const source = getSource();
-    if (existingSource) {
-      existingSource.setData(assertEx(source.data));
-    } else {
-      this._config.map.addSource(layer.source, source);
-    }
-    layer.update(this._config.map, true);
-    return this;
-  }
-};
-
-// src/MapBoxClasses/MapHeat.ts
-import { assertEx as assertEx2 } from "@xylabs/assert";
-import { delay } from "@xylabs/delay";
-import { forget } from "@xylabs/forget";
-import { GeoJson as GeoJson3 } from "@xyo-network/sdk-geo";
-import { LngLatBounds } from "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 LngLatBounds();
-      features.forEach((feature) => {
-        feature.geometry.coordinates.forEach((coordinates) => {
-          coordinates.forEach((position) => {
-            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 = GeoJson3.featureCollection(feature);
-      return GeoJson3.featuresSource(featuresCollection);
-    });
-    this.updateLayer(map, layers[0], sources[0]);
-    this.updateLayer(map, layers[1], sources[1]);
-    layers.forEach((layer) => {
-      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 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 delay(stepLength);
-      }
-      fadedIn[index] = false;
-    };
-    let started = false;
-    const startAnimation = async () => {
-      assertEx2(!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]);
-          forget(fadeOut(layers[upLayer].id, upLayer));
-        }
-        if (!fadedIn[downLayer]) {
-          this.updateLayer(map, layers[downLayer], sources[outgoingSource]);
-          forget(fadeIn(layers[downLayer].id, downLayer));
-        }
-        while ((fadedIn[upLayer] || !fadedIn[downLayer]) && this.animationStarted) {
-          await 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 = GeoJson3.featureCollection(this.config.features);
-      return GeoJson3.featuresSource(featuresCollection);
-    };
-    layers.forEach((layer, index) => {
-      const existingSource = this.config.map.getSource(layer.source);
-      const source = getSource(index);
-      if (existingSource) {
-        existingSource.setData(assertEx2(source.data));
-      } else {
-        this.config.map.addSource(layer.source, source);
-      }
-      layer.update(this.config.map, true);
-    });
-    return this;
-  }
-};
-
-// src/MapBoxClasses/MapPoints.ts
-import { LngLatBounds as LngLatBounds2 } from "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 LngLatBounds2();
-      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
-import { GeolocateControl, NavigationControl } from "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);
-      debugEvents.forEach((event) => map.on(event, this.mapListeners.logData));
-    } else {
-      debugEvents.forEach((event) => 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 GeolocateControl({
-      fitBoundsOptions: {
-        zoom: zoom || 2
-      },
-      positionOptions: {
-        enableHighAccuracy: true
-      },
-      trackUserLocation: true
-    });
-    const navControl = new NavigationControl({
-      showCompass: false
-    });
-    this.geoLocateControl = this.geoLocateControl || geolocateControl;
-    this.navControl = this.navControl || navControl;
-    if (!map.hasControl(this.geoLocateControl)) {
-      if (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)) {
-      if (this.requestLocation) {
-        map.removeControl(this.geoLocateControl);
-      }
-    }
-    if (this.navControl && map.hasControl(this.navControl)) {
-      map.removeControl(this.navControl);
-    }
-    return this;
-  }
-};
-
-// src/Contexts/MapBoxInstance/Provider.tsx
-import { useEffect as useEffect4, useState as useState4 } from "react";
-
-// src/Contexts/MapBoxInstance/Context.ts
-import { createContext } from "react";
-var MapBoxInstanceContext = createContext({});
-
-// src/Contexts/MapBoxInstance/Provider.tsx
-import { jsx } from "react/jsx-runtime";
-var MapBoxInstanceProvider = ({ children }) => {
-  const [map, setMapBoxInstance] = useState4();
-  const [mapInitialized, setMapInitialized] = useState4(false);
-  const value = { map, mapInitialized, setMapBoxInstance };
-  useEffect4(() => {
-    if (!mapInitialized && map) {
-      map?.on("load", () => {
-        setMapInitialized(true);
-      });
-    }
-  }, [map, mapInitialized, setMapInitialized]);
-  return /* @__PURE__ */ jsx(MapBoxInstanceContext.Provider, { value, children });
-};
-
-// src/Contexts/MapBoxInstance/useMapBoxInstance.tsx
-import { assertEx as assertEx3 } from "@xylabs/assert";
-import { useContext } from "react";
-var useMapBoxInstance = () => {
-  const context = useContext(MapBoxInstanceContext);
-  assertEx3("map" in context, "useMapBoxInstance must be used within a MapBoxInstanceContext");
-  return context;
-};
-
-// src/Contexts/MapSettings/Provider.tsx
-import { useEffect as useEffect5, useState as useState5 } from "react";
-
-// src/Contexts/MapSettings/Context.ts
-import { createContext as createContext2 } from "react";
-var MapSettingsContext = createContext2({});
-
-// src/Contexts/MapSettings/Provider.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var MapSettingsProvider = ({
-  children,
-  debugLayerName,
-  defaultMapSettings,
-  requestLocation,
-  zoom = 1
-}) => {
-  const [mapSettings, setMapSettings] = useState5(defaultMapSettings || {});
-  const { map, mapInitialized } = useMapBoxInstance();
-  const value = {
-    mapSettings,
-    setMapSettings
-  };
-  useEffect5(() => {
-    if (mapSettings && map && mapInitialized) {
-      MapSettings.updateSettings({ debugLayerName, map, requestLocation, settings: mapSettings, zoom });
-    }
-  }, [debugLayerName, map, mapInitialized, mapSettings, requestLocation, zoom]);
-  return /* @__PURE__ */ jsx2(MapSettingsContext.Provider, { value, children });
-};
-
-// src/Contexts/MapSettings/useMapSettings.tsx
-import { useContext as useContext2 } from "react";
-var useMapSettings = () => {
-  const context = useContext2(MapSettingsContext);
-  return context;
-};
-
-// src/Contexts/HeatMapInitializer/Context.ts
-import { createContext as createContext3 } from "react";
-var HeatMapInitializerContext = createContext3({});
-
-// src/Contexts/HeatMapInitializer/Provider.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var HeatMapInitializerProvider = ({
-  children,
-  featureSets,
-  featureSetsLayers,
-  features,
-  fitToPadding,
-  heatMapColorProps,
-  layers,
-  zoom
-}) => {
-  const [mapHeat, setMapHeat] = useState6();
-  const { options } = useDynamicPositioning();
-  const { mapSettings } = useMapSettings();
-  const { map, mapInitialized } = useMapBoxInstance();
-  const value = {
-    MapHeat: mapHeat,
-    heatMapColorProps
-  };
-  useEffect6(() => {
-    if (mapInitialized && featureSets?.length && featureSets[0].length && map && featureSetsLayers?.length) {
-      const { lowUsageColor, highUsageColor } = heatMapColorProps;
-      forget2(MapHeat.initializeAnimatedHeatMapSource(featureSetsLayers, featureSets, map, lowUsageColor, highUsageColor));
-    }
-    return () => {
-      MapHeat.animationStarted = false;
-    };
-  }, [featureSets, featureSetsLayers, mapInitialized, map, heatMapColorProps]);
-  useEffect6(() => {
-    if (mapHeat && mapInitialized && features?.length && layers?.length) {
-      mapHeat.initializeHeatMapSource(layers);
-    }
-  }, [mapHeat, features?.length, layers, mapInitialized]);
-  useEffect6(() => {
-    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]);
-  useEffect6(() => {
-    if (map && features?.length) {
-      setMapHeat(new MapHeat({ features, map, zoom }));
-    }
-  }, [map, features, zoom]);
-  return /* @__PURE__ */ jsx3(HeatMapInitializerContext.Provider, { value, children });
-};
-
-// 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/FillLayer.ts
-import { LayerBase } from "@xyo-network/sdk-geo";
-var FillLayerBuilder = class extends 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/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"
-};
-
-// 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/Components/MapBoxHeat.tsx
-import { FlexCol } from "@xylabs/react-flexbox";
-
-// src/Components/MapBox.tsx
-import "mapbox-gl/dist/mapbox-gl.css";
-import { Map as Map3 } from "mapbox-gl";
-import { useEffect as useEffect7, useRef, useState as useState7 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var MapBox = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {
-  const [map, setMap] = useState7();
-  const mapContainerRef = useRef(null);
-  const mapCanvasRef = useRef(null);
-  const { setMapBoxInstance, map: mapInstance } = useMapBoxInstance();
-  const { mapSettings } = useMapSettings();
-  const activeResize = mapSettings?.dynamicMapResize.value;
-  useDynamicMapResize(mapContainerRef, mapCanvasRef, mapInstance, activeResize);
-  useEffect7(() => {
-    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]);
-  useEffect7(() => {
-    const map2 = new Map3({
-      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__ */ jsx4(
-    "div",
-    {
-      ref: (el) => mapContainerRef.current = el,
-      style: {
-        bottom: 0,
-        left: 0,
-        position: "absolute",
-        right: 0,
-        top: 0,
-        ...props
-      }
-    }
-  );
-};
-
-// src/Components/MapSettingsComponents/Setting.tsx
-import { FormControlLabel, Switch } from "@mui/material";
-import { jsx as jsx5 } from "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__ */ jsx5(FormControlLabel, { label: setting?.label, control: /* @__PURE__ */ jsx5(Switch, { checked: setting?.value, onChange: onLocalChange, ...props }) });
-};
-
-// src/Components/MapSettingsComponents/SettingsBox.tsx
-import { Paper, Stack } from "@mui/material";
-import { FlexGrowRow, FlexRow } from "@xylabs/react-flexbox";
-import { useAppSettings } from "@xyo-network/react-app-settings";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var MapSettingsBox = ({ developerMode, ...props }) => {
-  const { mapSettings } = useMapSettings();
-  const { developerMode: devModeFromContext } = useAppSettings();
-  const resolveDeveloperMode = developerMode ?? devModeFromContext;
-  return mapSettings && resolveDeveloperMode ? /* @__PURE__ */ jsx6(FlexGrowRow, { bottom: 36, left: 10, position: "absolute", ...props, children: /* @__PURE__ */ jsx6(FlexRow, { paddingX: 2, children: /* @__PURE__ */ jsx6(Paper, { children: /* @__PURE__ */ jsx6(Stack, { direction: "row", spacing: 1, marginX: 1, children: Object.keys(mapSettings).map((key, index) => {
-    return /* @__PURE__ */ jsx6(MapSettingSwitch, { field: mapSettings[key].field, developerMode }, index);
-  }) }) }) }) }) : null;
-};
-
-// src/Components/MapBoxHeat.tsx
-import { jsx as jsx7, jsxs } from "react/jsx-runtime";
-var MapboxHeatFlexBox = ({ accessToken, children, mapBoxOptions, zoom, legend, developerMode, ...props }) => {
-  return /* @__PURE__ */ jsxs(FlexCol, { ...props, children: [
-    /* @__PURE__ */ jsx7(MapBox, { accessToken, options: mapBoxOptions, zoom }),
-    /* @__PURE__ */ jsx7(MapSettingsBox, { developerMode }),
-    legend,
-    children
-  ] });
-};
-
-// src/Components/AnimatedHeatMap.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-var AnimatedHeatMap = ({
-  accessToken,
-  animatedFeatureSets,
-  defaultMapSettings,
-  heatMapColorProps,
-  staticFeatureSet,
-  ...props
-}) => {
-  const theme = useTheme2();
-  const { staticMapColor, lowUsageColor, highUsageColor } = heatMapColorProps || {};
-  const localStaticMapColor = staticMapColor ?? theme.palette.primary.light;
-  const [layers] = useState8([
-    LocationHeatMapLayerBuilderAnimated(localStaticMapColor, 0, "static"),
-    LocationHeatMapLayerBuilderAnimated(lowUsageColor || localStaticMapColor, 0, "animated"),
-    LocationHeatMapLayerBuilderAnimated(highUsageColor || darken(localStaticMapColor, 0.9), 1, "animated")
-  ]);
-  return animatedFeatureSets?.length ? /* @__PURE__ */ jsx8(MapBoxInstanceProvider, { children: /* @__PURE__ */ jsx8(MapSettingsProvider, { defaultMapSettings, debugLayerName: MapHeatConstants.LocationDebugLayerId, children: /* @__PURE__ */ jsx8(
-    HeatMapInitializerProvider,
-    {
-      features: staticFeatureSet,
-      layers: [layers[0]],
-      featureSets: animatedFeatureSets,
-      featureSetsLayers: layers.slice(1, 3),
-      heatMapColorProps,
-      children: /* @__PURE__ */ jsx8(MapboxHeatFlexBox, { accessToken, ...props })
-    }
-  ) }) }) : /* @__PURE__ */ jsx8(FlexCol2, { minHeight: 160, minWidth: 160, busy: true });
-};
-
-// src/Components/AnimatedHeatMapLoaded.tsx
-import { Alert, AlertTitle } from "@mui/material";
-import { FlexCol as FlexCol5 } from "@xylabs/react-flexbox";
-import { useArchivistFromNode, useArchivistGet } from "@xyo-network/react-archivist";
-
-// 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/Legend.tsx
-import { useMediaQuery, useTheme as useTheme4 } from "@mui/material";
-import { FlexCol as FlexCol4 } from "@xylabs/react-flexbox";
-
-// src/Components/Legends/ColorGradient.tsx
-import { Typography, useTheme as useTheme3 } from "@mui/material";
-import { FlexCol as FlexCol3, FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
-import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
-var ColorGradientLegend = ({ startColor, endColor, startLabel, endLabel, heading, textColor, ...props }) => {
-  const theme = useTheme3();
-  return /* @__PURE__ */ jsxs2(FlexCol3, { ...props, children: [
-    /* @__PURE__ */ jsx9(Typography, { mb: theme.spacing(0.25), color: textColor, variant: "caption", textAlign: "center", children: heading }),
-    /* @__PURE__ */ jsx9(FlexCol3, { flexGrow: 1, alignItems: "stretch", paddingX: theme.spacing(1), mb: theme.spacing(0.25), children: /* @__PURE__ */ jsx9(
-      FlexCol3,
-      {
-        height: theme.spacing(0.75),
-        border: `1px solid ${textColor}`,
-        sx: { backgroundImage: `linear-gradient(to right, ${startColor},${endColor})` }
-      }
-    ) }),
-    /* @__PURE__ */ jsxs2(FlexRow2, { flexGrow: 1, justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsx9(Typography, { color: textColor, variant: "caption", children: startLabel }),
-      /* @__PURE__ */ jsx9(Typography, { color: textColor, variant: "caption", children: endLabel })
-    ] })
-  ] });
-};
-
-// src/Components/Legend.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-var AnimatedHeatMapLegend = ({ ...legendProps }) => {
-  const { startColor, endColor, startLabel, endLabel, heading, textColor } = legendProps;
-  const theme = useTheme4();
-  const isSmall = useMediaQuery(theme.breakpoints.down("sm"));
-  return /* @__PURE__ */ jsx10(FlexCol4, { position: "absolute", bottom: 0, right: 0, children: /* @__PURE__ */ jsx10(
-    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
-import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
-var AnimatedHeatMapLoaded = ({ accessToken, archivistNameOrAddress, ...props }) => {
-  const hashes = useFindHashes();
-  const [archivist] = useArchivistFromNode(archivistNameOrAddress);
-  const [payloads, xyoError] = useArchivistGet(archivist, hashes);
-  const { multipleFeatureSets } = useQuadKeyPayloadsToFeatures(payloads);
-  const { heatMapColorProps, legendProps } = useHeatMapColors();
-  const MapBoxHeatProps = {
-    flexGrow: 1,
-    legend: legendProps ? /* @__PURE__ */ jsx11(AnimatedHeatMapLegend, { ...legendProps }) : null
-  };
-  return /* @__PURE__ */ jsxs3(FlexCol5, { alignItems: "stretch", ...props, children: [
-    xyoError ? /* @__PURE__ */ jsxs3(Alert, { sx: { mt: 2 }, children: [
-      /* @__PURE__ */ jsx11(AlertTitle, { children: "Error Loading Map" }),
-      xyoError.message ? `Error: ${xyoError.message}` : null,
-      "You might try authenticating again."
-    ] }) : null,
-    hashes !== void 0 ? /* @__PURE__ */ jsx11(
-      AnimatedHeatMap,
-      {
-        accessToken,
-        defaultMapSettings: AnimatedHeatMapSettings,
-        animatedFeatureSets: multipleFeatureSets.slice(1, multipleFeatureSets.length),
-        staticFeatureSet: multipleFeatureSets[0],
-        heatMapColorProps,
-        ...MapBoxHeatProps
-      }
-    ) : /* @__PURE__ */ jsx11(Alert, { children: "Missing answer hash for heat map query" })
-  ] });
-};
-
-// 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
-import { useInterval } from "@xylabs/react-shared";
-import { useCallback, useEffect as useEffect8, useRef as useRef2, useState as useState9 } from "react";
-import { Fragment, jsx as jsx12 } from "react/jsx-runtime";
-var timeIncrement = 2e3;
-var animatedLayerCount = 3;
-var LayerAnimator = ({ animateLayers, children, layers, layersInitialized, map }) => {
-  const [fillLayers, setFillLayers] = useState9([]);
-  const layerIndexQueue = useRef2([]);
-  const incrementQueue = useCallback(
-    (index) => {
-      if (fillLayers[index]) {
-        layerIndexQueue.current.push(index);
-      } else {
-        layerIndexQueue.current.push(0);
-      }
-      return layerIndexQueue.current.at(-1);
-    },
-    [fillLayers]
-  );
-  const lastQueuedIndex = useCallback(() => {
-    const last = layerIndexQueue.current.at(-1);
-    if (last === void 0) {
-      incrementQueue(0);
-      return 0;
-    } else {
-      return last;
-    }
-  }, [incrementQueue]);
-  const unshiftQueue = useCallback(() => {
-    layerIndexQueue.current.shift();
-  }, []);
-  const getNextLayer = useCallback(() => {
-    const nextLayer = fillLayers[lastQueuedIndex()];
-    incrementQueue(lastQueuedIndex() + 1);
-    return nextLayer;
-  }, [fillLayers, incrementQueue, lastQueuedIndex]);
-  const layerAnimateWorker = 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]
-  );
-  useEffect8(() => {
-    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 = useCallback(() => {
-    const animatedLayers = [];
-    for (let i = 0; i < animatedLayerCount; i++) {
-      animatedLayers.push(getNextLayer());
-    }
-    animatedLayers.forEach((layer, index) => {
-      if (index === 0) {
-        layerAnimateWorker(layer);
-      } else {
-        setTimeout(() => {
-          layerAnimateWorker(layer);
-        }, timeIncrement * index);
-      }
-    });
-  }, [getNextLayer, layerAnimateWorker]);
-  useEffect8(() => {
-    if (animateLayers && layersInitialized && map && fillLayers.length) {
-      queueLayerAnimation();
-    }
-  }, [animateLayers, fillLayers.length, layersInitialized, map, queueLayerAnimation]);
-  useInterval(() => {
-    if (animateLayers && layersInitialized && map && fillLayers.length) {
-      queueLayerAnimation();
-    }
-  }, timeIncrement * animatedLayerCount);
-  return /* @__PURE__ */ jsx12(Fragment, { children });
-};
-
-// src/Components/MapBoxPoints.tsx
-import { Alert as Alert2 } from "@mui/material";
-import { FlexCol as FlexCol6 } from "@xylabs/react-flexbox";
-import { useCallback as useCallback2, useEffect as useEffect9, useState as useState10 } from "react";
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
-var MapboxPointsFlexBox = ({
-  accessToken,
-  features,
-  fitToPointsPadding = 20,
-  layers,
-  zoom,
-  ...props
-}) => {
-  const [mapPoints, setMapPoints] = useState10();
-  const { mapSettings } = useMapSettings();
-  const { map, mapInitialized } = useMapBoxInstance();
-  const customFitToBoundsOptions = (zoom2) => {
-    if (zoom2 !== void 0) {
-      return {
-        maxZoom: zoom2
-      };
-    }
-    return {};
-  };
-  const updateFeatures = useCallback2(() => {
-    if (mapPoints?.isMapReady && features?.length) {
-      layers?.forEach((layer) => {
-        mapPoints.initializeMapSource(layer);
-      });
-    }
-  }, [mapPoints, features, layers]);
-  const updateMapSetup = useCallback2(() => {
-    const { fitToPoints: fitToPoints3 } = mapSettings || {};
-    if (mapPoints && map) {
-      if (fitToPoints3?.value === true) {
-        mapPoints.initialMapPositioning({ padding: fitToPointsPadding, ...customFitToBoundsOptions(zoom) });
-      }
-    }
-  }, [mapSettings, mapPoints, map, fitToPointsPadding, zoom]);
-  const reInitializeMap = useCallback2(() => {
-    mapPoints?.initialMapPositioning({ padding: fitToPointsPadding, ...customFitToBoundsOptions(zoom) });
-    updateFeatures();
-  }, [mapPoints, fitToPointsPadding, updateFeatures, zoom]);
-  useEffect9(() => {
-    if (map && features?.length) {
-      setMapPoints(new MapPoints({ features, map, zoom }));
-    }
-  }, [map, features, zoom]);
-  useEffect9(() => {
-    if (mapInitialized) {
-      updateMapSetup();
-      reInitializeMap();
-    }
-  }, [mapInitialized, reInitializeMap, updateMapSetup]);
-  return /* @__PURE__ */ jsx13(FlexCol6, { alignItems: "stretch", id: "xyo-mapbox-wrap", ...props, children: features ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx13(MapBox, { accessToken, zoom }),
-    /* @__PURE__ */ jsx13(MapSettingsBox, {})
-  ] }) : /* @__PURE__ */ jsx13(Alert2, { severity: "error", children: "No data to show" }) });
-};
-export {
-  AnimatedHeatMap,
-  AnimatedHeatMapLegend,
-  AnimatedHeatMapLoaded,
-  ColorGradientLegend,
-  HeatMapSettings,
-  LayerAnimator,
-  MapBox,
-  MapSettingSwitch,
-  MapSettingsBox,
-  MapboxHeatFlexBox,
-  MapboxPointsFlexBox
-};
-//# sourceMappingURL=index.js.map