@xyo-network/react-map 2.81.10 → 2.82.0

package/dist/browser/index.cjs

@@ -1,8 +1,11 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -15,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -75,7 +86,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/Settings/DefaultMapSettings.ts
-var DefaultMapSettings = () => ({
+var DefaultMapSettings = /* @__PURE__ */ __name(() => ({
   debugLayer: {
     devMode: true,
     field: "debugLayer",
@@ -125,7 +136,7 @@ var DefaultMapSettings = () => ({
     label: "Scroll To Zoom",
     value: false
   }
-});
+}), "DefaultMapSettings");
 
 // src/AnimatedHeatMapSettings.ts
 var AnimatedHeatMapSettings = DefaultMapSettings();
@@ -138,30 +149,36 @@ 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");
+var import_react19 = __toESM(require("react"), 1);
 
 // src/Contexts/HeatMapInitializer/Provider.tsx
 var import_forget2 = require("@xylabs/forget");
-var import_react12 = require("react");
+var import_react12 = __toESM(require("react"), 1);
 
 // src/hooks/useDynamicMapResize.tsx
 var import_react = require("react");
-var useDynamicMapResize = (mapContainerRef, mapCanvasRef, mapInstance, active = true) => {
+var useDynamicMapResize = /* @__PURE__ */ __name((mapContainerRef, mapCanvasRef, mapInstance, active = true) => {
   const [dependenciesReady, setDependenciesReady] = (0, import_react.useState)(false);
-  const resizer = (0, import_react.useMemo)(
-    () => new ResizeObserver(() => {
-      const width = mapContainerRef.current?.getBoundingClientRect().width;
-      if (width && mapCanvasRef.current) {
-        mapCanvasRef.current.style.width = `${width}px`;
-        setTimeout(() => mapInstance?.resize());
-      }
-    }),
-    [mapCanvasRef, mapContainerRef, mapInstance]
-  );
+  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]);
+  }, [
+    active,
+    mapCanvasRef,
+    mapContainerRef,
+    mapInstance
+  ]);
   (0, import_react.useEffect)(() => {
     if (dependenciesReady) {
       if (mapContainerRef.current) {
@@ -171,17 +188,33 @@ var useDynamicMapResize = (mapContainerRef, mapCanvasRef, mapInstance, active =
         resizer.disconnect();
       };
     }
-  }, [active, dependenciesReady, mapCanvasRef, mapContainerRef, mapInstance, resizer]);
-};
+  }, [
+    active,
+    dependenciesReady,
+    mapCanvasRef,
+    mapContainerRef,
+    mapInstance,
+    resizer
+  ]);
+}, "useDynamicMapResize");
 
 // src/hooks/useDynamicPositioning.tsx
 var import_react_shared = require("@xylabs/react-shared");
 var import_react2 = require("react");
 var defaultZoom = 1.6;
-var defaultAspectRatioRange = [0.5, 2];
-var latRange = [0.9121644205263664, 1.71785031559439];
-var lngRange = [-81.4742014851959, 12.788958675506933];
-var linearInterpolate = (aspectRatio, degreeRange, aspectRatioRange) => {
+var defaultAspectRatioRange = [
+  0.5,
+  2
+];
+var latRange = [
+  0.9121644205263664,
+  1.71785031559439
+];
+var lngRange = [
+  -81.4742014851959,
+  12.788958675506933
+];
+var linearInterpolate = /* @__PURE__ */ __name((aspectRatio, degreeRange, aspectRatioRange) => {
   const [degreeMin, degreeMax] = degreeRange;
   const [aspectRatioMin, aspectRatioMax] = aspectRatioRange || defaultAspectRatioRange;
   const aspectRatioRangeSpan = aspectRatioMax - aspectRatioMin;
@@ -189,21 +222,29 @@ var linearInterpolate = (aspectRatio, degreeRange, aspectRatioRange) => {
   const percent = (aspectRatio - aspectRatioMin) / aspectRatioRangeSpan;
   const scaledDegree = percent * degreeRangeSpan + degreeMin;
   return scaledDegree;
-};
-var useDynamicPositioning = () => {
+}, "linearInterpolate");
+var useDynamicPositioning = /* @__PURE__ */ __name(() => {
   const [options, setOptions] = (0, import_react2.useState)({});
   const { width, height } = (0, import_react_shared.useWindowSize)();
   (0, import_react2.useEffect)(() => {
     if (width && height) {
       const aspectRatio = width / height;
       setOptions({
-        center: [linearInterpolate(aspectRatio, lngRange), linearInterpolate(aspectRatio, latRange)],
+        center: [
+          linearInterpolate(aspectRatio, lngRange),
+          linearInterpolate(aspectRatio, latRange)
+        ],
         zoom: defaultZoom
       });
     }
-  }, [height, width]);
-  return { options };
-};
+  }, [
+    height,
+    width
+  ]);
+  return {
+    options
+  };
+}, "useDynamicPositioning");
 
 // src/hooks/useFindHashes.tsx
 var import_react_network = require("@xyo-network/react-network");
@@ -222,18 +263,24 @@ var animatedAnswerHashesConst = [
   "32d377bfe7ebe382598c54dd13f8af7510e0a1e2fd2e913311fdd58e517e5e2e,"
 ];
 var staticAnswerHashConst = "c7bbf61f61cfd4a1b2def160c28136fc1d100d39fbdb67b227a2c6e558d9d3a5";
-var useFindHashes = () => {
+var useFindHashes = /* @__PURE__ */ __name(() => {
   const { network } = (0, import_react_network.useNetwork)();
   const exploreMapHashes = network?.nodes?.find((node) => node.type === "archivist")?.explorerMapHashes;
   const animatedAnswerHashes = exploreMapHashes?.animatedAnswerHashes || animatedAnswerHashesConst;
   const staticAnswerHash = exploreMapHashes?.staticAnswerHash || staticAnswerHashConst;
-  const foundHashes = (0, import_react3.useMemo)(() => [staticAnswerHash, ...animatedAnswerHashes], [animatedAnswerHashes, staticAnswerHash]);
+  const foundHashes = (0, import_react3.useMemo)(() => [
+    staticAnswerHash,
+    ...animatedAnswerHashes
+  ], [
+    animatedAnswerHashes,
+    staticAnswerHash
+  ]);
   return foundHashes;
-};
+}, "useFindHashes");
 
 // src/hooks/useHeatMapColors.tsx
 var import_material = require("@mui/material");
-var useHeatMapColors = () => {
+var useHeatMapColors = /* @__PURE__ */ __name(() => {
   const theme = (0, import_material.useTheme)();
   const staticMapColor = "#FFFF75";
   const highUsageColor = "#FF0000";
@@ -250,29 +297,34 @@ var useHeatMapColors = () => {
     startLabel: "Low",
     textColor: theme.palette.common.white
   };
-  return { heatMapColorProps, legendProps };
-};
+  return {
+    heatMapColorProps,
+    legendProps
+  };
+}, "useHeatMapColors");
 
 // src/hooks/useQuadKeyPayloadsToFeatures.tsx
 var import_lodash = require("@xylabs/lodash");
 var import_sdk_geo = require("@xyo-network/sdk-geo");
 var import_react4 = require("react");
