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

package/dist/node/Components/Legends/index.js

@@ -1,23 +1,26 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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;
+// src/Components/Legends/ColorGradient.tsx
+import { Typography, useTheme } from "@mui/material";
+import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ColorGradientLegend = ({ startColor, endColor, startLabel, endLabel, heading, textColor, ...props }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(FlexCol, { ...props, children: [
+    /* @__PURE__ */ jsx(Typography, { mb: theme.spacing(0.25), color: textColor, variant: "caption", textAlign: "center", children: heading }),
+    /* @__PURE__ */ jsx(FlexCol, { flexGrow: 1, alignItems: "stretch", paddingX: theme.spacing(1), mb: theme.spacing(0.25), children: /* @__PURE__ */ jsx(
+      FlexCol,
+      {
+        height: theme.spacing(0.75),
+        border: `1px solid ${textColor}`,
+        sx: { backgroundImage: `linear-gradient(to right, ${startColor},${endColor})` }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(FlexRow, { flexGrow: 1, justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsx(Typography, { color: textColor, variant: "caption", children: startLabel }),
+      /* @__PURE__ */ jsx(Typography, { color: textColor, variant: "caption", children: endLabel })
+    ] })
+  ] });
+};
+export {
+  ColorGradientLegend
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var Legends_exports = {};
-module.exports = __toCommonJS(Legends_exports);
-__reExport(Legends_exports, require("./ColorGradient"), module.exports);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ...require("./ColorGradient")
-});
 //# sourceMappingURL=index.js.map

package/dist/node/Components/Legends/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Components/Legends/index.ts"],"sourcesContent":["export * from './ColorGradient'\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,4BAAc,4BAAd;","names":[]}
+{"version":3,"sources":["../../../../src/Components/Legends/ColorGradient.tsx"],"sourcesContent":["import { Typography, useTheme } from '@mui/material'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\n\nimport { ColorGradientLegendProps } from '../../Colors'\n\nconst ColorGradientLegend: React.FC<ColorGradientLegendProps> = ({ startColor, endColor, startLabel, endLabel, heading, textColor, ...props }) => {\n  const theme = useTheme()\n\n  return (\n    <FlexCol {...props}>\n      <Typography mb={theme.spacing(0.25)} color={textColor} variant=\"caption\" textAlign=\"center\">\n        {heading}\n      </Typography>\n      <FlexCol flexGrow={1} alignItems=\"stretch\" paddingX={theme.spacing(1)} mb={theme.spacing(0.25)}>\n        <FlexCol\n          height={theme.spacing(0.75)}\n          border={`1px solid ${textColor}`}\n          sx={{ backgroundImage: `linear-gradient(to right, ${startColor},${endColor})` }}\n        />\n      </FlexCol>\n      <FlexRow flexGrow={1} justifyContent=\"space-between\">\n        <Typography color={textColor} variant=\"caption\">\n          {startLabel}\n        </Typography>\n        <Typography color={textColor} variant=\"caption\">\n          {endLabel}\n        </Typography>\n      </FlexRow>\n    </FlexCol>\n  )\n}\n\nexport { ColorGradientLegend }\n"],"mappings":";AAAA,SAAS,YAAY,gBAAgB;AACrC,SAAS,SAAS,eAAe;AAS3B,cAUA,YAVA;AALN,IAAM,sBAA0D,CAAC,EAAE,YAAY,UAAU,YAAY,UAAU,SAAS,WAAW,GAAG,MAAM,MAAM;AAChJ,QAAM,QAAQ,SAAS;AAEvB,SACE,qBAAC,WAAS,GAAG,OACX;AAAA,wBAAC,cAAW,IAAI,MAAM,QAAQ,IAAI,GAAG,OAAO,WAAW,SAAQ,WAAU,WAAU,UAChF,mBACH;AAAA,IACA,oBAAC,WAAQ,UAAU,GAAG,YAAW,WAAU,UAAU,MAAM,QAAQ,CAAC,GAAG,IAAI,MAAM,QAAQ,IAAI,GAC3F;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,MAAM,QAAQ,IAAI;AAAA,QAC1B,QAAQ,aAAa,SAAS;AAAA,QAC9B,IAAI,EAAE,iBAAiB,6BAA6B,UAAU,IAAI,QAAQ,IAAI;AAAA;AAAA,IAChF,GACF;AAAA,IACA,qBAAC,WAAQ,UAAU,GAAG,gBAAe,iBACnC;AAAA,0BAAC,cAAW,OAAO,WAAW,SAAQ,WACnC,sBACH;AAAA,MACA,oBAAC,cAAW,OAAO,WAAW,SAAQ,WACnC,oBACH;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/node/Components/MapBox.cjs

@@ -0,0 +1,140 @@
+"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);
+
+// src/Components/MapBox.tsx
+var MapBox_exports = {};
+__export(MapBox_exports, {
+  MapBox: () => MapBox
+});
+module.exports = __toCommonJS(MapBox_exports);
+var import_mapbox_gl = require("mapbox-gl/dist/mapbox-gl.css");
+var import_mapbox_gl2 = require("mapbox-gl");
+var import_react6 = require("react");
+
+// src/hooks/useDynamicMapResize.tsx
+var import_react = require("react");
+var useDynamicMapResize = (mapContainerRef, mapCanvasRef, mapInstance, active = true) => {
+  const [dependenciesReady, setDependenciesReady] = (0, import_react.useState)(false);
+  const resizer = (0, import_react.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]
+  );
+  (0, import_react.useEffect)(() => {
+    const dependenciesReady2 = !!(active && mapInstance && (mapContainerRef == null ? void 0 : mapContainerRef.current) && mapCanvasRef.current);
+    setDependenciesReady(dependenciesReady2);
+  }, [active, mapCanvasRef, mapContainerRef, mapInstance]);
+  (0, import_react.useEffect)(() => {
+    if (dependenciesReady) {
+      if (mapContainerRef.current) {
+        resizer.observe(mapContainerRef.current);
+      }
+      return () => {
+        resizer.disconnect();
+      };
+    }
+  }, [active, dependenciesReady, mapCanvasRef, mapContainerRef, mapInstance, resizer]);
+};
+
+// src/Contexts/MapBoxInstance/Context.ts
+var import_react2 = require("react");
+var MapBoxInstanceContext = (0, import_react2.createContext)({});
+
+// src/Contexts/MapBoxInstance/useMapBoxInstance.tsx
+var import_assert = require("@xylabs/assert");
+var import_react3 = require("react");
+var useMapBoxInstance = () => {
+  const context = (0, import_react3.useContext)(MapBoxInstanceContext);
+  (0, import_assert.assertEx)("map" in context, "useMapBoxInstance must be used within a MapBoxInstanceContext");
+  return context;
+};
+
+// src/Contexts/MapSettings/Context.ts
+var import_react4 = require("react");
+var MapSettingsContext = (0, import_react4.createContext)({});
+
+// src/Contexts/MapSettings/useMapSettings.tsx
+var import_react5 = require("react");
+var useMapSettings = () => {
+  const context = (0, import_react5.useContext)(MapSettingsContext);
+  return context;
+};
+
+// src/Components/MapBox.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var MapBox = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {
+  const [map, setMap] = (0, import_react6.useState)();
+  const mapContainerRef = (0, import_react6.useRef)(null);
+  const mapCanvasRef = (0, import_react6.useRef)(null);
+  const { setMapBoxInstance, map: mapInstance } = useMapBoxInstance();
+  const { mapSettings } = useMapSettings();
+  const activeResize = mapSettings == null ? void 0 : mapSettings.dynamicMapResize.value;
+  useDynamicMapResize(mapContainerRef, mapCanvasRef, mapInstance, activeResize);
+  (0, import_react6.useEffect)(() => {
+    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]);
+  (0, import_react6.useEffect)(() => {
+    const map2 = new import_mapbox_gl2.Map({
+      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__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: (el) => mapContainerRef.current = el,
+      style: {
+        bottom: 0,
+        left: 0,
+        position: "absolute",
+        right: 0,
+        top: 0,
+        ...props
+      }
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MapBox
+});
+//# sourceMappingURL=MapBox.cjs.map

package/dist/node/Components/MapBox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Components/MapBox.tsx","../../../src/hooks/useDynamicMapResize.tsx","../../../src/Contexts/MapBoxInstance/Context.ts","../../../src/Contexts/MapBoxInstance/useMapBoxInstance.tsx","../../../src/Contexts/MapSettings/Context.ts","../../../src/Contexts/MapSettings/useMapSettings.tsx"],"sourcesContent":["// eslint-disable-next-line import/no-internal-modules\nimport 'mapbox-gl/dist/mapbox-gl.css'\n\nimport { Map, MapboxOptions } from 'mapbox-gl'\nimport { useEffect, useRef, useState } from 'react'\n\nimport { useMapBoxInstance, useMapSettings } from '../Contexts'\nimport { useDynamicMapResize } from '../hooks'\nimport { MapStyle } from '../lib'\n\nexport interface MapBoxProps {\n  accessToken: string\n  darkMode?: boolean\n  options?: Partial<MapboxOptions>\n  zoom?: number\n}\n\nexport const MapBox: React.FC<MapBoxProps> = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {\n  const [map, setMap] = useState<Map>()\n  const mapContainerRef = useRef<HTMLDivElement | null>(null)\n  const mapCanvasRef = useRef<HTMLCanvasElement | null>(null)\n  const { setMapBoxInstance, map: mapInstance } = useMapBoxInstance()\n  const { mapSettings } = useMapSettings()\n\n  const activeResize = mapSettings?.dynamicMapResize.value\n  useDynamicMapResize(mapContainerRef, mapCanvasRef, mapInstance, activeResize)\n\n  useEffect(() => {\n    if (mapSettings?.preferDark?.value === true) {\n      map?.setStyle(`mapbox://styles/${MapStyle.Dark}`)\n    } else {\n      map?.setStyle(`mapbox://styles/${darkMode ? MapStyle.Dark : MapStyle.Light}`)\n    }\n  }, [map, darkMode, mapSettings])\n\n  useEffect(() => {\n    const map = new Map({\n      accessToken,\n      center: [0, 0],\n      container: mapContainerRef.current ?? '',\n      style: `mapbox://styles/${MapStyle.Light}`,\n      zoom,\n      ...options,\n    })\n\n    // Allow external components to control the map\n    setMapBoxInstance?.(map)\n    setMap(map)\n\n    // save the map canvas ref to help with resizing\n    mapCanvasRef.current = document.querySelector('.mapboxgl-canvas')\n\n    console.log('Created Map')\n\n    return () => {\n      console.log('Removing Map')\n      map.remove()\n    }\n  }, [mapContainerRef, setMap, options, zoom, setMapBoxInstance, accessToken])\n\n  return (\n    <div\n      ref={(el) => (mapContainerRef.current = el)}\n      style={{\n        bottom: 0,\n        left: 0,\n        position: 'absolute',\n        right: 0,\n        top: 0,\n        ...props,\n      }}\n    />\n  )\n}\n","import { Map } from 'mapbox-gl'\nimport { MutableRefObject, useEffect, useMemo, useState } from 'react'\n\n/**\n * Inspired by - https://bl.ocks.org/danswick/fc56f37c10d40be62e4feac5984250d2\n */\nexport const useDynamicMapResize = (\n  mapContainerRef: MutableRefObject<HTMLDivElement | null>,\n  mapCanvasRef: MutableRefObject<HTMLCanvasElement | null>,\n  mapInstance?: Map,\n  active = true,\n) => {\n  const [dependenciesReady, setDependenciesReady] = useState(false)\n\n  const resizer = useMemo(\n    () =>\n      new ResizeObserver(() => {\n        const width = mapContainerRef.current?.getBoundingClientRect().width\n        if (width && mapCanvasRef.current) {\n          mapCanvasRef.current.style.width = `${width}px`\n          // setTimeout allows for the smoothest animation (vs requestAnimationFrame, debouce, etc)\n          // likely because it lets mapbox resize once when the event loop is ready?\n          setTimeout(() => mapInstance?.resize())\n        }\n      }),\n    [mapCanvasRef, mapContainerRef, mapInstance],\n  )\n\n  useEffect(() => {\n    const dependenciesReady = !!(active && mapInstance && mapContainerRef?.current && mapCanvasRef.current)\n    setDependenciesReady(dependenciesReady)\n  }, [active, mapCanvasRef, mapContainerRef, mapInstance])\n\n  useEffect(() => {\n    if (dependenciesReady) {\n      if (mapContainerRef.current) {\n        resizer.observe(mapContainerRef.current)\n      }\n\n      return () => {\n        resizer.disconnect()\n      }\n    }\n  }, [active, dependenciesReady, mapCanvasRef, mapContainerRef, mapInstance, resizer])\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 { 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"],"mappings":"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","names":["import_mapbox_gl","import_react","dependenciesReady","import_react","import_react","import_react","import_react","map"]}

package/dist/node/Components/MapBox.d.cts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import 'mapbox-gl/dist/mapbox-gl.css';
+import { MapboxOptions } from 'mapbox-gl';
+export interface MapBoxProps {
+    accessToken: string;
+    darkMode?: boolean;
+    options?: Partial<MapboxOptions>;
+    zoom?: number;
+}
+export declare const MapBox: React.FC<MapBoxProps>;
+//# sourceMappingURL=MapBox.d.ts.map

package/dist/node/Components/MapBox.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapBox.d.ts","sourceRoot":"","sources":["../../../src/Components/MapBox.tsx"],"names":[],"mappings":";AACA,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAO,aAAa,EAAE,MAAM,WAAW,CAAA;AAO9C,MAAM,WAAW,WAAW;IAC1B,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;IAChC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwDxC,CAAA"}

package/dist/node/Components/MapBox.js

@@ -1,58 +1,91 @@
-"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 });
+// src/Components/MapBox.tsx
+import "mapbox-gl/dist/mapbox-gl.css";
+import { Map } from "mapbox-gl";
+import { useEffect as useEffect2, useRef, useState as useState2 } 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/Contexts/MapBoxInstance/Context.ts
+import { createContext } from "react";
+var MapBoxInstanceContext = createContext({});
+
+// src/Contexts/MapBoxInstance/useMapBoxInstance.tsx
+import { assertEx } from "@xylabs/assert";
+import { useContext } from "react";
+var useMapBoxInstance = () => {
+  const context = useContext(MapBoxInstanceContext);
+  assertEx("map" in context, "useMapBoxInstance must be used within a MapBoxInstanceContext");
+  return context;
 };
-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;
+
+// src/Contexts/MapSettings/Context.ts
+import { createContext as createContext2 } from "react";
+var MapSettingsContext = createContext2({});
+
+// src/Contexts/MapSettings/useMapSettings.tsx
+import { useContext as useContext2 } from "react";
+var useMapSettings = () => {
+  const context = useContext2(MapSettingsContext);
+  return context;
 };
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var MapBox_exports = {};
-__export(MapBox_exports, {
-  MapBox: () => MapBox
-});
-module.exports = __toCommonJS(MapBox_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_mapbox_gl = require("mapbox-gl/dist/mapbox-gl.css");
-var import_mapbox_gl2 = require("mapbox-gl");
-var import_react = require("react");
-var import_Contexts = require("../Contexts");
-var import_hooks = require("../hooks");
-var import_lib = require("../lib");
-const MapBox = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {
-  const [map, setMap] = (0, import_react.useState)();
-  const mapContainerRef = (0, import_react.useRef)(null);
-  const mapCanvasRef = (0, import_react.useRef)(null);
-  const { setMapBoxInstance, map: mapInstance } = (0, import_Contexts.useMapBoxInstance)();
-  const { mapSettings } = (0, import_Contexts.useMapSettings)();
-  const activeResize = mapSettings?.dynamicMapResize.value;
-  (0, import_hooks.useDynamicMapResize)(mapContainerRef, mapCanvasRef, mapInstance, activeResize);
-  (0, import_react.useEffect)(() => {
-    if (mapSettings?.preferDark?.value === true) {
-      map?.setStyle(`mapbox://styles/${import_lib.MapStyle.Dark}`);
+
+// src/Components/MapBox.tsx
+import { jsx } from "react/jsx-runtime";
+var MapBox = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {
+  const [map, setMap] = useState2();
+  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);
+  useEffect2(() => {
+    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?.setStyle(`mapbox://styles/${darkMode ? import_lib.MapStyle.Dark : import_lib.MapStyle.Light}`);
+      map == null ? void 0 : map.setStyle(`mapbox://styles/${darkMode ? "mapbox/dark-v10" /* Dark */ : "mapbox/light-v10" /* Light */}`);
     }
   }, [map, darkMode, mapSettings]);
-  (0, import_react.useEffect)(() => {
-    const map2 = new import_mapbox_gl2.Map({
+  useEffect2(() => {
+    const map2 = new Map({
       accessToken,
       center: [0, 0],
       container: mapContainerRef.current ?? "",
-      style: `mapbox://styles/${import_lib.MapStyle.Light}`,
+      style: `mapbox://styles/${"mapbox/light-v10" /* Light */}`,
       zoom,
       ...options
     });
-    setMapBoxInstance?.(map2);
+    setMapBoxInstance == null ? void 0 : setMapBoxInstance(map2);
     setMap(map2);
     mapCanvasRef.current = document.querySelector(".mapboxgl-canvas");
     console.log("Created Map");
@@ -61,7 +94,7 @@ const MapBox = ({ accessToken, darkMode = false, options, zoom = 2, ...props })
       map2.remove();
     };
   }, [mapContainerRef, setMap, options, zoom, setMapBoxInstance, accessToken]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       ref: (el) => mapContainerRef.current = el,
@@ -76,8 +109,7 @@ const MapBox = ({ accessToken, darkMode = false, options, zoom = 2, ...props })
     }
   );
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   MapBox
-});
+};
 //# sourceMappingURL=MapBox.js.map

package/dist/node/Components/MapBox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Components/MapBox.tsx"],"sourcesContent":["// eslint-disable-next-line import/no-internal-modules\nimport 'mapbox-gl/dist/mapbox-gl.css'\n\nimport { Map, MapboxOptions } from 'mapbox-gl'\nimport { useEffect, useRef, useState } from 'react'\n\nimport { useMapBoxInstance, useMapSettings } from '../Contexts'\nimport { useDynamicMapResize } from '../hooks'\nimport { MapStyle } from '../lib'\n\nexport interface MapBoxProps {\n  accessToken: string\n  darkMode?: boolean\n  options?: Partial<MapboxOptions>\n  zoom?: number\n}\n\nexport const MapBox: React.FC<MapBoxProps> = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {\n  const [map, setMap] = useState<Map>()\n  const mapContainerRef = useRef<HTMLDivElement | null>(null)\n  const mapCanvasRef = useRef<HTMLCanvasElement | null>(null)\n  const { setMapBoxInstance, map: mapInstance } = useMapBoxInstance()\n  const { mapSettings } = useMapSettings()\n\n  const activeResize = mapSettings?.dynamicMapResize.value\n  useDynamicMapResize(mapContainerRef, mapCanvasRef, mapInstance, activeResize)\n\n  useEffect(() => {\n    if (mapSettings?.preferDark?.value === true) {\n      map?.setStyle(`mapbox://styles/${MapStyle.Dark}`)\n    } else {\n      map?.setStyle(`mapbox://styles/${darkMode ? MapStyle.Dark : MapStyle.Light}`)\n    }\n  }, [map, darkMode, mapSettings])\n\n  useEffect(() => {\n    const map = new Map({\n      accessToken,\n      center: [0, 0],\n      container: mapContainerRef.current ?? '',\n      style: `mapbox://styles/${MapStyle.Light}`,\n      zoom,\n      ...options,\n    })\n\n    // Allow external components to control the map\n    setMapBoxInstance?.(map)\n    setMap(map)\n\n    // save the map canvas ref to help with resizing\n    mapCanvasRef.current = document.querySelector('.mapboxgl-canvas')\n\n    console.log('Created Map')\n\n    return () => {\n      console.log('Removing Map')\n      map.remove()\n    }\n  }, [mapContainerRef, setMap, options, zoom, setMapBoxInstance, accessToken])\n\n  return (\n    <div\n      ref={(el) => (mapContainerRef.current = el)}\n      style={{\n        bottom: 0,\n        left: 0,\n        position: 'absolute',\n        right: 0,\n        top: 0,\n        ...props,\n      }}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6DI;AA5DJ,uBAAO;AAEP,IAAAA,oBAAmC;AACnC,mBAA4C;AAE5C,sBAAkD;AAClD,mBAAoC;AACpC,iBAAyB;AASlB,MAAM,SAAgC,CAAC,EAAE,aAAa,WAAW,OAAO,SAAS,OAAO,GAAG,GAAG,MAAM,MAAM;AAC/G,QAAM,CAAC,KAAK,MAAM,QAAI,uBAAc;AACpC,QAAM,sBAAkB,qBAA8B,IAAI;AAC1D,QAAM,mBAAe,qBAAiC,IAAI;AAC1D,QAAM,EAAE,mBAAmB,KAAK,YAAY,QAAI,mCAAkB;AAClE,QAAM,EAAE,YAAY,QAAI,gCAAe;AAEvC,QAAM,eAAe,aAAa,iBAAiB;AACnD,wCAAoB,iBAAiB,cAAc,aAAa,YAAY;AAE5E,8BAAU,MAAM;AACd,QAAI,aAAa,YAAY,UAAU,MAAM;AAC3C,WAAK,SAAS,mBAAmB,oBAAS,IAAI,EAAE;AAAA,IAClD,OAAO;AACL,WAAK,SAAS,mBAAmB,WAAW,oBAAS,OAAO,oBAAS,KAAK,EAAE;AAAA,IAC9E;AAAA,EACF,GAAG,CAAC,KAAK,UAAU,WAAW,CAAC;AAE/B,8BAAU,MAAM;AACd,UAAMC,OAAM,IAAI,sBAAI;AAAA,MAClB;AAAA,MACA,QAAQ,CAAC,GAAG,CAAC;AAAA,MACb,WAAW,gBAAgB,WAAW;AAAA,MACtC,OAAO,mBAAmB,oBAAS,KAAK;AAAA,MACxC;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAGD,wBAAoBA,IAAG;AACvB,WAAOA,IAAG;AAGV,iBAAa,UAAU,SAAS,cAAc,kBAAkB;AAEhE,YAAQ,IAAI,aAAa;AAEzB,WAAO,MAAM;AACX,cAAQ,IAAI,cAAc;AAC1B,MAAAA,KAAI,OAAO;AAAA,IACb;AAAA,EACF,GAAG,CAAC,iBAAiB,QAAQ,SAAS,MAAM,mBAAmB,WAAW,CAAC;AAE3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,CAAC,OAAQ,gBAAgB,UAAU;AAAA,MACxC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAK;AAAA,QACL,GAAG;AAAA,MACL;AAAA;AAAA,EACF;AAEJ;","names":["import_mapbox_gl","map"]}
+{"version":3,"sources":["../../../src/Components/MapBox.tsx","../../../src/hooks/useDynamicMapResize.tsx","../../../src/Contexts/MapBoxInstance/Context.ts","../../../src/Contexts/MapBoxInstance/useMapBoxInstance.tsx","../../../src/Contexts/MapSettings/Context.ts","../../../src/Contexts/MapSettings/useMapSettings.tsx"],"sourcesContent":["// eslint-disable-next-line import/no-internal-modules\nimport 'mapbox-gl/dist/mapbox-gl.css'\n\nimport { Map, MapboxOptions } from 'mapbox-gl'\nimport { useEffect, useRef, useState } from 'react'\n\nimport { useMapBoxInstance, useMapSettings } from '../Contexts'\nimport { useDynamicMapResize } from '../hooks'\nimport { MapStyle } from '../lib'\n\nexport interface MapBoxProps {\n  accessToken: string\n  darkMode?: boolean\n  options?: Partial<MapboxOptions>\n  zoom?: number\n}\n\nexport const MapBox: React.FC<MapBoxProps> = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {\n  const [map, setMap] = useState<Map>()\n  const mapContainerRef = useRef<HTMLDivElement | null>(null)\n  const mapCanvasRef = useRef<HTMLCanvasElement | null>(null)\n  const { setMapBoxInstance, map: mapInstance } = useMapBoxInstance()\n  const { mapSettings } = useMapSettings()\n\n  const activeResize = mapSettings?.dynamicMapResize.value\n  useDynamicMapResize(mapContainerRef, mapCanvasRef, mapInstance, activeResize)\n\n  useEffect(() => {\n    if (mapSettings?.preferDark?.value === true) {\n      map?.setStyle(`mapbox://styles/${MapStyle.Dark}`)\n    } else {\n      map?.setStyle(`mapbox://styles/${darkMode ? MapStyle.Dark : MapStyle.Light}`)\n    }\n  }, [map, darkMode, mapSettings])\n\n  useEffect(() => {\n    const map = new Map({\n      accessToken,\n      center: [0, 0],\n      container: mapContainerRef.current ?? '',\n      style: `mapbox://styles/${MapStyle.Light}`,\n      zoom,\n      ...options,\n    })\n\n    // Allow external components to control the map\n    setMapBoxInstance?.(map)\n    setMap(map)\n\n    // save the map canvas ref to help with resizing\n    mapCanvasRef.current = document.querySelector('.mapboxgl-canvas')\n\n    console.log('Created Map')\n\n    return () => {\n      console.log('Removing Map')\n      map.remove()\n    }\n  }, [mapContainerRef, setMap, options, zoom, setMapBoxInstance, accessToken])\n\n  return (\n    <div\n      ref={(el) => (mapContainerRef.current = el)}\n      style={{\n        bottom: 0,\n        left: 0,\n        position: 'absolute',\n        right: 0,\n        top: 0,\n        ...props,\n      }}\n    />\n  )\n}\n","import { Map } from 'mapbox-gl'\nimport { MutableRefObject, useEffect, useMemo, useState } from 'react'\n\n/**\n * Inspired by - https://bl.ocks.org/danswick/fc56f37c10d40be62e4feac5984250d2\n */\nexport const useDynamicMapResize = (\n  mapContainerRef: MutableRefObject<HTMLDivElement | null>,\n  mapCanvasRef: MutableRefObject<HTMLCanvasElement | null>,\n  mapInstance?: Map,\n  active = true,\n) => {\n  const [dependenciesReady, setDependenciesReady] = useState(false)\n\n  const resizer = useMemo(\n    () =>\n      new ResizeObserver(() => {\n        const width = mapContainerRef.current?.getBoundingClientRect().width\n        if (width && mapCanvasRef.current) {\n          mapCanvasRef.current.style.width = `${width}px`\n          // setTimeout allows for the smoothest animation (vs requestAnimationFrame, debouce, etc)\n          // likely because it lets mapbox resize once when the event loop is ready?\n          setTimeout(() => mapInstance?.resize())\n        }\n      }),\n    [mapCanvasRef, mapContainerRef, mapInstance],\n  )\n\n  useEffect(() => {\n    const dependenciesReady = !!(active && mapInstance && mapContainerRef?.current && mapCanvasRef.current)\n    setDependenciesReady(dependenciesReady)\n  }, [active, mapCanvasRef, mapContainerRef, mapInstance])\n\n  useEffect(() => {\n    if (dependenciesReady) {\n      if (mapContainerRef.current) {\n        resizer.observe(mapContainerRef.current)\n      }\n\n      return () => {\n        resizer.disconnect()\n      }\n    }\n  }, [active, dependenciesReady, mapCanvasRef, mapContainerRef, mapInstance, resizer])\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 { 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"],"mappings":"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","names":["useEffect","useState","dependenciesReady","createContext","useContext","useContext","useState","useEffect","map"]}

package/dist/node/Components/MapBoxHeat.cjs

@@ -0,0 +1,188 @@
+"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);
+
+// src/Components/MapBoxHeat.tsx
+var MapBoxHeat_exports = {};
+__export(MapBoxHeat_exports, {
+  MapboxHeatFlexBox: () => MapboxHeatFlexBox
+});
+module.exports = __toCommonJS(MapBoxHeat_exports);
+var import_react_flexbox2 = require("@xylabs/react-flexbox");
+
+// src/Components/MapBox.tsx
+var import_mapbox_gl = require("mapbox-gl/dist/mapbox-gl.css");
+var import_mapbox_gl2 = require("mapbox-gl");
+var import_react6 = require("react");
+
+// src/hooks/useDynamicMapResize.tsx
+var import_react = require("react");
+var useDynamicMapResize = (mapContainerRef, mapCanvasRef, mapInstance, active = true) => {
+  const [dependenciesReady, setDependenciesReady] = (0, import_react.useState)(false);
+  const resizer = (0, import_react.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]
+  );
+  (0, import_react.useEffect)(() => {
+    const dependenciesReady2 = !!(active && mapInstance && (mapContainerRef == null ? void 0 : mapContainerRef.current) && mapCanvasRef.current);
+    setDependenciesReady(dependenciesReady2);
+  }, [active, mapCanvasRef, mapContainerRef, mapInstance]);
+  (0, import_react.useEffect)(() => {
+    if (dependenciesReady) {
+      if (mapContainerRef.current) {
+        resizer.observe(mapContainerRef.current);
+      }
+      return () => {
+        resizer.disconnect();
+      };
+    }
+  }, [active, dependenciesReady, mapCanvasRef, mapContainerRef, mapInstance, resizer]);
+};
+
+// src/Contexts/MapBoxInstance/Context.ts
+var import_react2 = require("react");
+var MapBoxInstanceContext = (0, import_react2.createContext)({});
+
+// src/Contexts/MapBoxInstance/useMapBoxInstance.tsx
+var import_assert = require("@xylabs/assert");
+var import_react3 = require("react");
+var useMapBoxInstance = () => {
+  const context = (0, import_react3.useContext)(MapBoxInstanceContext);
+  (0, import_assert.assertEx)("map" in context, "useMapBoxInstance must be used within a MapBoxInstanceContext");
+  return context;
+};
+
+// src/Contexts/MapSettings/Context.ts
+var import_react4 = require("react");
+var MapSettingsContext = (0, import_react4.createContext)({});
+
+// src/Contexts/MapSettings/useMapSettings.tsx
+var import_react5 = require("react");
+var useMapSettings = () => {
+  const context = (0, import_react5.useContext)(MapSettingsContext);
+  return context;
+};
+
+// src/Components/MapBox.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var MapBox = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {
+  const [map, setMap] = (0, import_react6.useState)();
+  const mapContainerRef = (0, import_react6.useRef)(null);
+  const mapCanvasRef = (0, import_react6.useRef)(null);
+  const { setMapBoxInstance, map: mapInstance } = useMapBoxInstance();
+  const { mapSettings } = useMapSettings();
+  const activeResize = mapSettings == null ? void 0 : mapSettings.dynamicMapResize.value;
+  useDynamicMapResize(mapContainerRef, mapCanvasRef, mapInstance, activeResize);
+  (0, import_react6.useEffect)(() => {
+    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]);
+  (0, import_react6.useEffect)(() => {
+    const map2 = new import_mapbox_gl2.Map({
+      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__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: (el) => mapContainerRef.current = el,
+      style: {
+        bottom: 0,
+        left: 0,
+        position: "absolute",
+        right: 0,
+        top: 0,
+        ...props
+      }
+    }
+  );
+};
+
+// src/Components/MapSettingsComponents/Setting.tsx
+var import_material = require("@mui/material");
+var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsx)(import_material.FormControlLabel, { label: setting == null ? void 0 : setting.label, control: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material.Switch, { checked: setting == null ? void 0 : setting.value, onChange: onLocalChange, ...props }) });
+};
+
+// src/Components/MapSettingsComponents/SettingsBox.tsx
+var import_material2 = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react_app_settings = require("@xyo-network/react-app-settings");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var MapSettingsBox = ({ developerMode, ...props }) => {
+  const { mapSettings } = useMapSettings();
+  const { developerMode: devModeFromContext } = (0, import_react_app_settings.useAppSettings)();
+  const resolveDeveloperMode = developerMode ?? devModeFromContext;
+  return mapSettings && resolveDeveloperMode ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_flexbox.FlexGrowRow, { bottom: 36, left: 10, position: "absolute", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_flexbox.FlexRow, { paddingX: 2, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Paper, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Stack, { direction: "row", spacing: 1, marginX: 1, children: Object.keys(mapSettings).map((key, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MapSettingSwitch, { field: mapSettings[key].field, developerMode }, index);
+  }) }) }) }) }) : null;
+};
+
+// src/Components/MapBoxHeat.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var MapboxHeatFlexBox = ({ accessToken, children, mapBoxOptions, zoom, legend, developerMode, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_flexbox2.FlexCol, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MapBox, { accessToken, options: mapBoxOptions, zoom }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MapSettingsBox, { developerMode }),
+    legend,
+    children
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MapboxHeatFlexBox
+});
+//# sourceMappingURL=MapBoxHeat.cjs.map

