@xyo-network/react-map 3.0.14 → 3.0.16

package/dist/browser/Components/LayerAnimator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayerAnimator.d.ts","sourceRoot":"","sources":["../../../src/Components/LayerAnimator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAExD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AACpC,OAAO,KAEN,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAEzD,MAAM,WAAW,kBAAkB;IACjC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,MAAM,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAA;IACpC,iBAAiB,EAAE,OAAO,CAAA;IAC1B,GAAG,EAAE,GAAG,GAAG,SAAS,CAAA;CACrB;AAKD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAqGpE,CAAA"}
+{"version":3,"file":"LayerAnimator.d.ts","sourceRoot":"","sources":["../../../src/Components/LayerAnimator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAExD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AACpC,OAAO,KAEN,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAEzD,MAAM,WAAW,kBAAkB;IACjC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,MAAM,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAA;IACpC,iBAAiB,EAAE,OAAO,CAAA;IAC1B,GAAG,EAAE,GAAG,GAAG,SAAS,CAAA;CACrB;AAKD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAkGpE,CAAA"}

package/dist/browser/Components/MapBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapBox.d.ts","sourceRoot":"","sources":["../../../src/Components/MapBox.tsx"],"names":[],"mappings":"AACA,OAAO,8BAA8B,CAAA;AAErC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAE3C,OAAO,KAEN,MAAM,OAAO,CAAA;AAMd,MAAM,WAAW,WAAW;IAC1B,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA0DxC,CAAA"}
+{"version":3,"file":"MapBox.d.ts","sourceRoot":"","sources":["../../../src/Components/MapBox.tsx"],"names":[],"mappings":"AACA,OAAO,8BAA8B,CAAA;AAErC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAE3C,OAAO,KAEN,MAAM,OAAO,CAAA;AAMd,MAAM,WAAW,WAAW;IAC1B,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2DxC,CAAA"}

package/dist/browser/Components/MapBoxPoints.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapBoxPoints.d.ts","sourceRoot":"","sources":["../../../src/Components/MapBoxPoints.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE7C,OAAO,KAEN,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAKzD,MAAM,WAAW,wBAAyB,SAAQ,kBAAkB;IAClE,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,CAAA;CAC5B;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAgFlE,CAAA"}
+{"version":3,"file":"MapBoxPoints.d.ts","sourceRoot":"","sources":["../../../src/Components/MapBoxPoints.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE7C,OAAO,KAEN,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAKzD,MAAM,WAAW,wBAAyB,SAAQ,kBAAkB;IAClE,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,CAAA;CAC5B;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA+ElE,CAAA"}

package/dist/browser/Contexts/HeatMapInitializer/Provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../../../../src/Contexts/HeatMapInitializer/Provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAC/C,OAAO,KAEN,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAEzF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAOrD,MAAM,WAAW,2BAA2B;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,EAAE,EAAE,CAAA;IAClC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,EAAE,CAAA;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,EAAE,iBAAiB,GAAG,yBAAyB,CAAA;IAChE,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,2BAA2B,CAAC,CAsE1F,CAAA"}
+{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../../../../src/Contexts/HeatMapInitializer/Provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAC/C,OAAO,KAA6B,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAEzF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAOrD,MAAM,WAAW,2BAA2B;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,EAAE,EAAE,CAAA;IAClC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,EAAE,CAAA;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,EAAE,iBAAiB,GAAG,yBAAyB,CAAA;IAChE,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,2BAA2B,CAAC,CAoE1F,CAAA"}

package/dist/browser/hooks/useDynamicMapResize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDynamicMapResize.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDynamicMapResize.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AACpC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAA;AAQ7C,eAAO,MAAM,mBAAmB,oBACb,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,gBAC1C,gBAAgB,CAAC,iBAAiB,GAAG,IAAI,CAAC,gBAC1C,GAAG,2BAmClB,CAAA"}
+{"version":3,"file":"useDynamicMapResize.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDynamicMapResize.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AACpC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAA;AAM7C,eAAO,MAAM,mBAAmB,oBACb,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,gBAC1C,gBAAgB,CAAC,iBAAiB,GAAG,IAAI,CAAC,gBAC1C,GAAG,2BAgClB,CAAA"}

package/dist/browser/hooks/useDynamicPositioning.d.ts

@@ -1,6 +1,6 @@
 import type { MapOptions } from 'mapbox-gl';
 declare const useDynamicPositioning: () => {
-    options: Partial<MapOptions>;
+    options: Partial<MapOptions> | undefined;
 };
 export { useDynamicPositioning };
 //# sourceMappingURL=useDynamicPositioning.d.ts.map

package/dist/browser/hooks/useDynamicPositioning.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDynamicPositioning.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDynamicPositioning.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAiD3C,QAAA,MAAM,qBAAqB;;CAgB1B,CAAA;AAED,OAAO,EAAE,qBAAqB,EAAE,CAAA"}
+{"version":3,"file":"useDynamicPositioning.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDynamicPositioning.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAiD3C,QAAA,MAAM,qBAAqB;;CAe1B,CAAA;AAED,OAAO,EAAE,qBAAqB,EAAE,CAAA"}

package/dist/browser/index.mjs

@@ -65,16 +65,15 @@ preferDark.value = true;
 // src/Components/AnimatedHeatMap.tsx
 import { darken, useTheme as useTheme2 } from "@mui/material";
 import { FlexCol as FlexCol2 } from "@xylabs/react-flexbox";
-import React9, { useState as useState9 } from "react";
+import React9, { useState as useState6 } from "react";
 
 // src/Contexts/HeatMapInitializer/Provider.tsx
 import { forget as forget2 } from "@xylabs/forget";
-import React3, { useEffect as useEffect6, useMemo as useMemo5, useState as useState6 } from "react";
+import React3, { useEffect as useEffect4, useMemo as useMemo7 } from "react";
 
 // src/hooks/useDynamicMapResize.tsx
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo } from "react";
 var useDynamicMapResize = /* @__PURE__ */ __name((mapContainerRef, mapCanvasRef, mapInstance, active = true) => {
-  const [dependenciesReady, setDependenciesReady] = useState(false);
   const resizer = useMemo(() => new ResizeObserver(() => {
     const width = mapContainerRef.current?.getBoundingClientRect().width;
     if (width && mapCanvasRef.current) {
@@ -86,9 +85,8 @@ var useDynamicMapResize = /* @__PURE__ */ __name((mapContainerRef, mapCanvasRef,
     mapContainerRef,
     mapInstance
   ]);
-  useEffect(() => {
-    const dependenciesReady2 = !!(active && mapInstance && mapContainerRef?.current && mapCanvasRef.current);
-    setDependenciesReady(dependenciesReady2);
+  const dependenciesReady = useMemo(() => {
+    return !!(active && mapInstance && mapContainerRef?.current && mapCanvasRef.current);
   }, [
     active,
     mapCanvasRef,
@@ -116,7 +114,7 @@ var useDynamicMapResize = /* @__PURE__ */ __name((mapContainerRef, mapCanvasRef,
 
 // src/hooks/useDynamicPositioning.tsx
 import { useWindowSize } from "@xylabs/react-shared";
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useMemo as useMemo2 } from "react";
 var defaultZoom = 1.6;
 var defaultAspectRatioRange = [
   0.5,
@@ -140,18 +138,17 @@ var linearInterpolate = /* @__PURE__ */ __name((aspectRatio, degreeRange, aspect
   return scaledDegree;
 }, "linearInterpolate");
 var useDynamicPositioning = /* @__PURE__ */ __name(() => {
-  const [options, setOptions] = useState2({});
   const { width, height } = useWindowSize();
-  useEffect2(() => {
+  const options = useMemo2(() => {
     if (width && height) {
       const aspectRatio = width / height;
-      setOptions({
+      return {
         center: [
           linearInterpolate(aspectRatio, lngRange),
           linearInterpolate(aspectRatio, latRange)
         ],
         zoom: defaultZoom
-      });
+      };
     }
   }, [
     height,
@@ -164,7 +161,7 @@ var useDynamicPositioning = /* @__PURE__ */ __name(() => {
 
 // src/hooks/useFindHashes.tsx
 import { useNetwork } from "@xyo-network/react-network";
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 var animatedAnswerHashesConst = [
   "79af071f451fc7af10d009dc63236ef9a9b211732c1ee0c06f028fcecf2336c5",
   "531bfba6d8dfefd3bcc888aca54cdbbd4574ed2b3ec551b230845a1f9a608898",
@@ -184,7 +181,7 @@ var useFindHashes = /* @__PURE__ */ __name(() => {
   const exploreMapHashes = network?.nodes?.find((node) => node.type === "archivist")?.explorerMapHashes;
   const animatedAnswerHashes = exploreMapHashes?.animatedAnswerHashes || animatedAnswerHashesConst;
   const staticAnswerHash = exploreMapHashes?.staticAnswerHash || staticAnswerHashConst;
-  const foundHashes = useMemo2(() => [
+  const foundHashes = useMemo3(() => [
     staticAnswerHash,
     ...animatedAnswerHashes
   ], [
@@ -222,7 +219,7 @@ var useHeatMapColors = /* @__PURE__ */ __name(() => {
 // src/hooks/useQuadKeyPayloadsToFeatures.tsx
 import { exists } from "@xylabs/exists";
 import { GeoJson } from "@xyo-network/sdk-geo";
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useMemo as useMemo4, useState } from "react";
 var quadKeyToFeature = /* @__PURE__ */ __name(({ density, quadkey }) => {
   const polygonFeature = new GeoJson(quadkey).polygonFeature();
   polygonFeature.properties = {
@@ -238,12 +235,12 @@ var setDensity = /* @__PURE__ */ __name((feature) => {
   return feature;
 }, "setDensity");
 var useQuadKeyPayloadsToFeatures = /* @__PURE__ */ __name((payloads) => {
-  const [multipleFeatureSets, setMultipleFeatureSets] = useState3([
+  const [multipleFeatureSets, setMultipleFeatureSets] = useState([
     []
   ]);
-  const [features, setFeatures] = useState3([]);
-  const [error, setError] = useState3();
-  useEffect3(() => {
+  const [features, setFeatures] = useState([]);
+  const [error, setError] = useState();
+  useMemo4(() => {
     if (Array.isArray(payloads)) {
       if (payloads?.filter(exists).length > 0) {
         const mappedFeatures = payloads?.map((payload) => payload?.result.map(quadKeyToFeature));
@@ -594,7 +591,7 @@ var MapSettings = class _MapSettings {
 };
 
 // src/Contexts/MapBoxInstance/Provider.tsx
-import React, { useEffect as useEffect4, useMemo as useMemo3, useState as useState4 } from "react";
+import React, { useEffect as useEffect2, useMemo as useMemo5, useState as useState2 } from "react";
 
 // src/Contexts/MapBoxInstance/Context.ts
 import { createContext } from "react";
@@ -602,9 +599,9 @@ var MapBoxInstanceContext = createContext({});
 
 // src/Contexts/MapBoxInstance/Provider.tsx
 var MapBoxInstanceProvider = /* @__PURE__ */ __name(({ children }) => {
-  const [map, setMapBoxInstance] = useState4();
-  const [mapInitialized, setMapInitialized] = useState4(false);
-  const value = useMemo3(() => ({
+  const [map, setMapBoxInstance] = useState2();
+  const [mapInitialized, setMapInitialized] = useState2(false);
+  const value = useMemo5(() => ({
     map,
     mapInitialized,
     setMapBoxInstance
@@ -613,7 +610,7 @@ var MapBoxInstanceProvider = /* @__PURE__ */ __name(({ children }) => {
     mapInitialized,
     setMapBoxInstance
   ]);
-  useEffect4(() => {
+  useEffect2(() => {
     if (!mapInitialized && map) {
       map?.on("load", () => {
         setMapInitialized(true);
@@ -639,7 +636,7 @@ var useMapBoxInstance = /* @__PURE__ */ __name(() => {
 }, "useMapBoxInstance");
 
 // src/Contexts/MapSettings/Provider.tsx
-import React2, { useEffect as useEffect5, useMemo as useMemo4, useState as useState5 } from "react";
+import React2, { useEffect as useEffect3, useMemo as useMemo6, useState as useState3 } from "react";
 
 // src/Contexts/MapSettings/Context.ts
 import { createContext as createContext2 } from "react";
@@ -647,16 +644,16 @@ var MapSettingsContext = createContext2({});
 
 // src/Contexts/MapSettings/Provider.tsx
 var MapSettingsProvider = /* @__PURE__ */ __name(({ children, debugLayerName, defaultMapSettings, requestLocation, zoom = 1 }) => {
-  const [mapSettings, setMapSettings] = useState5(defaultMapSettings || {});
+  const [mapSettings, setMapSettings] = useState3(defaultMapSettings || {});
   const { map, mapInitialized } = useMapBoxInstance();
-  const value = useMemo4(() => ({
+  const value = useMemo6(() => ({
     mapSettings,
     setMapSettings
   }), [
     mapSettings,
     setMapSettings
   ]);
-  useEffect5(() => {
+  useEffect3(() => {
     if (mapSettings && map && mapInitialized) {
       MapSettings.updateSettings({
         debugLayerName,
@@ -692,18 +689,28 @@ var HeatMapInitializerContext = createContext3({});
 
 // src/Contexts/HeatMapInitializer/Provider.tsx
 var HeatMapInitializerProvider = /* @__PURE__ */ __name(({ children, featureSets, featureSetsLayers, features, fitToPadding, heatMapColorProps, layers, zoom }) => {
-  const [mapHeat, setMapHeat] = useState6();
   const { options } = useDynamicPositioning();
   const { mapSettings } = useMapSettings();
   const { map, mapInitialized } = useMapBoxInstance();
-  const value = useMemo5(() => ({
+  const mapHeat = useMemo7(() => {
+    return map && features?.length ? new MapHeat({
+      features,
+      map,
+      zoom
+    }) : void 0;
+  }, [
+    map,
+    features,
+    zoom
+  ]);
+  const value = useMemo7(() => ({
     MapHeat: mapHeat,
     heatMapColorProps
   }), [
     mapHeat,
     heatMapColorProps
   ]);
-  useEffect6(() => {
+  useEffect4(() => {
     if (mapInitialized && featureSets?.length && featureSets[0].length > 0 && map && featureSetsLayers?.length) {
       const { lowUsageColor, highUsageColor } = heatMapColorProps;
       forget2(MapHeat.initializeAnimatedHeatMapSource(featureSetsLayers, featureSets, map, lowUsageColor, highUsageColor));
@@ -718,7 +725,7 @@ var HeatMapInitializerProvider = /* @__PURE__ */ __name(({ children, featureSets
     map,
     heatMapColorProps
   ]);
-  useEffect6(() => {
+  useEffect4(() => {
     if (mapHeat && mapInitialized && features?.length && layers?.length) {
       mapHeat.initializeHeatMapSource(layers);
     }
@@ -728,7 +735,7 @@ var HeatMapInitializerProvider = /* @__PURE__ */ __name(({ children, featureSets
     layers,
     mapInitialized
   ]);
-  useEffect6(() => {
+  useEffect4(() => {
     if (mapInitialized) {
       const { fitToPoints: fitToPoints3 } = mapSettings || {};
       if (map) {
@@ -741,7 +748,7 @@ var HeatMapInitializerProvider = /* @__PURE__ */ __name(({ children, featureSets
               top: fitToPadding
             }
           }, map, features);
-        } else if (options.zoom && options.center) {
+        } else if (options?.zoom && options.center) {
           map.setZoom(options.zoom);
           map.setCenter(options.center);
         }
@@ -756,19 +763,6 @@ var HeatMapInitializerProvider = /* @__PURE__ */ __name(({ children, featureSets
     mapInitialized,
     features
   ]);
-  useEffect6(() => {
-    if (map && features?.length) {
-      setMapHeat(new MapHeat({
-        features,
-        map,
-        zoom
-      }));
-    }
-  }, [
-    map,
-    features,
-    zoom
-  ]);
   return /* @__PURE__ */ React3.createElement(HeatMapInitializerContext.Provider, {
     value
   }, children);
@@ -788,10 +782,10 @@ import { createContextEx } from "@xyo-network/react-shared";
 var MapboxAccessTokenContext = createContextEx();
 
 // src/Contexts/MapboxAccessToken/Provider.tsx
-import React4, { useMemo as useMemo6, useState as useState7 } from "react";
+import React4, { useMemo as useMemo8, useState as useState4 } from "react";
 var MapboxAccessTokenProvider = /* @__PURE__ */ __name(({ defaultAccessToken, ...props }) => {
-  const [accessToken, setAccessToken] = useState7();
-  const value = useMemo6(() => ({
+  const [accessToken, setAccessToken] = useState4();
+  const value = useMemo8(() => ({
     accessToken: accessToken ?? defaultAccessToken,
     provided: true,
     setAccessToken
@@ -1120,7 +1114,7 @@ import React8 from "react";
 // src/Components/MapBox.tsx
 import "mapbox-gl/dist/mapbox-gl.css";
 import { Map } from "mapbox-gl";
-import React5, { useEffect as useEffect7, useRef, useState as useState8 } from "react";
+import React5, { useEffect as useEffect5, useRef, useState as useState5 } from "react";
 
 // src/lib/MapStyle.ts
 var MapStyle;
@@ -1135,14 +1129,14 @@ var MapStyle;
 
 // src/Components/MapBox.tsx
 var MapBox = /* @__PURE__ */ __name(({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {
-  const [map, setMap] = useState8();
+  const [map, setMap] = useState5();
   const mapContainerRef = useRef(null);
   const mapCanvasRef = useRef(null);
   const { setMapBoxInstance, map: mapInstance } = useMapBoxInstance();
   const { mapSettings } = useMapSettings();
   const activeResize = mapSettings?.dynamicMapResize.value;
   useDynamicMapResize(mapContainerRef, mapCanvasRef, mapInstance, activeResize);
-  useEffect7(() => {
+  useEffect5(() => {
     if (mapSettings?.preferDark?.value === true) {
       map?.setStyle(`mapbox://styles/${MapStyle.Dark}`);
     } else {
@@ -1153,7 +1147,7 @@ var MapBox = /* @__PURE__ */ __name(({ accessToken, darkMode = false, options, z
     darkMode,
     mapSettings
   ]);
-  useEffect7(() => {
+  useEffect5(() => {
     const map2 = new Map({
       accessToken,
       center: [
@@ -1268,7 +1262,7 @@ var AnimatedHeatMap = /* @__PURE__ */ __name(({ accessToken, animatedFeatureSets
   const theme = useTheme2();
   const { staticMapColor, lowUsageColor, highUsageColor } = heatMapColorProps || {};
   const localStaticMapColor = staticMapColor ?? theme.palette.primary.light;
-  const [layers] = useState9(() => [
+  const [layers] = useState6(() => [
     LocationHeatMapLayerBuilderAnimated(localStaticMapColor, 0, "static"),
     LocationHeatMapLayerBuilderAnimated(lowUsageColor || localStaticMapColor, 0, "animated"),
     LocationHeatMapLayerBuilderAnimated(highUsageColor || darken(localStaticMapColor, 0.9), 1, "animated")
@@ -1400,12 +1394,30 @@ fitToPoints2.value = true;
 
 // src/Components/LayerAnimator.tsx
 import { useInterval } from "@xylabs/react-shared";
-import React13, { useCallback, useEffect as useEffect8, useRef as useRef2, useState as useState10 } from "react";
+import React13, { useCallback, useEffect as useEffect6, useMemo as useMemo9, useRef as useRef2 } from "react";
 var timeIncrement = 2e3;
 var animatedLayerCount = 3;
 var LayerAnimator = /* @__PURE__ */ __name(({ animateLayers, children, layers, layersInitialized, map }) => {
-  const [fillLayers, setFillLayers] = useState10([]);
   const layerIndexQueue = useRef2([]);
+  const fillLayers = useMemo9(() => {
+    if (layers?.length && map && layersInitialized) {
+      return 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;
+      });
+    }
+    return [];
+  }, [
+    layers,
+    layersInitialized,
+    map
+  ]);
   const incrementQueue = useCallback((index) => {
     if (fillLayers[index]) {
       layerIndexQueue.current.push(index);
@@ -1453,24 +1465,6 @@ var LayerAnimator = /* @__PURE__ */ __name(({ animateLayers, children, layers, l
     map,
     unshiftQueue
   ]);
-  useEffect8(() => {
-    if (layers?.length && map && layersInitialized) {
-      setFillLayers(layers.filter((layer) => {
-        const fillLayer = layer.id.startsWith("location-fill");
-        if (fillLayer) {
-          map.setPaintProperty(layer.id, "fill-opacity-transition", {
-            delay: 0,
-            duration: 4e3
-          });
-        }
-        return fillLayer;
-      }));
-    }
-  }, [
-    layers,
-    layersInitialized,
-    map
-  ]);
   const queueLayerAnimation = useCallback(() => {
     const animatedLayers = [];
     for (let i = 0; i < animatedLayerCount; i++) {
@@ -1489,7 +1483,7 @@ var LayerAnimator = /* @__PURE__ */ __name(({ animateLayers, children, layers, l
     getNextLayer,
     layerAnimateWorker
   ]);
-  useEffect8(() => {
+  useEffect6(() => {
     if (animateLayers && layersInitialized && map && fillLayers.length > 0) {
       queueLayerAnimation();
     }
@@ -1511,9 +1505,8 @@ var LayerAnimator = /* @__PURE__ */ __name(({ animateLayers, children, layers, l
 // src/Components/MapBoxPoints.tsx
 import { Alert as Alert2 } from "@mui/material";
 import { FlexCol as FlexCol6 } from "@xylabs/react-flexbox";
-import React14, { useCallback as useCallback2, useEffect as useEffect9, useState as useState11 } from "react";
+import React14, { useCallback as useCallback2, useEffect as useEffect7, useMemo as useMemo10 } from "react";
 var MapboxPointsFlexBox = /* @__PURE__ */ __name(({ accessToken, features, fitToPointsPadding = 20, layers, zoom, ...props }) => {
-  const [mapPoints, setMapPoints] = useState11();
   const { mapSettings } = useMapSettings();
   const { map, mapInitialized } = useMapBoxInstance();
   const customFitToBoundsOptions = /* @__PURE__ */ __name((zoom2) => {
@@ -1524,6 +1517,17 @@ var MapboxPointsFlexBox = /* @__PURE__ */ __name(({ accessToken, features, fitTo
     }
     return {};
   }, "customFitToBoundsOptions");
+  const mapPoints = useMemo10(() => {
+    return map && features?.length ? new MapPoints({
+      features,
+      map,
+      zoom
+    }) : void 0;
+  }, [
+    map,
+    features,
+    zoom
+  ]);
   const updateFeatures = useCallback2(() => {
     if (mapPoints?.isMapReady && features?.length && layers) for (const layer of layers) {
       mapPoints.initializeMapSource(layer);
@@ -1570,20 +1574,7 @@ var MapboxPointsFlexBox = /* @__PURE__ */ __name(({ accessToken, features, fitTo
     updateFeatures,
     zoom
   ]);
-  useEffect9(() => {
-    if (map && features?.length) {
-      setMapPoints(new MapPoints({
-        features,
-        map,
-        zoom
-      }));
-    }
-  }, [
-    map,
-    features,
-    zoom
-  ]);
-  useEffect9(() => {
+  useEffect7(() => {
     if (mapInitialized) {
       updateMapSetup();
       reInitializeMap();