-var quadKeyToFeature = ({ density, quadkey }) => {
+var quadKeyToFeature = /* @__PURE__ */ __name(({ density, quadkey }) => {
   const polygonFeature = new import_sdk_geo.GeoJson(quadkey).polygonFeature();
   polygonFeature.properties = {
     count: density,
     density
   };
   return polygonFeature;
-};
-var setDensity = (feature) => {
+}, "quadKeyToFeature");
+var setDensity = /* @__PURE__ */ __name((feature) => {
   if (feature.properties) {
     feature.properties.value = feature.properties.density / 5;
   }
   return feature;
-};
-var useQuadKeyPayloadsToFeatures = (payloads) => {
-  const [multipleFeatureSets, setMultipleFeatureSets] = (0, import_react4.useState)([[]]);
+}, "setDensity");
+var useQuadKeyPayloadsToFeatures = /* @__PURE__ */ __name((payloads) => {
+  const [multipleFeatureSets, setMultipleFeatureSets] = (0, import_react4.useState)([
+    []
+  ]);
   const [features, setFeatures] = (0, import_react4.useState)([]);
   const [error, setError] = (0, import_react4.useState)();
   (0, import_react4.useEffect)(() => {
@@ -289,26 +341,39 @@ var useQuadKeyPayloadsToFeatures = (payloads) => {
       const mappedFeatures = singlePayload.result.map(quadKeyToFeature);
       setFeatures(mappedFeatures.map(setDensity));
     }
-  }, [payloads]);
-  return { error, features, multipleFeatureSets };
-};
+  }, [
+    payloads
+  ]);
+  return {
+    error,
+    features,
+    multipleFeatureSets
+  };
+}, "useQuadKeyPayloadsToFeatures");
 
 // src/MapBoxClasses/MapBase.ts
 var import_assert = require("@xylabs/assert");
 var import_sdk_geo2 = require("@xyo-network/sdk-geo");
 var MapBase = class {
+  static {
+    __name(this, "MapBase");
+  }
   _config;
   constructor(config) {
-    this._config = { requestLocation: true, zoom: 2, ...config };
+    this._config = {
+      requestLocation: true,
+      zoom: 2,
+      ...config
+    };
   }
   get isMapReady() {
     return !!this._config.map;
   }
   initializeMapSource(layer) {
-    const getSource = () => {
+    const getSource = /* @__PURE__ */ __name(() => {
       const featuresCollection = import_sdk_geo2.GeoJson.featureCollection(this._config.features);
       return import_sdk_geo2.GeoJson.featuresSource(featuresCollection);
-    };
+    }, "getSource");
     const existingSource = this._config.map.getSource(layer.source);
     const source = getSource();
     if (existingSource) {
@@ -328,6 +393,9 @@ var import_forget = require("@xylabs/forget");
 var import_sdk_geo3 = require("@xyo-network/sdk-geo");
 var import_mapbox_gl = require("mapbox-gl");
 var MapHeat = class extends MapBase {
+  static {
+    __name(this, "MapHeat");
+  }
   static animationStarted = false;
   config;
   constructor(config) {
@@ -375,7 +443,7 @@ var MapHeat = class extends MapBase {
     const stepLength = frameLength / steps;
     const lowUsageColor = startColor ?? "#FFB3B3";
     const highUsageColor = endColor ?? "#FF0000";
-    const dynamicFillColor = (factor2, initialPad2, i) => {
+    const dynamicFillColor = /* @__PURE__ */ __name((factor2, initialPad2, i) => {
       const sinFade = Math.sin(i / steps * Math.PI / 2);
       const cosFade = Math.cos(i / steps * Math.PI / 2);
       const divisor = factor2 + factor2 * sinFade;
@@ -383,27 +451,54 @@ var MapHeat = class extends MapBase {
       return [
         "let",
         "density",
-        ["+", ["/", ["number", ["get", "value"]], divisor], offset],
-        ["interpolate", ["linear"], ["var", "density"], 0, lowUsageColor, 0.5, highUsageColor]
+        [
+          "+",
+          [
+            "/",
+            [
+              "number",
+              [
+                "get",
+                "value"
+              ]
+            ],
+            divisor
+          ],
+          offset
+        ],
+        [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "var",
+            "density"
+          ],
+          0,
+          lowUsageColor,
+          0.5,
+          highUsageColor
+        ]
       ];
-    };
+    }, "dynamicFillColor");
     const fadedIn = layers.map((_) => false);
-    const fadeIn = async (id, index) => {
+    const fadeIn = /* @__PURE__ */ __name(async (id, index) => {
       for (let i = steps; i >= 1; i--) {
         map.setPaintProperty(id, "fill-color", dynamicFillColor(factor, initialPad, i * (180 / stepLength)));
         await (0, import_delay.delay)(stepLength);
       }
       fadedIn[index] = true;
-    };
-    const fadeOut = async (id, index) => {
+    }, "fadeIn");
+    const fadeOut = /* @__PURE__ */ __name(async (id, index) => {
       for (let i = 1; i <= steps; i++) {
         map.setPaintProperty(id, "fill-color", dynamicFillColor(factor, initialPad, i * (180 / stepLength)));
         await (0, import_delay.delay)(stepLength);
       }
       fadedIn[index] = false;
-    };
+    }, "fadeOut");
     let started = false;
-    const startAnimation = async () => {
+    const startAnimation = /* @__PURE__ */ __name(async () => {
       (0, import_assert2.assertEx)(!started, () => "Animation Already Started");
       started = true;
       while (this.animationStarted) {
@@ -425,7 +520,7 @@ var MapHeat = class extends MapBase {
         layerTick++;
         sourceTick++;
       }
-    };
+    }, "startAnimation");
     await startAnimation();
   }
   static updateLayer(map, layer, source) {
@@ -439,10 +534,10 @@ var MapHeat = class extends MapBase {
   }
   // Build layers each with the same features
   initializeHeatMapSource(layers) {
-    const getSource = (_) => {
+    const getSource = /* @__PURE__ */ __name((_) => {
       const featuresCollection = import_sdk_geo3.GeoJson.featureCollection(this.config.features);
       return import_sdk_geo3.GeoJson.featuresSource(featuresCollection);
-    };
+    }, "getSource");
     for (const [index, layer] of layers.entries()) {
       const existingSource = this.config.map.getSource(layer.source);
       const source = getSource(index);
@@ -460,6 +555,9 @@ var MapHeat = class extends MapBase {
 // src/MapBoxClasses/MapPoints.ts
 var import_mapbox_gl2 = require("mapbox-gl");
 var MapPoints = class extends MapBase {
+  static {
+    __name(this, "MapPoints");
+  }
   config;
   constructor(config) {
     super(config);
@@ -484,15 +582,18 @@ var MapPoints = class extends MapBase {
 // src/MapBoxClasses/MapSettings.ts
 var import_mapbox_gl3 = require("mapbox-gl");
 var MapSettings = class _MapSettings {
+  static {
+    __name(this, "MapSettings");
+  }
   static geoLocateControl;
   static mapListeners = {
-    logData: (ev, map) => {
+    logData: /* @__PURE__ */ __name((ev, map) => {
       const target = map || ev?.target;
       if (target) {
         console.log("zoom", target.getZoom());
         console.log("center", target.getCenter());
       }
-    }
+    }, "logData")
   };
   static navControl;
   static requestLocation;
@@ -516,7 +617,11 @@ var MapSettings = class _MapSettings {
     return this;
   }
   static toggleDebugLogging(value, map) {
-    const debugEvents = ["resize", "zoomend", "dragend"];
+    const debugEvents = [
+      "resize",
+      "zoomend",
+      "dragend"
+    ];
     if (value) {
       this.mapListeners.logData(void 0, map);
       for (const event of debugEvents) map.on(event, this.mapListeners.logData);
@@ -573,98 +678,115 @@ var MapSettings = class _MapSettings {
 };
 
 // src/Contexts/MapBoxInstance/Provider.tsx
-var import_react6 = require("react");
+var import_react6 = __toESM(require("react"), 1);
 
 // src/Contexts/MapBoxInstance/Context.ts
 var import_react5 = require("react");
 var MapBoxInstanceContext = (0, import_react5.createContext)({});
 
 // src/Contexts/MapBoxInstance/Provider.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var MapBoxInstanceProvider = ({ children }) => {
+var MapBoxInstanceProvider = /* @__PURE__ */ __name(({ children }) => {
   const [map, setMapBoxInstance] = (0, import_react6.useState)();
   const [mapInitialized, setMapInitialized] = (0, import_react6.useState)(false);
-  const value = { map, mapInitialized, setMapBoxInstance };
+  const value = (0, import_react6.useMemo)(() => ({
+    map,
+    mapInitialized,
+    setMapBoxInstance
+  }), [
+    map,
+    mapInitialized,
+    setMapBoxInstance
+  ]);
   (0, import_react6.useEffect)(() => {
     if (!mapInitialized && map) {
       map?.on("load", () => {
         setMapInitialized(true);
       });
     }
-  }, [map, mapInitialized, setMapInitialized]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MapBoxInstanceContext.Provider, { value, children });
-};
+  }, [
+    map,
+    mapInitialized,
+    setMapInitialized
+  ]);
+  return /* @__PURE__ */ import_react6.default.createElement(MapBoxInstanceContext.Provider, {
+    value
+  }, children);
+}, "MapBoxInstanceProvider");
 
 // src/Contexts/MapBoxInstance/useMapBoxInstance.tsx
 var import_assert3 = require("@xylabs/assert");
 var import_react7 = require("react");
-var useMapBoxInstance = () => {
+var useMapBoxInstance = /* @__PURE__ */ __name(() => {
   const context = (0, import_react7.useContext)(MapBoxInstanceContext);
   (0, import_assert3.assertEx)("map" in context, () => "useMapBoxInstance must be used within a MapBoxInstanceContext");
   return context;
-};
+}, "useMapBoxInstance");
 
 // src/Contexts/MapSettings/Provider.tsx
-var import_react9 = require("react");
+var import_react9 = __toESM(require("react"), 1);
 
 // src/Contexts/MapSettings/Context.ts
 var import_react8 = require("react");
 var MapSettingsContext = (0, import_react8.createContext)({});
 
 // src/Contexts/MapSettings/Provider.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var MapSettingsProvider = ({
-  children,
-  debugLayerName,
-  defaultMapSettings,
-  requestLocation,
-  zoom = 1
-}) => {
+var MapSettingsProvider = /* @__PURE__ */ __name(({ children, debugLayerName, defaultMapSettings, requestLocation, zoom = 1 }) => {
   const [mapSettings, setMapSettings] = (0, import_react9.useState)(defaultMapSettings || {});
   const { map, mapInitialized } = useMapBoxInstance();
-  const value = {
+  const value = (0, import_react9.useMemo)(() => ({
     mapSettings,
     setMapSettings
-  };
+  }), [
+    mapSettings,
+    setMapSettings
+  ]);
   (0, import_react9.useEffect)(() => {
     if (mapSettings && map && mapInitialized) {
-      MapSettings.updateSettings({ debugLayerName, map, requestLocation, settings: mapSettings, zoom });
+      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 });
-};
+  }, [
+    debugLayerName,
+    map,
+    mapInitialized,
+    mapSettings,
+    requestLocation,
+    zoom
+  ]);
+  return /* @__PURE__ */ import_react9.default.createElement(MapSettingsContext.Provider, {
+    value
+  }, children);
+}, "MapSettingsProvider");
 
 // src/Contexts/MapSettings/useMapSettings.tsx
 var import_react10 = require("react");
-var useMapSettings = () => {
+var useMapSettings = /* @__PURE__ */ __name(() => {
   const context = (0, import_react10.useContext)(MapSettingsContext);
   return context;
-};
+}, "useMapSettings");
 
 // src/Contexts/HeatMapInitializer/Context.ts
 var import_react11 = require("react");
 var HeatMapInitializerContext = (0, import_react11.createContext)({});
 
 // src/Contexts/HeatMapInitializer/Provider.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var HeatMapInitializerProvider = ({
-  children,
-  featureSets,
-  featureSetsLayers,
-  features,
-  fitToPadding,
-  heatMapColorProps,
-  layers,
-  zoom
-}) => {
+var HeatMapInitializerProvider = /* @__PURE__ */ __name(({ children, featureSets, featureSetsLayers, features, fitToPadding, heatMapColorProps, layers, zoom }) => {
   const [mapHeat, setMapHeat] = (0, import_react12.useState)();
   const { options } = useDynamicPositioning();
   const { mapSettings } = useMapSettings();
   const { map, mapInitialized } = useMapBoxInstance();
-  const value = {
+  const value = (0, import_react12.useMemo)(() => ({
     MapHeat: mapHeat,
     heatMapColorProps
-  };
+  }), [
+    mapHeat,
+    heatMapColorProps
+  ]);
   (0, import_react12.useEffect)(() => {
     if (mapInitialized && featureSets?.length && featureSets[0].length > 0 && map && featureSetsLayers?.length) {
       const { lowUsageColor, highUsageColor } = heatMapColorProps;
@@ -673,112 +795,224 @@ var HeatMapInitializerProvider = ({
     return () => {
       MapHeat.animationStarted = false;
     };
-  }, [featureSets, featureSetsLayers, mapInitialized, map, heatMapColorProps]);
+  }, [
+    featureSets,
+    featureSetsLayers,
+    mapInitialized,
+    map,
+    heatMapColorProps
+  ]);
   (0, import_react12.useEffect)(() => {
     if (mapHeat && mapInitialized && features?.length && layers?.length) {
       mapHeat.initializeHeatMapSource(layers);
     }
-  }, [mapHeat, features?.length, layers, mapInitialized]);
+  }, [
+    mapHeat,
+    features?.length,
+    layers,
+    mapInitialized
+  ]);
   (0, import_react12.useEffect)(() => {
     if (mapInitialized) {
       const { fitToPoints: fitToPoints3 } = mapSettings || {};
       if (map) {
         if (fitToPoints3?.value === true) {
-          MapHeat.initialMapPositioning(
-            { padding: { bottom: fitToPadding, left: fitToPadding, right: fitToPadding, top: fitToPadding } },
-            map,
-            features
-          );
+          MapHeat.initialMapPositioning({
+            padding: {
+              bottom: fitToPadding,
+              left: fitToPadding,
+              right: fitToPadding,
+              top: fitToPadding
+            }
+          }, map, features);
         } else if (options.zoom && options.center) {
           map.setZoom(options.zoom);
           map.setCenter(options.center);
         }
       }
     }
-  }, [mapHeat, map, mapSettings, fitToPadding, options, mapInitialized, features]);
+  }, [
+    mapHeat,
+    map,
+    mapSettings,
+    fitToPadding,
+    options,
+    mapInitialized,
+    features
+  ]);
   (0, import_react12.useEffect)(() => {
     if (map && features?.length) {
-      setMapHeat(new MapHeat({ features, map, zoom }));
+      setMapHeat(new MapHeat({
+        features,
+        map,
+        zoom
+      }));
     }
-  }, [map, features, zoom]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HeatMapInitializerContext.Provider, { value, children });
-};
+  }, [
+    map,
+    features,
+    zoom
+  ]);
+  return /* @__PURE__ */ import_react12.default.createElement(HeatMapInitializerContext.Provider, {
+    value
+  }, children);
+}, "HeatMapInitializerProvider");
 
 // src/Contexts/HeatMapInitializer/useHeatMapInitializer.tsx
 var import_assert4 = require("@xylabs/assert");
 var import_react13 = require("react");
-var useHeatMapInitializer = () => {
+var useHeatMapInitializer = /* @__PURE__ */ __name(() => {
   const context = (0, import_react13.useContext)(HeatMapInitializerContext);
   (0, import_assert4.assertEx)("heatMapInitialized" in context, () => "useHeatMapInitializer must be used within a HeatMapInitializerContext");
   return context;
-};
+}, "useHeatMapInitializer");
 
 // src/Contexts/MapboxAccessToken/Context.ts
 var import_react_shared2 = require("@xyo-network/react-shared");
 var MapboxAccessTokenContext = (0, import_react_shared2.createContextEx)();
 
 // src/Contexts/MapboxAccessToken/Provider.tsx
-var import_react14 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var MapboxAccessTokenProvider = ({ defaultAccessToken, ...props }) => {
+var import_react14 = __toESM(require("react"), 1);
+var MapboxAccessTokenProvider = /* @__PURE__ */ __name(({ 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 });
-};
+  return /* @__PURE__ */ import_react14.default.createElement(MapboxAccessTokenContext.Provider, {
+    value: {
+      accessToken: accessToken ?? defaultAccessToken,
+      provided: true,
+      setAccessToken
+    },
+    ...props
+  });
+}, "MapboxAccessTokenProvider");
 
 // src/Contexts/MapboxAccessToken/use.ts
 var import_react_shared3 = require("@xyo-network/react-shared");
-var useMapboxAccessToken = (required = false) => {
+var useMapboxAccessToken = /* @__PURE__ */ __name((required = false) => {
   return (0, import_react_shared3.useContextEx)(MapboxAccessTokenContext, "MapboxAccessToken", required);
-};
+}, "useMapboxAccessToken");
 
 // src/Layers/Configs/HeatMapFillLayerConfig.ts
-var HeatMapFillLayerConfig = (color) => ({
+var HeatMapFillLayerConfig = /* @__PURE__ */ __name((color) => ({
   paint: {
     "fill-color": color,
     "fill-opacity": [
       "let",
       "density",
-      ["+", ["/", ["number", ["get", "value"]], 4], 0.125],
-      ["interpolate", ["linear"], ["var", "density"], 0.8, ["var", "density"], 1, 0.85]
+      [
+        "+",
+        [
+          "/",
+          [
+            "number",
+            [
+              "get",
+              "value"
+            ]
+          ],
+          4
+        ],
+        0.125
+      ],
+      [
+        "interpolate",
+        [
+          "linear"
+        ],
+        [
+          "var",
+          "density"
+        ],
+        0.8,
+        [
+          "var",
+          "density"
+        ],
+        1,
+        0.85
+      ]
     ]
   }
-});
+}), "HeatMapFillLayerConfig");
 
 // src/Layers/Configs/HeatMapLineLayerConfig.ts
-var HeatMapLineLayerConfig = (color) => ({
+var HeatMapLineLayerConfig = /* @__PURE__ */ __name((color) => ({
   layout: {
     // Enable for debugging
     visibility: "none"
   },
   paint: {
     "line-color": color,
-    "line-opacity": ["let", "density", 0, ["interpolate", ["linear"], ["var", "density"], 0.8, ["var", "density"], 1, 0.85]],
+    "line-opacity": [
+      "let",
+      "density",
+      0,
+      [
+        "interpolate",
+        [
+          "linear"
+        ],
+        [
+          "var",
+          "density"
+        ],
+        0.8,
+        [
+          "var",
+          "density"
+        ],
+        1,
+        0.85
+      ]
+    ],
     "line-width": 0.5
   }
-});
+}), "HeatMapLineLayerConfig");
 
 // src/Layers/Configs/HeatMapSymbolLayerConfig.ts
-var HeatMapSymbolLayerConfig = (color) => ({
+var HeatMapSymbolLayerConfig = /* @__PURE__ */ __name((color) => ({
   layout: {
     "text-anchor": "center",
     "text-field": [
       "concat",
       "value: ",
-      ["to-string", ["+", ["/", ["number", ["get", "value"]], 2], 0.25]],
+      [
+        "to-string",
+        [
+          "+",
+          [
+            "/",
+            [
+              "number",
+              [
+                "get",
+                "value"
+              ]
+            ],
+            2
+          ],
+          0.25
+        ]
+      ],
       "\n",
       "count: ",
-      ["to-string", ["get", "count"]]
+      [
+        "to-string",
+        [
+          "get",
+          "count"
+        ]
+      ]
     ],
     "text-size": 10,
-    visibility: "none"
+    "visibility": "none"
   },
   paint: {
     "text-color": color
   }
-});
+}), "HeatMapSymbolLayerConfig");
 
 // src/Layers/Configs/LocationPointLayerConfig.ts
-var LocationPointLayerConfig = (color, circleRadius, circleOpacity) => {
+var LocationPointLayerConfig = /* @__PURE__ */ __name((color, circleRadius, circleOpacity) => {
   return {
     paint: {
       "circle-color": color,
@@ -786,17 +1020,23 @@ var LocationPointLayerConfig = (color, circleRadius, circleOpacity) => {
       "circle-radius": circleRadius
     }
   };
-};
+}, "LocationPointLayerConfig");
 
 // src/Layers/FillLayer.ts
 var import_sdk_geo4 = require("@xyo-network/sdk-geo");
 var FillLayerBuilder = class extends import_sdk_geo4.LayerBase {
+  static {
+    __name(this, "FillLayerBuilder");
+  }
   FillLayerOptions;
   // ensures this class passes for `AnyLayer` type in MapBox
   type = "fill";
   constructor(id, source, FillLayerOptions) {
     super(id, source);
-    this.FillLayerOptions = FillLayerOptions || { id: this.id, source: this.source };
+    this.FillLayerOptions = FillLayerOptions || {
+      id: this.id,
+      source: this.source
+    };
   }
   buildLayer() {
     return {
@@ -811,12 +1051,18 @@ var FillLayerBuilder = class extends import_sdk_geo4.LayerBase {
 // src/Layers/LineLayer.ts
 var import_sdk_geo5 = require("@xyo-network/sdk-geo");
 var LineLayerBuilder = class extends import_sdk_geo5.LayerBase {
+  static {
+    __name(this, "LineLayerBuilder");
+  }
   LineLayerOptions;
   // ensures this class passes for `AnyLayer` type in MapBox
   type = "line";
   constructor(id, source, LineLayerOptions) {
     super(id, source);
-    this.LineLayerOptions = LineLayerOptions || { id: this.id, source: this.source };
+    this.LineLayerOptions = LineLayerOptions || {
+      id: this.id,
+      source: this.source
+    };
   }
   buildLayer() {
     return {
@@ -832,12 +1078,18 @@ var LineLayerBuilder = class extends import_sdk_geo5.LayerBase {
 // src/Layers/SymbolLayer.ts
 var import_sdk_geo6 = require("@xyo-network/sdk-geo");
 var SymbolLayerBuilder = class extends import_sdk_geo6.LayerBase {
+  static {
+    __name(this, "SymbolLayerBuilder");
+  }
   SymbolLayerOptions;
   // ensures this class passes for `AnyLayer` type in MapBox
   type = "symbol";
   constructor(id, source, SymbolLayerOptions) {
     super(id, source);
-    this.SymbolLayerOptions = SymbolLayerOptions || { id: this.id, source: this.source };
+    this.SymbolLayerOptions = SymbolLayerOptions || {
+      id: this.id,
+      source: this.source
+    };
   }
   buildLayer() {
     return {
@@ -858,53 +1110,61 @@ var MapHeatConstants = {
   LocationLineLayerId: "location-line-id",
   LocationLineLayerSource: "location-line-source"
 };
-var LocationHeatMapLayerBuilder = (color, alternateColor = "#000") => {
-  const {
-    LocationFillLayerId,
-    LocationFillLayerSource,
-    LocationLineLayerId,
-    LocationLineLayerSource,
-    LocationDebugLayerId,
-    LocationDebugLayerSource
-  } = MapHeatConstants;
+var LocationHeatMapLayerBuilder = /* @__PURE__ */ __name((color, alternateColor = "#000") => {
+  const { LocationFillLayerId, LocationFillLayerSource, LocationLineLayerId, LocationLineLayerSource, LocationDebugLayerId, LocationDebugLayerSource } = MapHeatConstants;
   const fillLayerConfig = HeatMapFillLayerConfig(color);
   const lineLayerConfig = HeatMapLineLayerConfig(color);
   const debugLayerConfig = HeatMapSymbolLayerConfig(alternateColor);
   const fillLayer = new FillLayerBuilder(LocationFillLayerId, LocationFillLayerSource, fillLayerConfig);
   const lineLayer = new LineLayerBuilder(LocationLineLayerId, LocationLineLayerSource, lineLayerConfig);
   const debugLayer3 = new SymbolLayerBuilder(LocationDebugLayerId, LocationDebugLayerSource, debugLayerConfig);
-  return [fillLayer, lineLayer, debugLayer3];
-};
+  return [
+    fillLayer,
+    lineLayer,
+    debugLayer3
+  ];
+}, "LocationHeatMapLayerBuilder");
 
 // src/Layers/Builders/LocationHeatMapLayerBuilderAnimated.ts
-var MapHeatConstants2 = (index, type) => ({
+var MapHeatConstants2 = /* @__PURE__ */ __name((index, type) => ({
   LocationDebugLayerId: `location-${type}-debug-id-${index}`,
   LocationDebugLayerSource: `location-${type}-debug-source-${index}`,
   LocationFillLayerId: `location-${type}-fill-id-${index}`,
   LocationFillLayerSource: `location-${type}-fill-source-${index}`,
   LocationLineLayerId: `location-${type}-line-id-${index}`,
   LocationLineLayerSource: `location-${type}-line-source-${index}`
-});
-var LocationHeatMapLayerBuilderAnimated = (color, index, type = "") => {
+}), "MapHeatConstants");
+var LocationHeatMapLayerBuilderAnimated = /* @__PURE__ */ __name((color, index, type = "") => {
   const { LocationFillLayerId, LocationFillLayerSource } = MapHeatConstants2(index, type);
   const fillLayerConfig = HeatMapFillLayerConfig(color);
   const fillLayer = new FillLayerBuilder(LocationFillLayerId, LocationFillLayerSource, fillLayerConfig);
   return fillLayer;
-};
+}, "LocationHeatMapLayerBuilderAnimated");
 
 // src/Layers/CircleLayer.ts
 var import_sdk_geo7 = require("@xyo-network/sdk-geo");
 var CircleLayerBuilder = class extends import_sdk_geo7.LayerBase {
+  static {
+    __name(this, "CircleLayerBuilder");
+  }
   CircleLayerOptions;
   // ensures this class passes for `AnyLayer` type in MapBox
   type = "circle";
   constructor(id, source, CircleLayerOptions) {
     super(id, source);
-    this.CircleLayerOptions = CircleLayerOptions || { id: this.id, source: this.source, type: "circle" };
+    this.CircleLayerOptions = CircleLayerOptions || {
+      id: this.id,
+      source: this.source,
+      type: "circle"
+    };
   }
   buildLayer() {
     return {
-      filter: ["==", "$type", "Point"],
+      filter: [
+        "==",
+        "$type",
+        "Point"
+      ],
       layout: {},
       paint: {
         "circle-color": "#ff0000",
@@ -923,35 +1183,37 @@ var MapPointsConstants = {
   LocationDotsLayerId: "location-dots",
   LocationDotsLayerSource: "location-dots-source"
 };
-var LocationPointsMapLayerBuilder = (color, circleRadius = 6, circleOpacity = 0.8) => {
+var LocationPointsMapLayerBuilder = /* @__PURE__ */ __name((color, circleRadius = 6, circleOpacity = 0.8) => {
   const { LocationDotsLayerId, LocationDotsLayerSource } = MapPointsConstants;
   const dotLayerConfig = LocationPointLayerConfig(color, circleRadius, circleOpacity);
   const dotLayer = new CircleLayerBuilder(LocationDotsLayerId, LocationDotsLayerSource, dotLayerConfig);
-  return [dotLayer];
-};
+  return [
+    dotLayer
+  ];
+}, "LocationPointsMapLayerBuilder");
 
 // src/Components/MapBoxHeat.tsx
 var import_react_flexbox2 = require("@xylabs/react-flexbox");
+var import_react18 = __toESM(require("react"), 1);
 
 // src/Components/MapBox.tsx
 var import_mapbox_gl4 = require("mapbox-gl/dist/mapbox-gl.css");
 var import_mapbox_gl5 = require("mapbox-gl");
-var import_react15 = require("react");
+var import_react15 = __toESM(require("react"), 1);
 
 // src/lib/MapStyle.ts
-var MapStyle = /* @__PURE__ */ ((MapStyle2) => {
+var MapStyle;
+(function(MapStyle2) {
   MapStyle2["Dark"] = "mapbox/dark-v10";
   MapStyle2["Light"] = "mapbox/light-v10";
   MapStyle2["Outdoors"] = "mapbox/outdoors-v11";
   MapStyle2["Satellite"] = "mapbox/satellite-v9";
   MapStyle2["SatelliteStreets"] = "mapbox/satellite-streets-v11";
   MapStyle2["Streets"] = "mapbox/streets-v11";
-  return MapStyle2;
-})(MapStyle || {});
+})(MapStyle || (MapStyle = {}));
 
 // src/Components/MapBox.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var MapBox = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {
+var MapBox = /* @__PURE__ */ __name(({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {
   const [map, setMap] = (0, import_react15.useState)();
   const mapContainerRef = (0, import_react15.useRef)(null);
   const mapCanvasRef = (0, import_react15.useRef)(null);
@@ -961,17 +1223,24 @@ var MapBox = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) =>
   useDynamicMapResize(mapContainerRef, mapCanvasRef, mapInstance, activeResize);
   (0, import_react15.useEffect)(() => {
     if (mapSettings?.preferDark?.value === true) {
-      map?.setStyle(`mapbox://styles/${"mapbox/dark-v10" /* Dark */}`);
+      map?.setStyle(`mapbox://styles/${MapStyle.Dark}`);
     } else {
-      map?.setStyle(`mapbox://styles/${darkMode ? "mapbox/dark-v10" /* Dark */ : "mapbox/light-v10" /* Light */}`);
+      map?.setStyle(`mapbox://styles/${darkMode ? MapStyle.Dark : MapStyle.Light}`);
     }
-  }, [map, darkMode, mapSettings]);
+  }, [
+    map,
+    darkMode,
+    mapSettings
+  ]);
   (0, import_react15.useEffect)(() => {
     const map2 = new import_mapbox_gl5.Map({
       accessToken,
-      center: [0, 0],
+      center: [
+        0,
+        0
+      ],
       container: mapContainerRef.current ?? "",
-      style: `mapbox://styles/${"mapbox/light-v10" /* Light */}`,
+      style: `mapbox://styles/${MapStyle.Light}`,
       zoom,
       ...options
     });
@@ -983,160 +1252,198 @@ var MapBox = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) =>
       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
-      }
+  }, [
+    mapContainerRef,
+    setMap,
+    options,
+    zoom,
+    setMapBoxInstance,
+    accessToken
+  ]);
+  return /* @__PURE__ */ import_react15.default.createElement("div", {
+    ref: /* @__PURE__ */ __name((el) => mapContainerRef.current = el, "ref"),
+    style: {
+      bottom: 0,
+      left: 0,
+      position: "absolute",
+      right: 0,
+      top: 0,
+      ...props
     }
-  );
-};
+  });
+}, "MapBox");
 
 // src/Components/MapSettingsComponents/Setting.tsx
 var import_material2 = require("@mui/material");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var MapSettingSwitch = ({ developerMode, field, ...props }) => {
+var import_react16 = __toESM(require("react"), 1);
+var MapSettingSwitch = /* @__PURE__ */ __name(({ developerMode, field, ...props }) => {
   const { mapSettings, setMapSettings } = useMapSettings();
   const setting = mapSettings?.[field];
-  const onLocalChange = (event) => {
+  const onLocalChange = /* @__PURE__ */ __name((event) => {
     if (setting) {
       setMapSettings?.((previous) => {
         previous[setting.field].value = event.target.checked;
-        return { ...previous };
+        return {
+          ...previous
+        };
       });
     }
-  };
+  }, "onLocalChange");
   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 }) });
-};
+  return setting?.hidden ? null : /* @__PURE__ */ import_react16.default.createElement(import_material2.FormControlLabel, {
+    label: setting?.label,
+    control: /* @__PURE__ */ import_react16.default.createElement(import_material2.Switch, {
+      checked: setting?.value,
+      onChange: onLocalChange,
+      ...props
+    })
+  });
+}, "MapSettingSwitch");
 
 // src/Components/MapSettingsComponents/SettingsBox.tsx
 var import_material3 = require("@mui/material");
 var import_react_flexbox = require("@xylabs/react-flexbox");
 var import_react_app_settings = require("@xyo-network/react-app-settings");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var MapSettingsBox = ({ developerMode, ...props }) => {
+var import_react17 = __toESM(require("react"), 1);
+var MapSettingsBox = /* @__PURE__ */ __name(({ developerMode, ...props }) => {
   const { mapSettings } = useMapSettings();
   const { developerMode: devModeFromContext } = (0, import_react_app_settings.useAppSettings)();
   const resolveDeveloperMode = developerMode ?? devModeFromContext;
-  return mapSettings && resolveDeveloperMode ? /* @__PURE__ */ (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;
-};
+  return mapSettings && resolveDeveloperMode ? /* @__PURE__ */ import_react17.default.createElement(import_react_flexbox.FlexGrowRow, {
+    bottom: 36,
+    left: 10,
+    position: "absolute",
+    ...props
+  }, /* @__PURE__ */ import_react17.default.createElement(import_react_flexbox.FlexRow, {
+    paddingX: 2
+  }, /* @__PURE__ */ import_react17.default.createElement(import_material3.Paper, null, /* @__PURE__ */ import_react17.default.createElement(import_material3.Stack, {
+    direction: "row",
+    spacing: 1,
+    marginX: 1
+  }, Object.keys(mapSettings).map((key, index) => {
+    return /* @__PURE__ */ import_react17.default.createElement(MapSettingSwitch, {
+      key: index,
+      field: mapSettings[key].field,
+      developerMode
+    });
+  }))))) : null;
+}, "MapSettingsBox");
 
 // src/Components/MapBoxHeat.tsx
-var 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
-  ] });
-};
+var MapboxHeatFlexBox = /* @__PURE__ */ __name(({ accessToken, children, mapBoxOptions, zoom, legend, developerMode, ...props }) => {
+  return /* @__PURE__ */ import_react18.default.createElement(import_react_flexbox2.FlexCol, props, /* @__PURE__ */ import_react18.default.createElement(MapBox, {
+    accessToken,
+    options: mapBoxOptions,
+    zoom
+  }), /* @__PURE__ */ import_react18.default.createElement(MapSettingsBox, {
+    developerMode
+  }), legend, children);
+}, "MapboxHeatFlexBox");
 
 // src/Components/AnimatedHeatMap.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var AnimatedHeatMap = ({
-  accessToken,
-  animatedFeatureSets,
-  defaultMapSettings,
-  heatMapColorProps,
-  staticFeatureSet,
-  ...props
-}) => {
+var AnimatedHeatMap = /* @__PURE__ */ __name(({ accessToken, animatedFeatureSets, defaultMapSettings, heatMapColorProps, staticFeatureSet, ...props }) => {
   const theme = (0, import_material4.useTheme)();
   const { staticMapColor, lowUsageColor, highUsageColor } = heatMapColorProps || {};
   const localStaticMapColor = staticMapColor ?? theme.palette.primary.light;
-  const [layers] = (0, import_react16.useState)([
+  const [layers] = (0, import_react19.useState)([
     LocationHeatMapLayerBuilderAnimated(localStaticMapColor, 0, "static"),
     LocationHeatMapLayerBuilderAnimated(lowUsageColor || localStaticMapColor, 0, "animated"),
     LocationHeatMapLayerBuilderAnimated(highUsageColor || (0, import_material4.darken)(localStaticMapColor, 0.9), 1, "animated")
   ]);
-  return animatedFeatureSets?.length ? /* @__PURE__ */ (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 });
-};
+  return animatedFeatureSets?.length ? /* @__PURE__ */ import_react19.default.createElement(MapBoxInstanceProvider, null, /* @__PURE__ */ import_react19.default.createElement(MapSettingsProvider, {
+    defaultMapSettings,
+    debugLayerName: MapHeatConstants.LocationDebugLayerId
+  }, /* @__PURE__ */ import_react19.default.createElement(HeatMapInitializerProvider, {
+    features: staticFeatureSet,
+    layers: [
+      layers[0]
+    ],
+    featureSets: animatedFeatureSets,
+    featureSetsLayers: layers.slice(1, 3),
+    heatMapColorProps
+  }, /* @__PURE__ */ import_react19.default.createElement(MapboxHeatFlexBox, {
+    accessToken,
+    ...props
+  })))) : /* @__PURE__ */ import_react19.default.createElement(import_react_flexbox3.FlexCol, {
+    minHeight: 160,
+    minWidth: 160,
+    busy: true
+  });
+}, "AnimatedHeatMap");
 
 // src/Components/AnimatedHeatMapLoaded.tsx
 var import_material7 = require("@mui/material");
 var import_react_flexbox6 = require("@xylabs/react-flexbox");
 var import_react_archivist = require("@xyo-network/react-archivist");
+var import_react22 = __toESM(require("react"), 1);
 
 // src/Components/Legend.tsx
 var import_material6 = require("@mui/material");
 var import_react_flexbox5 = require("@xylabs/react-flexbox");
+var import_react21 = __toESM(require("react"), 1);
 
 // src/Components/Legends/ColorGradient.tsx
 var import_material5 = require("@mui/material");
 var import_react_flexbox4 = require("@xylabs/react-flexbox");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var ColorGradientLegend = ({ startColor, endColor, startLabel, endLabel, heading, textColor, ...props }) => {
+var import_react20 = __toESM(require("react"), 1);
+var ColorGradientLegend = /* @__PURE__ */ __name(({ startColor, endColor, startLabel, endLabel, heading, textColor, ...props }) => {
   const theme = (0, import_material5.useTheme)();
-  return /* @__PURE__ */ (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 })
-    ] })
-  ] });
-};
+  return /* @__PURE__ */ import_react20.default.createElement(import_react_flexbox4.FlexCol, props, /* @__PURE__ */ import_react20.default.createElement(import_material5.Typography, {
+    mb: theme.spacing(0.25),
+    color: textColor,
+    variant: "caption",
+    textAlign: "center"
+  }, heading), /* @__PURE__ */ import_react20.default.createElement(import_react_flexbox4.FlexCol, {
+    flexGrow: 1,
+    alignItems: "stretch",
+    paddingX: theme.spacing(1),
+    mb: theme.spacing(0.25)
+  }, /* @__PURE__ */ import_react20.default.createElement(import_react_flexbox4.FlexCol, {
+    height: theme.spacing(0.75),
+    border: `1px solid ${textColor}`,
+    sx: {
+      backgroundImage: `linear-gradient(to right, ${startColor},${endColor})`
+    }
+  })), /* @__PURE__ */ import_react20.default.createElement(import_react_flexbox4.FlexRow, {
+    flexGrow: 1,
+    justifyContent: "space-between"
+  }, /* @__PURE__ */ import_react20.default.createElement(import_material5.Typography, {
+    color: textColor,
+    variant: "caption"
+  }, startLabel), /* @__PURE__ */ import_react20.default.createElement(import_material5.Typography, {
+    color: textColor,
+    variant: "caption"
+  }, endLabel)));
+}, "ColorGradientLegend");
 
 // src/Components/Legend.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var AnimatedHeatMapLegend = ({ ...legendProps }) => {