package/dist/node/Components/MapBoxHeat.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Components/MapBoxHeat.tsx","../../../src/Components/MapBox.tsx","../../../src/hooks/useDynamicMapResize.tsx","../../../src/Contexts/MapBoxInstance/Context.ts","../../../src/Contexts/MapBoxInstance/useMapBoxInstance.tsx","../../../src/Contexts/MapSettings/Context.ts","../../../src/Contexts/MapSettings/useMapSettings.tsx","../../../src/Components/MapSettingsComponents/Setting.tsx","../../../src/Components/MapSettingsComponents/SettingsBox.tsx"],"sourcesContent":["import { FlexCol } from '@xylabs/react-flexbox'\n\nimport { MapboxFlexBoxProps } from '../lib'\nimport { MapBox } from './MapBox'\nimport { MapSettingsBox } from './MapSettingsComponents'\n\nexport const MapboxHeatFlexBox: React.FC<MapboxFlexBoxProps> = ({ accessToken, children, mapBoxOptions, zoom, legend, developerMode, ...props }) => {\n  return (\n    <FlexCol {...props}>\n      <MapBox accessToken={accessToken} options={mapBoxOptions} zoom={zoom} />\n      <MapSettingsBox developerMode={developerMode} />\n      {legend}\n      {children}\n    </FlexCol>\n  )\n}\n","// eslint-disable-next-line import/no-internal-modules\nimport 'mapbox-gl/dist/mapbox-gl.css'\n\nimport { Map, MapboxOptions } from 'mapbox-gl'\nimport { useEffect, useRef, useState } from 'react'\n\nimport { useMapBoxInstance, useMapSettings } from '../Contexts'\nimport { useDynamicMapResize } from '../hooks'\nimport { MapStyle } from '../lib'\n\nexport interface MapBoxProps {\n  accessToken: string\n  darkMode?: boolean\n  options?: Partial<MapboxOptions>\n  zoom?: number\n}\n\nexport const MapBox: React.FC<MapBoxProps> = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {\n  const [map, setMap] = useState<Map>()\n  const mapContainerRef = useRef<HTMLDivElement | null>(null)\n  const mapCanvasRef = useRef<HTMLCanvasElement | null>(null)\n  const { setMapBoxInstance, map: mapInstance } = useMapBoxInstance()\n  const { mapSettings } = useMapSettings()\n\n  const activeResize = mapSettings?.dynamicMapResize.value\n  useDynamicMapResize(mapContainerRef, mapCanvasRef, mapInstance, activeResize)\n\n  useEffect(() => {\n    if (mapSettings?.preferDark?.value === true) {\n      map?.setStyle(`mapbox://styles/${MapStyle.Dark}`)\n    } else {\n      map?.setStyle(`mapbox://styles/${darkMode ? MapStyle.Dark : MapStyle.Light}`)\n    }\n  }, [map, darkMode, mapSettings])\n\n  useEffect(() => {\n    const map = new Map({\n      accessToken,\n      center: [0, 0],\n      container: mapContainerRef.current ?? '',\n      style: `mapbox://styles/${MapStyle.Light}`,\n      zoom,\n      ...options,\n    })\n\n    // Allow external components to control the map\n    setMapBoxInstance?.(map)\n    setMap(map)\n\n    // save the map canvas ref to help with resizing\n    mapCanvasRef.current = document.querySelector('.mapboxgl-canvas')\n\n    console.log('Created Map')\n\n    return () => {\n      console.log('Removing Map')\n      map.remove()\n    }\n  }, [mapContainerRef, setMap, options, zoom, setMapBoxInstance, accessToken])\n\n  return (\n    <div\n      ref={(el) => (mapContainerRef.current = el)}\n      style={{\n        bottom: 0,\n        left: 0,\n        position: 'absolute',\n        right: 0,\n        top: 0,\n        ...props,\n      }}\n    />\n  )\n}\n","import { Map } from 'mapbox-gl'\nimport { MutableRefObject, useEffect, useMemo, useState } from 'react'\n\n/**\n * Inspired by - https://bl.ocks.org/danswick/fc56f37c10d40be62e4feac5984250d2\n */\nexport const useDynamicMapResize = (\n  mapContainerRef: MutableRefObject<HTMLDivElement | null>,\n  mapCanvasRef: MutableRefObject<HTMLCanvasElement | null>,\n  mapInstance?: Map,\n  active = true,\n) => {\n  const [dependenciesReady, setDependenciesReady] = useState(false)\n\n  const resizer = useMemo(\n    () =>\n      new ResizeObserver(() => {\n        const width = mapContainerRef.current?.getBoundingClientRect().width\n        if (width && mapCanvasRef.current) {\n          mapCanvasRef.current.style.width = `${width}px`\n          // setTimeout allows for the smoothest animation (vs requestAnimationFrame, debouce, etc)\n          // likely because it lets mapbox resize once when the event loop is ready?\n          setTimeout(() => mapInstance?.resize())\n        }\n      }),\n    [mapCanvasRef, mapContainerRef, mapInstance],\n  )\n\n  useEffect(() => {\n    const dependenciesReady = !!(active && mapInstance && mapContainerRef?.current && mapCanvasRef.current)\n    setDependenciesReady(dependenciesReady)\n  }, [active, mapCanvasRef, mapContainerRef, mapInstance])\n\n  useEffect(() => {\n    if (dependenciesReady) {\n      if (mapContainerRef.current) {\n        resizer.observe(mapContainerRef.current)\n      }\n\n      return () => {\n        resizer.disconnect()\n      }\n    }\n  }, [active, dependenciesReady, mapCanvasRef, mapContainerRef, mapInstance, resizer])\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 { 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 { FormControlLabel, Switch, SwitchProps } from '@mui/material'\n\nimport { useMapSettings } from '../../Contexts'\n\nexport interface MapSettingSwitchProps extends SwitchProps {\n  developerMode?: boolean\n  field: string\n}\n\nexport const MapSettingSwitch: React.FC<MapSettingSwitchProps> = ({ developerMode, field, ...props }) => {\n  const { mapSettings, setMapSettings } = useMapSettings()\n  const setting = mapSettings?.[field]\n\n  const onLocalChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (setting) {\n      setMapSettings?.((previous) => {\n        previous[setting.field].value = event.target.checked\n        return { ...previous }\n      })\n    }\n  }\n\n  if (setting?.devMode && developerMode === false) {\n    return null\n  }\n\n  return setting?.hidden ? null : (\n    <FormControlLabel label={setting?.label} control={<Switch checked={setting?.value} onChange={onLocalChange} {...props} />} />\n  )\n}\n","import { Paper, Stack } from '@mui/material'\nimport { FlexBoxProps, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'\nimport { useAppSettings } from '@xyo-network/react-app-settings'\n\nimport { useMapSettings } from '../../Contexts'\nimport { MapSettingSwitch } from './Setting'\n\nexport interface MapSettingsBoxProps extends FlexBoxProps {\n  developerMode?: boolean\n}\n\nexport const MapSettingsBox: React.FC<MapSettingsBoxProps> = ({ developerMode, ...props }) => {\n  const { mapSettings } = useMapSettings()\n  const { developerMode: devModeFromContext } = useAppSettings()\n  const resolveDeveloperMode = developerMode ?? devModeFromContext\n\n  return mapSettings && resolveDeveloperMode ? (\n    <FlexGrowRow bottom={36} left={10} position=\"absolute\" {...props}>\n      <FlexRow paddingX={2}>\n        <Paper>\n          <Stack direction=\"row\" spacing={1} marginX={1}>\n            {Object.keys(mapSettings).map((key, index) => {\n              return <MapSettingSwitch key={index} field={mapSettings[key].field} developerMode={developerMode} />\n            })}\n          </Stack>\n        </Paper>\n      </FlexRow>\n    </FlexGrowRow>\n  ) : null\n}\n"],"mappings":"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","names":["import_react_flexbox","import_mapbox_gl","import_react","dependenciesReady","import_react","import_react","import_react","import_react","map","import_jsx_runtime","import_material","import_jsx_runtime","import_jsx_runtime"]}