@xyo-network/react-map 2.64.0 → 2.64.3

package/dist/browser/Contexts/index.js

@@ -1,5 +1,460 @@
-export * from "./HeatMapInitializer";
-export * from "./MapboxAccessToken";
-export * from "./MapBoxInstance";
-export * from "./MapSettings";
+// src/Contexts/HeatMapInitializer/Provider.tsx
+import { forget as forget2 } from "@xylabs/forget";
+import { useEffect as useEffect4, useState as useState4 } from "react";
+
+// src/hooks/useDynamicPositioning.tsx
+import { useWindowSize } from "@xylabs/react-shared";
+import { useEffect, useState } 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] = useState({});
+  const { width, height } = useWindowSize();
+  useEffect(() => {
+    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?.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?.value, map, zoom, requestLocation).toggleScrollToZoom(scrollToZoom?.value, map).toggleDebugLayer(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 useEffect2, useState as useState2 } 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] = useState2();
+  const [mapInitialized, setMapInitialized] = useState2(false);
+  const value = { map, mapInitialized, setMapBoxInstance };
+  useEffect2(() => {
+    if (!mapInitialized && map) {
+      map?.on("load", () => {
+        setMapInitialized(true);
+      });
+    }
+  }, [map, mapInitialized, setMapInitialized]);
+  return /* @__PURE__ */ jsx(MapBoxInstanceContext.Provider, { value, children });
+};
+
+// src/Contexts/MapBoxInstance/useMapBoxInstance.tsx
+import { assertEx as assertEx3 } from "@xylabs/assert";
+import { useContext } from "react";
+var useMapBoxInstance = () => {
+  const context = useContext(MapBoxInstanceContext);
+  assertEx3("map" in context, "useMapBoxInstance must be used within a MapBoxInstanceContext");
+  return context;
+};
+
+// src/Contexts/MapSettings/Provider.tsx
+import { useEffect as useEffect3, useState as useState3 } 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] = useState3(defaultMapSettings || {});
+  const { map, mapInitialized } = useMapBoxInstance();
+  const value = {
+    mapSettings,
+    setMapSettings
+  };
+  useEffect3(() => {
+    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] = useState4();
+  const { options } = useDynamicPositioning();
+  const { mapSettings } = useMapSettings();
+  const { map, mapInitialized } = useMapBoxInstance();
+  const value = {
+    MapHeat: mapHeat,
+    heatMapColorProps
+  };
+  useEffect4(() => {
+    if (mapInitialized && featureSets?.length && featureSets[0].length && map && featureSetsLayers?.length) {
+      const { lowUsageColor, highUsageColor } = heatMapColorProps;
+      forget2(MapHeat.initializeAnimatedHeatMapSource(featureSetsLayers, featureSets, map, lowUsageColor, highUsageColor));
+    }
+    return () => {
+      MapHeat.animationStarted = false;
+    };
+  }, [featureSets, featureSetsLayers, mapInitialized, map, heatMapColorProps]);
+  useEffect4(() => {
+    if (mapHeat && mapInitialized && features?.length && layers?.length) {
+      mapHeat.initializeHeatMapSource(layers);
+    }
+  }, [mapHeat, features?.length, layers, mapInitialized]);
+  useEffect4(() => {
+    if (mapInitialized) {
+      const { fitToPoints } = mapSettings || {};
+      if (map) {
+        if (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]);
+  useEffect4(() => {
+    if (map && features?.length) {
+      setMapHeat(new MapHeat({ features, map, zoom }));
+    }
+  }, [map, features, zoom]);
+  return /* @__PURE__ */ jsx3(HeatMapInitializerContext.Provider, { value, children });
+};
+
+// src/Contexts/HeatMapInitializer/useHeatMapInitializer.tsx
+import { assertEx as assertEx4 } from "@xylabs/assert";
+import { useContext as useContext3 } from "react";
+var useHeatMapInitializer = () => {
+  const context = useContext3(HeatMapInitializerContext);
+  assertEx4("heatMapInitialized" in context, "useHeatMapInitializer must be used within a HeatMapInitializerContext");
+  return context;
+};
+
+// src/Contexts/MapboxAccessToken/Context.ts
+import { createContextEx } from "@xyo-network/react-shared";
+var MapboxAccessTokenContext = createContextEx();
+
+// src/Contexts/MapboxAccessToken/Provider.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var MapboxAccessTokenProvider = ({ defaultAccessToken, ...props }) => {
+  const [accessToken, setAccessToken] = useState5();
+  return /* @__PURE__ */ jsx4(MapboxAccessTokenContext.Provider, { value: { accessToken: accessToken ?? defaultAccessToken, provided: true, setAccessToken }, ...props });
+};
+
+// src/Contexts/MapboxAccessToken/use.ts
+import { useContextEx } from "@xyo-network/react-shared";
+var useMapboxAccessToken = (required = false) => {
+  return useContextEx(MapboxAccessTokenContext, "MapboxAccessToken", required);
+};
+export {
+  HeatMapInitializerProvider,
+  MapBoxInstanceProvider,
+  MapSettingsProvider,
+  MapboxAccessTokenContext,
+  MapboxAccessTokenProvider,
+  useHeatMapInitializer,
+  useMapBoxInstance,
+  useMapSettings,
+  useMapboxAccessToken
+};
 //# sourceMappingURL=index.js.map

package/dist/browser/Contexts/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Contexts/index.ts"],"sourcesContent":["export * from './HeatMapInitializer'\nexport * from './MapboxAccessToken'\nexport * from './MapBoxInstance'\nexport * from './MapSettings'\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/Contexts/HeatMapInitializer/Provider.tsx","../../../src/hooks/useDynamicPositioning.tsx","../../../src/MapBoxClasses/MapBase.ts","../../../src/MapBoxClasses/MapHeat.ts","../../../src/MapBoxClasses/MapSettings.ts","../../../src/Contexts/MapBoxInstance/Provider.tsx","../../../src/Contexts/MapBoxInstance/Context.ts","../../../src/Contexts/MapBoxInstance/useMapBoxInstance.tsx","../../../src/Contexts/MapSettings/Provider.tsx","../../../src/Contexts/MapSettings/Context.ts","../../../src/Contexts/MapSettings/useMapSettings.tsx","../../../src/Contexts/HeatMapInitializer/Context.ts","../../../src/Contexts/HeatMapInitializer/useHeatMapInitializer.tsx","../../../src/Contexts/MapboxAccessToken/Context.ts","../../../src/Contexts/MapboxAccessToken/Provider.tsx","../../../src/Contexts/MapboxAccessToken/use.ts"],"sourcesContent":["import { forget } from '@xylabs/forget'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { Feature, Polygon } from 'geojson'\nimport { useEffect, useState } from 'react'\n\nimport { AnimatedHeatMapColorProps, HeatMapColorProps } from '../../Colors'\nimport { useDynamicPositioning } from '../../hooks'\nimport { MapLayer } from '../../Layers'\nimport { MapHeat } from '../../MapBoxClasses'\nimport { useMapBoxInstance } from '../MapBoxInstance'\nimport { useMapSettings } from '../MapSettings'\nimport { HeatMapInitializerContext } from './Context'\nimport { HeatMapInitializerState } from './State'\n\nexport interface MapInitializerProviderProps {\n  featureSets?: Feature<Polygon>[][]\n  featureSetsLayers?: MapLayer[]\n  features?: Feature<Polygon>[]\n  fitToPadding?: number\n  heatMapColorProps: HeatMapColorProps | AnimatedHeatMapColorProps\n  layers?: MapLayer[]\n  zoom?: number\n}\n\nexport const HeatMapInitializerProvider: React.FC<WithChildren<MapInitializerProviderProps>> = ({\n  children,\n  featureSets,\n  featureSetsLayers,\n  features,\n  fitToPadding,\n  heatMapColorProps,\n  layers,\n  zoom,\n}) => {\n  const [mapHeat, setMapHeat] = useState<MapHeat>()\n  const { options } = useDynamicPositioning()\n  const { mapSettings } = useMapSettings()\n  const { map, mapInitialized } = useMapBoxInstance()\n\n  const value: HeatMapInitializerState = {\n    MapHeat: mapHeat,\n    heatMapColorProps,\n  }\n\n  useEffect(() => {\n    if (mapInitialized && featureSets?.length && featureSets[0].length && map && featureSetsLayers?.length) {\n      const { lowUsageColor, highUsageColor } = heatMapColorProps as AnimatedHeatMapColorProps\n      forget(MapHeat.initializeAnimatedHeatMapSource(featureSetsLayers, featureSets, map, lowUsageColor, highUsageColor))\n    }\n\n    return () => {\n      MapHeat.animationStarted = false\n    }\n  }, [featureSets, featureSetsLayers, mapInitialized, map, heatMapColorProps])\n\n  useEffect(() => {\n    if (mapHeat && mapInitialized && features?.length && layers?.length) {\n      mapHeat.initializeHeatMapSource(layers)\n    }\n  }, [mapHeat, features?.length, layers, mapInitialized])\n\n  useEffect(() => {\n    if (mapInitialized) {\n      const { fitToPoints } = mapSettings || {}\n\n      if (map) {\n        if (fitToPoints?.value === true) {\n          MapHeat.initialMapPositioning({ padding: fitToPadding }, map, features)\n        } else if (options.zoom && options.center) {\n          map.setZoom(options.zoom)\n          map.setCenter(options.center)\n        }\n      }\n    }\n  }, [mapHeat, map, mapSettings, fitToPadding, options, mapInitialized, features])\n\n  useEffect(() => {\n    if (map && features?.length) {\n      // Every time we get a new map or features, we make a new class\n      setMapHeat(new MapHeat({ features, map, zoom }))\n    }\n  }, [map, features, zoom])\n\n  return <HeatMapInitializerContext.Provider value={value}>{children}</HeatMapInitializerContext.Provider>\n}\n","import { useWindowSize } from '@xylabs/react-shared'\nimport { MapboxOptions } from 'mapbox-gl'\nimport { useEffect, useState } from 'react'\n\n/**\n * Zoom level for the map\n *\n * Note: Changing zoom will require changes to Lat/Lng Ranges\n */\nconst defaultZoom = 1.6\n\n/**\n * Range of aspect ratio values (width / height = aspect ratio) to scale against degrees\n * On lower aspect ratios, the width is larger than the height and vice-versa for higher\n */\nconst defaultAspectRatioRange = [0.5, 2]\n\n/**\n * Lat/Lng ranges, the first index is the minimum and the second is the maximum\n * Index 0 is for portrait screens and centers on the Eastern Hemisphere\n * Index 1 is for wider screens near the Prime Meridian and north of the Equator\n *\n * Note: Values are based off the zoom level\n */\nconst latRange = [0.9121644205263664, 1.71785031559439]\nconst lngRange = [-81.4742014851959, 12.788958675506933]\n\n/**\n * Function to interpolate an aspect ratio value across a range of degrees and aspect ratios\n *\n * Inspired by - https://stackoverflow.com/questions/14224535/scaling-between-two-number-ranges\n *\n * @param aspectRatio aspect ratio to scale\n * @param degreeRange A latitude or longitude range (i.e. [minLat, maxLat])\n * @param aspectRatioRange A range of aspect ratios to scale against degreeRange parameter\n * @returns number\n */\nconst linearInterpolate = (aspectRatio: number, degreeRange: number[], aspectRatioRange?: number[]): number => {\n  const [degreeMin, degreeMax] = degreeRange\n  const [aspectRatioMin, aspectRatioMax] = aspectRatioRange || defaultAspectRatioRange\n\n  const aspectRatioRangeSpan = aspectRatioMax - aspectRatioMin\n  const degreeRangeSpan = degreeMax - degreeMin\n\n  const percent = (aspectRatio - aspectRatioMin) / aspectRatioRangeSpan\n  const scaledDegree = percent * degreeRangeSpan + degreeMin\n\n  return scaledDegree\n}\n\nconst useDynamicPositioning = () => {\n  const [options, setOptions] = useState<Partial<MapboxOptions>>({})\n  const { width, height } = useWindowSize()\n\n  useEffect(() => {\n    if (width && height) {\n      const aspectRatio = width / height\n\n      setOptions({\n        center: [linearInterpolate(aspectRatio, lngRange), linearInterpolate(aspectRatio, latRange)],\n        zoom: defaultZoom,\n      })\n    }\n  }, [height, width])\n\n  return { options }\n}\n\nexport { useDynamicPositioning }\n","import { assertEx } from '@xylabs/assert'\nimport { GeoJson } from '@xyo-network/sdk-geo'\nimport { Feature, Geometry } from 'geojson'\n// eslint-disable-next-line no-restricted-imports\nimport { GeoJSONSource, Map } from 'mapbox-gl'\n\nimport { MapLayer } from '../Layers'\n\nexport interface MapBaseConfig<T extends Geometry> {\n  features: Feature<T>[]\n  map: Map\n  requestLocation?: boolean\n  zoom?: number\n}\n\nexport abstract class MapBase<T extends Geometry> {\n  private _config: MapBaseConfig<T>\n\n  constructor(config: MapBaseConfig<T>) {\n    this._config = { requestLocation: true, zoom: 2, ...config }\n  }\n\n  get isMapReady() {\n    return !!this._config.map\n  }\n\n  initializeMapSource(layer: MapLayer) {\n    const getSource = () => {\n      const featuresCollection = GeoJson.featureCollection(this._config.features)\n      return GeoJson.featuresSource(featuresCollection)\n    }\n\n    const existingSource = this._config.map.getSource(layer.source as string) as GeoJSONSource\n    const source = getSource()\n    if (existingSource) {\n      existingSource.setData(assertEx(source.data as GeoJSON.Feature<GeoJSON.Geometry> | GeoJSON.FeatureCollection<GeoJSON.Geometry>))\n    } else {\n      this._config.map.addSource(layer.source as string, source)\n    }\n    layer.update(this._config.map, true)\n\n    return this\n  }\n}\n","import { assertEx } from '@xylabs/assert'\nimport { delay } from '@xylabs/delay'\nimport { forget } from '@xylabs/forget'\nimport { GeoJson } from '@xyo-network/sdk-geo'\nimport { Feature, Polygon } from 'geojson'\nimport { FitBoundsOptions, GeoJSONSource, GeoJSONSourceRaw, LngLatBounds, Map } from 'mapbox-gl'\n\nimport { MapLayer } from '../Layers'\nimport { MapBase, MapBaseConfig } from './MapBase'\n\nexport class MapHeat extends MapBase<Polygon> {\n  static animationStarted = false\n\n  config: MapBaseConfig<Polygon>\n  constructor(config: MapBaseConfig<Polygon>) {\n    super(config)\n    this.config = config\n  }\n\n  static initialMapPositioning(options: FitBoundsOptions, map: Map, features?: Feature<Polygon>[], initialBounds?: LngLatBounds) {\n    if (!features) {\n      return\n    }\n\n    let bounds: LngLatBounds\n\n    if (initialBounds) {\n      bounds = initialBounds\n    } else {\n      bounds = new LngLatBounds()\n\n      features.forEach((feature: Feature<Polygon>) => {\n        feature.geometry.coordinates.forEach((coordinates) => {\n          coordinates.forEach((position) => {\n            bounds.extend(position as [number, number])\n          })\n        })\n      })\n    }\n\n    map.setCenter(bounds.getCenter())\n    map.fitBounds(bounds, options)\n    return this\n  }\n\n  static async initializeAnimatedHeatMapSource(\n    layers: MapLayer[],\n    featureSet: Feature<Polygon>[][],\n    map: Map,\n    startColor?: string,\n    endColor?: string,\n  ) {\n    this.animationStarted = true\n    let layerTick = 0\n    let sourceTick = 0\n\n    const sources = featureSet.map((feature) => {\n      const featuresCollection = GeoJson.featureCollection(feature)\n      return GeoJson.featuresSource(featuresCollection)\n    })\n    this.updateLayer(map, layers[0], sources[0])\n    this.updateLayer(map, layers[1], sources[1])\n\n    layers.forEach((layer) => {\n      map.setPaintProperty(layer.id, 'fill-opacity', 0)\n    })\n\n    const frameLength = 3000\n    const initialPad = 0.5\n    const factor = 10\n    const steps = 30\n    const stepLength = frameLength / steps\n    const lowUsageColor = startColor ?? '#FFB3B3'\n    const highUsageColor = endColor ?? '#FF0000'\n\n    // Max density at i=0, min density at i=steps\n    const dynamicFillColor = (factor: number, initialPad: number, i: number) => {\n      const sinFade = Math.sin(((i / steps) * Math.PI) / 2)\n      const cosFade = Math.cos(((i / steps) * Math.PI) / 2)\n      // we want the divisor to always be at least 1x the desired factor but will go up to\n      // 2x factor to account for combinative effect of the overlay of two layers at once\n      const divisor = factor + factor * sinFade\n      const offset = initialPad * cosFade\n      return [\n        'let',\n        'density',\n        ['+', ['/', ['number', ['get', 'value']], divisor], offset],\n        ['interpolate', ['linear'], ['var', 'density'], 0, lowUsageColor, 0.5, highUsageColor],\n      ]\n    }\n\n    const fadedIn: boolean[] = layers.map((_) => false)\n\n    const fadeIn = async (id: string, index: number) => {\n      for (let i = steps; i >= 1; i--) {\n        map.setPaintProperty(id, 'fill-color', dynamicFillColor(factor, initialPad, i * (180 / stepLength)))\n        await delay(stepLength)\n      }\n      fadedIn[index] = true\n    }\n\n    const fadeOut = async (id: string, index: number) => {\n      for (let i = 1; i <= steps; i++) {\n        map.setPaintProperty(id, 'fill-color', dynamicFillColor(factor, initialPad, i * (180 / stepLength)))\n        await delay(stepLength)\n      }\n      fadedIn[index] = false\n    }\n\n    let started = false\n    const startAnimation = async () => {\n      assertEx(!started, 'Animation Already Started')\n      started = true\n      while (this.animationStarted) {\n        const upLayer = layerTick % layers.length\n        const downLayer = (layerTick + 1) % layers.length\n\n        const incomingSource = sourceTick % featureSet.length\n        const outgoingSource = (sourceTick + 1) % featureSet.length\n\n        // console.log('incoming / outgoing source', incomingSource, outgoingSource)\n\n        // console.log(`animate: [${upLayer}, ${downLayer}]`)\n        if (fadedIn[upLayer]) {\n          this.updateLayer(map, layers[upLayer], sources[incomingSource])\n          forget(fadeOut(layers[upLayer].id, upLayer))\n        }\n        if (!fadedIn[downLayer]) {\n          this.updateLayer(map, layers[downLayer], sources[outgoingSource])\n          forget(fadeIn(layers[downLayer].id, downLayer))\n        }\n        while ((fadedIn[upLayer] || !fadedIn[downLayer]) && this.animationStarted) {\n          // console.log(`checking: [${fadedIn[upLayer]}, ${!fadedIn[downLayer]}]`)\n          await delay(1000)\n        }\n        layerTick++\n        sourceTick++\n\n        // console.log(`this.layerTick: ${layerTick}`)\n        // console.log(`this.sourceTick: ${sourceTick}`)\n      }\n    }\n\n    await startAnimation()\n  }\n\n  private static updateLayer(map: Map, layer: MapLayer, source: GeoJSONSourceRaw) {\n    const existingSource = map.getSource(layer.source as string) as GeoJSONSource\n    if (existingSource && source.data) {\n      existingSource.setData(source.data as GeoJSON.Feature<GeoJSON.Geometry> | GeoJSON.FeatureCollection<GeoJSON.Geometry>)\n    } else if (source) {\n      map.addSource(layer.source as string, source)\n    }\n    layer.update(map, true)\n  }\n\n  // Build layers each with the same features\n  initializeHeatMapSource(layers: MapLayer[]) {\n    const getSource = (_: number) => {\n      const featuresCollection = GeoJson.featureCollection(this.config.features)\n      return GeoJson.featuresSource(featuresCollection)\n    }\n\n    layers.forEach((layer, index) => {\n      const existingSource = this.config.map.getSource(layer.source as string) as GeoJSONSource\n      const source = getSource(index)\n      if (existingSource) {\n        existingSource.setData(assertEx(source.data) as GeoJSON.Feature<GeoJSON.Geometry> | GeoJSON.FeatureCollection<GeoJSON.Geometry>)\n      } else {\n        this.config.map.addSource(layer.source as string, source)\n      }\n      layer.update(this.config.map, true)\n    })\n\n    return this\n  }\n}\n","import { EventData, GeolocateControl, Map, MapLayerMouseEvent, MapLayerTouchEvent, NavigationControl } from 'mapbox-gl'\n\nimport { MapSetting } from '../Settings'\n\nexport interface MapSettingsConfig {\n  debugLayerName?: string\n  map: Map\n  requestLocation?: boolean\n  settings: MapSetting\n  zoom?: number\n}\n\n/**\n * Utility class to handle changes in settings\n *\n * Methods are pure functions dedicated to map manipulation\n */\nexport class MapSettings {\n  static geoLocateControl: GeolocateControl | undefined\n  static mapListeners = {\n    logData: (ev?: MapLayerMouseEvent | (MapLayerTouchEvent & EventData), map?: Map) => {\n      const target = map || ev?.target\n      if (target) {\n        console.log('zoom', target.getZoom())\n        console.log('center', target.getCenter())\n      }\n    },\n  }\n  static navControl: NavigationControl | undefined\n  static requestLocation: boolean | undefined\n\n  static toggleControls(value: boolean | undefined, map: Map, zoom?: number, requestLocation?: boolean) {\n    if (value) {\n      MapSettings.addControls(map, zoom, requestLocation)\n    } else {\n      MapSettings.removeControls(map)\n    }\n\n    return this\n  }\n\n  static toggleDebugLayer(value: boolean | undefined, map: Map, layerName: string) {\n    const debugLayer = map.getLayer(layerName)\n    if (debugLayer) {\n      if (value) {\n        map.setLayoutProperty(layerName, 'visibility', 'visible')\n      } else {\n        map.setLayoutProperty(layerName, 'visibility', 'none')\n      }\n    }\n\n    return this\n  }\n\n  static toggleDebugLogging(value: boolean | undefined, map: Map) {\n    const debugEvents = ['resize', 'zoomend', 'dragend']\n    if (value) {\n      // initial values\n      this.mapListeners.logData(undefined, map)\n      debugEvents.forEach((event) => map.on(event, this.mapListeners.logData))\n    } else {\n      debugEvents.forEach((event) => map.off(event, this.mapListeners.logData))\n    }\n  }\n\n  static toggleScrollToZoom(value: boolean | undefined, map: Map) {\n    if (value) {\n      map.scrollZoom.enable()\n    } else {\n      map.scrollZoom.disable()\n    }\n\n    return this\n  }\n\n  static updateSettings(config: MapSettingsConfig) {\n    const { settings, map, zoom, requestLocation, debugLayerName = '' } = config\n    const { scrollToZoom, enableControls, debugLayer, debugLogging } = settings\n\n    MapSettings.toggleControls(enableControls?.value, map, zoom, requestLocation)\n      .toggleScrollToZoom(scrollToZoom?.value, map)\n      .toggleDebugLayer(debugLayer?.value, map, debugLayerName)\n      .toggleDebugLogging(debugLogging.value, map)\n  }\n\n  // Needs to be static so we ensure controls are only instantiated once\n  private static addControls(map: Map, zoom?: number, requestLocation?: boolean) {\n    const geolocateControl = new GeolocateControl({\n      fitBoundsOptions: {\n        zoom: zoom || 2,\n      },\n      positionOptions: {\n        enableHighAccuracy: true,\n      },\n      trackUserLocation: true,\n    })\n\n    const navControl = new NavigationControl({\n      showCompass: false,\n    })\n\n    this.geoLocateControl = this.geoLocateControl || geolocateControl\n    this.navControl = this.navControl || navControl\n\n    if (!map.hasControl(this.geoLocateControl)) {\n      if (requestLocation) {\n        map.addControl(this.geoLocateControl)\n      }\n    }\n\n    if (!map.hasControl(this.navControl)) {\n      map.addControl(this.navControl, 'top-left')\n    }\n\n    return this\n  }\n\n  private static removeControls(map: Map) {\n    if (this.geoLocateControl && map.hasControl(this.geoLocateControl)) {\n      if (this.requestLocation) {\n        map.removeControl(this.geoLocateControl)\n      }\n    }\n\n    if (this.navControl && map.hasControl(this.navControl)) {\n      map.removeControl(this.navControl)\n    }\n\n    return this\n  }\n}\n","import { WithChildren } from '@xylabs/react-shared'\nimport { Map } from 'mapbox-gl'\nimport { useEffect, useState } from 'react'\n\nimport { MapBoxInstanceContext } from './Context'\nimport { MapBoxInstanceState } from './State'\n\nexport const MapBoxInstanceProvider: React.FC<WithChildren> = ({ children }) => {\n  const [map, setMapBoxInstance] = useState<Map>()\n  const [mapInitialized, setMapInitialized] = useState(false)\n\n  const value: MapBoxInstanceState = { map, mapInitialized, setMapBoxInstance }\n\n  useEffect(() => {\n    if (!mapInitialized && map) {\n      map?.on('load', () => {\n        setMapInitialized(true)\n      })\n    }\n  }, [map, mapInitialized, setMapInitialized])\n\n  return <MapBoxInstanceContext.Provider value={value}>{children}</MapBoxInstanceContext.Provider>\n}\n","import { createContext } from 'react'\n\nimport { MapBoxInstanceState } from './State'\n\nconst MapBoxInstanceContext = createContext<MapBoxInstanceState>({})\n\nexport { MapBoxInstanceContext }\n","import { assertEx } from '@xylabs/assert'\nimport { useContext } from 'react'\n\nimport { MapBoxInstanceContext } from './Context'\n\nconst useMapBoxInstance = () => {\n  const context = useContext(MapBoxInstanceContext)\n  assertEx('map' in context, 'useMapBoxInstance must be used within a MapBoxInstanceContext')\n\n  return context\n}\n\nexport { useMapBoxInstance }\n","import { WithChildren } from '@xylabs/react-shared'\nimport { useEffect, useState } from 'react'\n\nimport { MapSettings } from '../../MapBoxClasses'\nimport { MapSetting } from '../../Settings'\nimport { useMapBoxInstance } from '../MapBoxInstance'\nimport { MapSettingsContext } from './Context'\nimport { MapSettingsState } from './State'\n\nexport interface MapSettingsProviderProps {\n  debugLayerName?: string\n  defaultMapSettings?: MapSetting\n  requestLocation?: boolean\n  zoom?: number\n}\n\nexport const MapSettingsProvider: React.FC<WithChildren<MapSettingsProviderProps>> = ({\n  children,\n  debugLayerName,\n  defaultMapSettings,\n  requestLocation,\n  zoom = 1,\n}) => {\n  const [mapSettings, setMapSettings] = useState<MapSetting>(defaultMapSettings || {})\n  const { map, mapInitialized } = useMapBoxInstance()\n\n  const value: MapSettingsState = {\n    mapSettings,\n    setMapSettings,\n  }\n\n  useEffect(() => {\n    if (mapSettings && map && mapInitialized) {\n      MapSettings.updateSettings({ debugLayerName, map, requestLocation, settings: mapSettings, zoom })\n    }\n  }, [debugLayerName, map, mapInitialized, mapSettings, requestLocation, zoom])\n\n  return <MapSettingsContext.Provider value={value}>{children}</MapSettingsContext.Provider>\n}\n","import { createContext } from 'react'\n\nimport { MapSettingsState } from './State'\n\nconst MapSettingsContext = createContext<MapSettingsState>({})\n\nexport { MapSettingsContext }\n","import { useContext } from 'react'\n\nimport { MapSettingsContext } from './Context'\n\nconst useMapSettings = () => {\n  const context = useContext(MapSettingsContext)\n\n  return context\n}\n\nexport { useMapSettings }\n","import { createContext } from 'react'\n\nimport { HeatMapInitializerState } from './State'\n\nconst HeatMapInitializerContext = createContext<HeatMapInitializerState>({})\n\nexport { HeatMapInitializerContext }\n","import { assertEx } from '@xylabs/assert'\nimport { useContext } from 'react'\n\nimport { HeatMapInitializerContext } from './Context'\n\nconst useHeatMapInitializer = () => {\n  const context = useContext(HeatMapInitializerContext)\n  assertEx('heatMapInitialized' in context, 'useHeatMapInitializer must be used within a HeatMapInitializerContext')\n\n  return context\n}\n\nexport { useHeatMapInitializer }\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { MapboxAccessTokenContextState } from './State'\n\nexport const MapboxAccessTokenContext = createContextEx<MapboxAccessTokenContextState>()\n","import { WithChildren } from '@xylabs/react-shared'\nimport { useState } from 'react'\n\nimport { MapboxAccessTokenContext } from './Context'\n\nexport interface MapboxAccessTokenProviderProps {\n  defaultAccessToken?: string\n}\n\nexport const MapboxAccessTokenProvider: React.FC<WithChildren<MapboxAccessTokenProviderProps>> = ({ defaultAccessToken, ...props }) => {\n  const [accessToken, setAccessToken] = useState<string>()\n\n  return <MapboxAccessTokenContext.Provider value={{ accessToken: accessToken ?? defaultAccessToken, provided: true, setAccessToken }} {...props} />\n}\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { MapboxAccessTokenContext } from './Context'\n\nexport const useMapboxAccessToken = (required = false) => {\n  return useContextEx(MapboxAccessTokenContext, 'MapboxAccessToken', required)\n}\n"],"mappings":"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","names":["forget","useEffect","useState","assertEx","GeoJson","GeoJson","factor","initialPad","assertEx","useEffect","useState","useState","useEffect","assertEx","assertEx","useEffect","useState","createContext","jsx","useState","useEffect","useContext","useContext","createContext","jsx","useState","useEffect","forget","assertEx","useContext","useContext","assertEx","useState","jsx","useState"]}

package/dist/browser/Layers/Builders/LocationHeatMapLayerBuilder.js

@@ -1,8 +1,112 @@
-import { HeatMapFillLayerConfig, HeatMapLineLayerConfig, HeatMapSymbolLayerConfig } from "../Configs";
-import { FillLayerBuilder } from "../FillLayer";
-import { LineLayerBuilder } from "../LineLayer";
-import { SymbolLayerBuilder } from "../SymbolLayer";
-const MapHeatConstants = {
+// src/Layers/Configs/HeatMapFillLayerConfig.ts
+var HeatMapFillLayerConfig = (color) => ({
+  paint: {
+    "fill-color": color,
+    "fill-opacity": [
+      "let",
+      "density",
+      ["+", ["/", ["number", ["get", "value"]], 4], 0.125],
+      ["interpolate", ["linear"], ["var", "density"], 0.8, ["var", "density"], 1, 0.85]
+    ]
+  }
+});
+
+// src/Layers/Configs/HeatMapLineLayerConfig.ts
+var HeatMapLineLayerConfig = (color) => ({
+  layout: {
+    // Enable for debugging
+    visibility: "none"
+  },
+  paint: {
+    "line-color": color,
+    "line-opacity": ["let", "density", 0, ["interpolate", ["linear"], ["var", "density"], 0.8, ["var", "density"], 1, 0.85]],
+    "line-width": 0.5
+  }
+});
+
+// src/Layers/Configs/HeatMapSymbolLayerConfig.ts
+var HeatMapSymbolLayerConfig = (color) => ({
+  layout: {
+    "text-anchor": "center",
+    "text-field": [
+      "concat",
+      "value: ",
+      ["to-string", ["+", ["/", ["number", ["get", "value"]], 2], 0.25]],
+      "\n",
+      "count: ",
+      ["to-string", ["get", "count"]]
+    ],
+    "text-size": 10,
+    visibility: "none"
+  },
+  paint: {
+    "text-color": color
+  }
+});
+
+// src/Layers/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/LineLayer.ts
+import { LayerBase as LayerBase2 } from "@xyo-network/sdk-geo";
+var LineLayerBuilder = class extends LayerBase2 {
+  LineLayerOptions;
+  // ensures this class passes for `AnyLayer` type in MapBox
+  type = "line";
+  constructor(id, source, LineLayerOptions) {
+    super(id, source);
+    this.LineLayerOptions = LineLayerOptions || { id: this.id, source: this.source };
+  }
+  buildLayer() {
+    return {
+      ...this.LineLayerOptions,
+      id: this.id,
+      layout: {},
+      source: this.source,
+      type: this.type
+    };
+  }
+};
+
+// src/Layers/SymbolLayer.ts
+import { LayerBase as LayerBase3 } from "@xyo-network/sdk-geo";
+var SymbolLayerBuilder = class extends LayerBase3 {
+  SymbolLayerOptions;
+  // ensures this class passes for `AnyLayer` type in MapBox
+  type = "symbol";
+  constructor(id, source, SymbolLayerOptions) {
+    super(id, source);
+    this.SymbolLayerOptions = SymbolLayerOptions || { id: this.id, source: this.source };
+  }
+  buildLayer() {
+    return {
+      ...this.SymbolLayerOptions,
+      id: this.id,
+      source: this.source,
+      type: this.type
+    };
+  }
+};
+
+// src/Layers/Builders/LocationHeatMapLayerBuilder.ts
+var MapHeatConstants = {
   LocationDebugLayerId: "location-debug-id",
   LocationDebugLayerSource: "location-debug-source",
   LocationFillLayerId: "location-fill-id",
@@ -10,7 +114,7 @@ const MapHeatConstants = {
   LocationLineLayerId: "location-line-id",
   LocationLineLayerSource: "location-line-source"
 };
-const LocationHeatMapLayerBuilder = (color, alternateColor = "#000") => {
+var LocationHeatMapLayerBuilder = (color, alternateColor = "#000") => {
   const {
     LocationFillLayerId,
     LocationFillLayerSource,