+var AnimatedHeatMapLegend = /* @__PURE__ */ __name(({ ...legendProps }) => {
   const { startColor, endColor, startLabel, endLabel, heading, textColor } = legendProps;
   const theme = (0, import_material6.useTheme)();
   const isSmall = (0, import_material6.useMediaQuery)(theme.breakpoints.down("sm"));
-  return /* @__PURE__ */ (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)
-      }
-    }
-  ) });
-};
+  return /* @__PURE__ */ import_react21.default.createElement(import_react_flexbox5.FlexCol, {
+    position: "absolute",
+    bottom: 0,
+    right: 0
+  }, /* @__PURE__ */ import_react21.default.createElement(ColorGradientLegend, {
+    startColor,
+    endColor,
+    startLabel,
+    endLabel,
+    heading,
+    textColor,
+    alignItems: "stretch",
+    marginBottom: theme.spacing(4),
+    marginLeft: isSmall ? theme.spacing(3) : 0,
+    marginRight: isSmall ? theme.spacing(2) : theme.spacing(3),
+    width: isSmall ? "40vw" : theme.spacing(18)
+  }));
+}, "AnimatedHeatMapLegend");
 
 // src/Components/AnimatedHeatMapLoaded.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var AnimatedHeatMapLoaded = ({ accessToken, archivistNameOrAddress, ...props }) => {
