@xyo-network/react-map 2.64.0-rc.7 → 2.64.1

package/dist/node/Components/AnimatedHeatMap.js

@@ -1,34 +1,626 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var AnimatedHeatMap_exports = {};
-__export(AnimatedHeatMap_exports, {
-  AnimatedHeatMap: () => AnimatedHeatMap
+// src/Components/AnimatedHeatMap.tsx
+import { darken, useTheme } from "@mui/material";
+import { FlexCol as FlexCol2 } from "@xylabs/react-flexbox";
+import { useState as useState7 } from "react";
+
+// src/Contexts/HeatMapInitializer/Provider.tsx
+import { forget as forget2 } from "@xylabs/forget";
+import { useEffect as useEffect5, useState as useState5 } 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(() => {
+      var _a;
+      const width = (_a = mapContainerRef.current) == null ? void 0 : _a.getBoundingClientRect().width;
+      if (width && mapCanvasRef.current) {
+        mapCanvasRef.current.style.width = `${width}px`;
+        setTimeout(() => mapInstance == null ? void 0 : mapInstance.resize());
+      }
+    }),
+    [mapCanvasRef, mapContainerRef, mapInstance]
+  );
+  useEffect(() => {
+    const dependenciesReady2 = !!(active && mapInstance && (mapContainerRef == null ? void 0 : 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/MapBoxClasses/MapBase.ts
+import { assertEx } from "@xylabs/assert";
+import { GeoJson } 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 = GeoJson.featureCollection(this._config.features);
+      return GeoJson.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 GeoJson2 } 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 = GeoJson2.featureCollection(feature);
+      return GeoJson2.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 = GeoJson2.featureCollection(this.config.features);
+      return GeoJson2.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/MapSettings.ts
+import { GeolocateControl, NavigationControl } from "mapbox-gl";
+var MapSettings = class _MapSettings {
+  static geoLocateControl;
+  static mapListeners = {
+    logData: (ev, map) => {
+      const target = map || (ev == null ? void 0 : 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 debugLayer = map.getLayer(layerName);
+    if (debugLayer) {
+      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, enableControls, debugLayer, debugLogging } = settings;
+    _MapSettings.toggleControls(enableControls == null ? void 0 : enableControls.value, map, zoom, requestLocation).toggleScrollToZoom(scrollToZoom == null ? void 0 : scrollToZoom.value, map).toggleDebugLayer(debugLayer == null ? void 0 : debugLayer.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 useEffect3, useState as useState3 } 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] = useState3();
+  const [mapInitialized, setMapInitialized] = useState3(false);
+  const value = { map, mapInitialized, setMapBoxInstance };
+  useEffect3(() => {
+    if (!mapInitialized && map) {
+      map == null ? void 0 : 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 useEffect4, useState as useState4 } 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] = useState4(defaultMapSettings || {});
+  const { map, mapInitialized } = useMapBoxInstance();
+  const value = {
+    mapSettings,
+    setMapSettings
+  };
+  useEffect4(() => {
+    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] = useState5();
+  const { options } = useDynamicPositioning();
+  const { mapSettings } = useMapSettings();
+  const { map, mapInitialized } = useMapBoxInstance();
+  const value = {
+    MapHeat: mapHeat,
+    heatMapColorProps
+  };
+  useEffect5(() => {
+    if (mapInitialized && (featureSets == null ? void 0 : featureSets.length) && featureSets[0].length && map && (featureSetsLayers == null ? void 0 : featureSetsLayers.length)) {
+      const { lowUsageColor, highUsageColor } = heatMapColorProps;
+      forget2(MapHeat.initializeAnimatedHeatMapSource(featureSetsLayers, featureSets, map, lowUsageColor, highUsageColor));
+    }
+    return () => {
+      MapHeat.animationStarted = false;
+    };
+  }, [featureSets, featureSetsLayers, mapInitialized, map, heatMapColorProps]);
+  useEffect5(() => {
+    if (mapHeat && mapInitialized && (features == null ? void 0 : features.length) && (layers == null ? void 0 : layers.length)) {
+      mapHeat.initializeHeatMapSource(layers);
+    }
+  }, [mapHeat, features == null ? void 0 : features.length, layers, mapInitialized]);
+  useEffect5(() => {
+    if (mapInitialized) {
+      const { fitToPoints } = mapSettings || {};
+      if (map) {
+        if ((fitToPoints == null ? void 0 : fitToPoints.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]);
+  useEffect5(() => {
+    if (map && (features == null ? void 0 : 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]
+    ]
+  }
 });
-module.exports = __toCommonJS(AnimatedHeatMap_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_material = require("@mui/material");
-var import_react_flexbox = require("@xylabs/react-flexbox");
-var import_react = require("react");
-var import_Contexts = require("../Contexts");
-var import_Layers = require("../Layers");
-var import_MapBoxHeat = require("./MapBoxHeat");
-const AnimatedHeatMap = ({
+
+// 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 useEffect6, useRef, useState as useState6 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var MapBox = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {
+  const [map, setMap] = useState6();
+  const mapContainerRef = useRef(null);
+  const mapCanvasRef = useRef(null);
+  const { setMapBoxInstance, map: mapInstance } = useMapBoxInstance();
+  const { mapSettings } = useMapSettings();
+  const activeResize = mapSettings == null ? void 0 : mapSettings.dynamicMapResize.value;
+  useDynamicMapResize(mapContainerRef, mapCanvasRef, mapInstance, activeResize);
+  useEffect6(() => {
+    var _a;
+    if (((_a = mapSettings == null ? void 0 : mapSettings.preferDark) == null ? void 0 : _a.value) === true) {
+      map == null ? void 0 : map.setStyle(`mapbox://styles/${"mapbox/dark-v10" /* Dark */}`);
+    } else {
+      map == null ? void 0 : map.setStyle(`mapbox://styles/${darkMode ? "mapbox/dark-v10" /* Dark */ : "mapbox/light-v10" /* Light */}`);
+    }
+  }, [map, darkMode, mapSettings]);
+  useEffect6(() => {
+    const map2 = new Map3({
+      accessToken,
+      center: [0, 0],
+      container: mapContainerRef.current ?? "",
+      style: `mapbox://styles/${"mapbox/light-v10" /* Light */}`,
+      zoom,
+      ...options
+    });
+    setMapBoxInstance == null ? void 0 : 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 == null ? void 0 : mapSettings[field];
+  const onLocalChange = (event) => {
+    if (setting) {
+      setMapSettings == null ? void 0 : setMapSettings((previous) => {
+        previous[setting.field].value = event.target.checked;
+        return { ...previous };
+      });
+    }
+  };
+  if ((setting == null ? void 0 : setting.devMode) && developerMode === false) {
+    return null;
+  }
+  return (setting == null ? void 0 : setting.hidden) ? null : /* @__PURE__ */ jsx5(FormControlLabel, { label: setting == null ? void 0 : setting.label, control: /* @__PURE__ */ jsx5(Switch, { checked: setting == null ? void 0 : 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,
@@ -36,28 +628,27 @@ const AnimatedHeatMap = ({
   staticFeatureSet,
   ...props
 }) => {
-  const theme = (0, import_material.useTheme)();
+  const theme = useTheme();
   const { staticMapColor, lowUsageColor, highUsageColor } = heatMapColorProps || {};
   const localStaticMapColor = staticMapColor ?? theme.palette.primary.light;
-  const [layers] = (0, import_react.useState)([
-    (0, import_Layers.LocationHeatMapLayerBuilderAnimated)(localStaticMapColor, 0, "static"),
-    (0, import_Layers.LocationHeatMapLayerBuilderAnimated)(lowUsageColor || localStaticMapColor, 0, "animated"),
-    (0, import_Layers.LocationHeatMapLayerBuilderAnimated)(highUsageColor || (0, import_material.darken)(localStaticMapColor, 0.9), 1, "animated")
+  const [layers] = useState7([
+    LocationHeatMapLayerBuilderAnimated(localStaticMapColor, 0, "static"),
+    LocationHeatMapLayerBuilderAnimated(lowUsageColor || localStaticMapColor, 0, "animated"),
+    LocationHeatMapLayerBuilderAnimated(highUsageColor || darken(localStaticMapColor, 0.9), 1, "animated")
   ]);
-  return animatedFeatureSets?.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Contexts.MapBoxInstanceProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Contexts.MapSettingsProvider, { defaultMapSettings, debugLayerName: import_Layers.MapHeatConstants.LocationDebugLayerId, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_Contexts.HeatMapInitializerProvider,
+  return (animatedFeatureSets == null ? void 0 : 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__ */ (0, import_jsx_runtime.jsx)(import_MapBoxHeat.MapboxHeatFlexBox, { accessToken, ...props })
+      children: /* @__PURE__ */ jsx8(MapboxHeatFlexBox, { accessToken, ...props })
     }
-  ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexCol, { minHeight: 160, minWidth: 160, busy: true });
+  ) }) }) : /* @__PURE__ */ jsx8(FlexCol2, { minHeight: 160, minWidth: 160, busy: true });
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   AnimatedHeatMap
-});
+};
 //# sourceMappingURL=AnimatedHeatMap.js.map