+var AnimatedHeatMapLoaded = /* @__PURE__ */ __name(({ accessToken, archivistNameOrAddress, ...props }) => {
   const hashes = useFindHashes();
   const [archivist] = (0, import_react_archivist.useWeakArchivistFromNode)(archivistNameOrAddress);
   const [payloads, xyoError] = (0, import_react_archivist.useWeakArchivistGet)(archivist, hashes);
@@ -1144,27 +1451,24 @@ var AnimatedHeatMapLoaded = ({ accessToken, archivistNameOrAddress, ...props })
   const { heatMapColorProps, legendProps } = useHeatMapColors();
   const MapBoxHeatProps = {
     flexGrow: 1,
-    legend: legendProps ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AnimatedHeatMapLegend, { ...legendProps }) : null
+    legend: legendProps ? /* @__PURE__ */ import_react22.default.createElement(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
-      }
-    )
-  ] });
-};
+  return /* @__PURE__ */ import_react22.default.createElement(import_react_flexbox6.FlexCol, {
+    alignItems: "stretch",
+    ...props
+  }, xyoError ? /* @__PURE__ */ import_react22.default.createElement(import_material7.Alert, {
+    sx: {
+      mt: 2
+    }
+  }, /* @__PURE__ */ import_react22.default.createElement(import_material7.AlertTitle, null, "Error Loading Map"), xyoError.message ? `Error: ${xyoError.message}` : null, "You might try authenticating again.") : null, hashes === void 0 ? /* @__PURE__ */ import_react22.default.createElement(import_material7.Alert, null, "Missing answer hash for heat map query") : /* @__PURE__ */ import_react22.default.createElement(AnimatedHeatMap, {
+    accessToken,
+    defaultMapSettings: AnimatedHeatMapSettings,
+    animatedFeatureSets: multipleFeatureSets.slice(1),
+    staticFeatureSet: multipleFeatureSets[0],
+    heatMapColorProps,
+    ...MapBoxHeatProps
+  }));
+}, "AnimatedHeatMapLoaded");
 
 // src/Components/HeatMapSettings.ts
 var HeatMapSettings = DefaultMapSettings();
@@ -1175,25 +1479,23 @@ 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 import_react23 = __toESM(require("react"), 1);
 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)(() => {
+var LayerAnimator = /* @__PURE__ */ __name(({ animateLayers, children, layers, layersInitialized, map }) => {
+  const [fillLayers, setFillLayers] = (0, import_react23.useState)([]);
+  const layerIndexQueue = (0, import_react23.useRef)([]);
+  const incrementQueue = (0, import_react23.useCallback)((index) => {
+    if (fillLayers[index]) {
+      layerIndexQueue.current.push(index);
+    } else {
+      layerIndexQueue.current.push(0);
+    }
+    return layerIndexQueue.current.at(-1);
+  }, [
+    fillLayers
+  ]);
+  const lastQueuedIndex = (0, import_react23.useCallback)(() => {
     const last = layerIndexQueue.current.at(-1);
     if (last === void 0) {
       incrementQueue(0);
@@ -1201,43 +1503,54 @@ var LayerAnimator = ({ animateLayers, children, layers, layersInitialized, map }
     } else {
       return last;
     }
-  }, [incrementQueue]);
-  const unshiftQueue = (0, import_react17.useCallback)(() => {
+  }, [
+    incrementQueue
+  ]);
+  const unshiftQueue = (0, import_react23.useCallback)(() => {
     layerIndexQueue.current.shift();
   }, []);
-  const getNextLayer = (0, import_react17.useCallback)(() => {
+  const getNextLayer = (0, import_react23.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)(() => {
+  }, [
+    fillLayers,
+    incrementQueue,
+    lastQueuedIndex
+  ]);
+  const layerAnimateWorker = (0, import_react23.useCallback)((layer) => {
+    if (layer) {
+      map?.setPaintProperty(layer.id, "fill-opacity", 0.85);
+      setTimeout(() => {
+        map?.setPaintProperty(layer.id, "fill-opacity", 0);
+        unshiftQueue();
+      }, timeIncrement * 2);
+    } else {
+      console.warn("tried to queue an empty layer");
+    }
+  }, [
+    map,
+    unshiftQueue
+  ]);
+  (0, import_react23.useEffect)(() => {
     if (layers?.length && map && layersInitialized) {
-      setFillLayers(
-        layers.filter((layer) => {
-          const fillLayer = layer.id.startsWith("location-fill");
-          if (fillLayer) {
-            map.setPaintProperty(layer.id, "fill-opacity-transition", { delay: 0, duration: 4e3 });
-          }
-          return fillLayer;
-        })
-      );
+      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)(() => {
+  }, [
+    layers,
+    layersInitialized,
+    map
+  ]);
+  const queueLayerAnimation = (0, import_react23.useCallback)(() => {
     const animatedLayers = [];
     for (let i = 0; i < animatedLayerCount; i++) {
       animatedLayers.push(getNextLayer());
@@ -1251,82 +1564,125 @@ var LayerAnimator = ({ animateLayers, children, layers, layersInitialized, map }
         }, timeIncrement * index);
       }
     }
-  }, [getNextLayer, layerAnimateWorker]);
-  (0, import_react17.useEffect)(() => {
+  }, [
+    getNextLayer,
+    layerAnimateWorker
+  ]);
+  (0, import_react23.useEffect)(() => {
     if (animateLayers && layersInitialized && map && fillLayers.length > 0) {
       queueLayerAnimation();
     }
-  }, [animateLayers, fillLayers.length, layersInitialized, map, 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 });
-};
+  return /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, children);
+}, "LayerAnimator");
 
 // src/Components/MapBoxPoints.tsx
 var import_material8 = require("@mui/material");
 var import_react_flexbox7 = require("@xylabs/react-flexbox");
-var import_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)();
+var import_react24 = __toESM(require("react"), 1);
+var MapboxPointsFlexBox = /* @__PURE__ */ __name(({ accessToken, features, fitToPointsPadding = 20, layers, zoom, ...props }) => {
+  const [mapPoints, setMapPoints] = (0, import_react24.useState)();
   const { mapSettings } = useMapSettings();
   const { map, mapInitialized } = useMapBoxInstance();
-  const customFitToBoundsOptions = (zoom2) => {
+  const customFitToBoundsOptions = /* @__PURE__ */ __name((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)(() => {
+  }, "customFitToBoundsOptions");
+  const updateFeatures = (0, import_react24.useCallback)(() => {
+    if (mapPoints?.isMapReady && features?.length && layers) for (const layer of layers) {
+      mapPoints.initializeMapSource(layer);
+    }
+  }, [
+    mapPoints,
+    features,
+    layers
+  ]);
+  const updateMapSetup = (0, import_react24.useCallback)(() => {
     const { fitToPoints: fitToPoints3 } = mapSettings || {};
     if (mapPoints && map && fitToPoints3?.value === true) {
       mapPoints.initialMapPositioning({
-        padding: { bottom: fitToPointsPadding, left: fitToPointsPadding, right: fitToPointsPadding, top: fitToPointsPadding },
+        padding: {
+          bottom: fitToPointsPadding,
+          left: fitToPointsPadding,
+          right: fitToPointsPadding,
+          top: fitToPointsPadding
+        },
         ...customFitToBoundsOptions(zoom)
       });
     }
-  }, [mapSettings, mapPoints, map, fitToPointsPadding, zoom]);
-  const reInitializeMap = (0, import_react18.useCallback)(() => {
+  }, [
+    mapSettings,
+    mapPoints,
+    map,
+    fitToPointsPadding,
+    zoom
+  ]);
+  const reInitializeMap = (0, import_react24.useCallback)(() => {
     mapPoints?.initialMapPositioning({
-      padding: { bottom: fitToPointsPadding, left: fitToPointsPadding, right: fitToPointsPadding, top: fitToPointsPadding },
+      padding: {
+        bottom: fitToPointsPadding,
+        left: fitToPointsPadding,
+        right: fitToPointsPadding,
+        top: fitToPointsPadding
+      },
       ...customFitToBoundsOptions(zoom)
     });
     updateFeatures();
-  }, [mapPoints, fitToPointsPadding, updateFeatures, zoom]);
-  (0, import_react18.useEffect)(() => {
+  }, [
+    mapPoints,
+    fitToPointsPadding,
+    updateFeatures,
+    zoom
+  ]);
+  (0, import_react24.useEffect)(() => {
     if (map && features?.length) {
-      setMapPoints(new MapPoints({ features, map, zoom }));
+      setMapPoints(new MapPoints({
+        features,
+        map,
+        zoom
+      }));
     }
-  }, [map, features, zoom]);
-  (0, import_react18.useEffect)(() => {
+  }, [
+    map,
+    features,
+    zoom
+  ]);
+  (0, import_react24.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" }) });
-};
+  }, [
+    mapInitialized,
+    reInitializeMap,
+    updateMapSetup
+  ]);
+  return /* @__PURE__ */ import_react24.default.createElement(import_react_flexbox7.FlexCol, {
+    alignItems: "stretch",
+    id: "xyo-mapbox-wrap",
+    ...props
+  }, features ? /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, /* @__PURE__ */ import_react24.default.createElement(MapBox, {
+    accessToken,
+    zoom
+  }), /* @__PURE__ */ import_react24.default.createElement(MapSettingsBox, null)) : /* @__PURE__ */ import_react24.default.createElement(import_material8.Alert, {
+    severity: "error"
+  }, "No data to show"));
+}, "MapboxPointsFlexBox");
 
 // src/types/NetworkLocationAnswerBase.ts
 var import_payload_model = require("@xyo-network/payload-model");
@@ -1335,7 +1691,5 @@ var isNetworkLocationAnswer = (0, import_payload_model.isPayloadOfSchemaType)(Ne
 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
-);
+var isNetworkLocationHeatmapQuadkeyAnswer = (0, import_payload_model.isPayloadOfSchemaType)(NetworkLocationHeatmapQuadkeyAnswerSchema);
 //# sourceMappingURL=index.cjs.map