@xyo-network/react-map 2.26.44

package/dist/esm/hooks/useFindHashes.js

@@ -0,0 +1,13 @@
+import { useNetwork } from '@xyo-network/react-network';
+const parseStaticAnswerHash = () => {
+    return 'c7bbf61f61cfd4a1b2def160c28136fc1d100d39fbdb67b227a2c6e558d9d3a5';
+};
+const useFindHashes = () => {
+    const { network } = useNetwork();
+    const exploreMapHashes = network?.nodes?.find((node) => node.type === 'archivist')?.explorerMapHashes;
+    const animatedAnswerHashes = exploreMapHashes?.animatedAnswerHashes || [];
+    const staticAnswerHash = exploreMapHashes?.staticAnswerHash || parseStaticAnswerHash();
+    return [staticAnswerHash, ...animatedAnswerHashes];
+};
+export { useFindHashes };
+//# sourceMappingURL=useFindHashes.js.map

package/dist/esm/hooks/useFindHashes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFindHashes.js","sourceRoot":"","sources":["../../../src/hooks/useFindHashes.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,4BAA4B,CAAA;AAE3E,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACjC,OAAO,kEAAkE,CAAA;AAC3E,CAAC,CAAA;AAED,MAAM,aAAa,GAAG,GAAG,EAAE;IACzB,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,CAAA;IAChC,MAAM,gBAAgB,GAAI,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,WAAW,CAAwB,EAAE,iBAAiB,CAAA;IAC7H,MAAM,oBAAoB,GAAG,gBAAgB,EAAE,oBAAoB,IAAI,EAAE,CAAA;IACzE,MAAM,gBAAgB,GAAG,gBAAgB,EAAE,gBAAgB,IAAI,qBAAqB,EAAE,CAAA;IAEtF,OAAO,CAAC,gBAAgB,EAAE,GAAG,oBAAoB,CAAC,CAAA;AACpD,CAAC,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/esm/hooks/useHeatMapColors.d.ts

@@ -0,0 +1,6 @@
+import { ColorGradientLegendProps, XyoAnimatedHeatMapColorProps } from '../Colors';
+declare const useHeatMapColors: () => {
+    heatMapColorProps: XyoAnimatedHeatMapColorProps;
+    legendProps: ColorGradientLegendProps;
+};
+export { useHeatMapColors };

package/dist/esm/hooks/useHeatMapColors.js

@@ -0,0 +1,22 @@
+import { useTheme } from '@mui/material';
+const useHeatMapColors = () => {
+    const theme = useTheme();
+    const staticMapColor = '#FFFF75';
+    const highUsageColor = '#FF0000';
+    const heatMapColorProps = {
+        highUsageColor,
+        lowUsageColor: '#FFB3B3',
+        staticMapColor,
+    };
+    const legendProps = {
+        endColor: highUsageColor,
+        endLabel: 'High',
+        heading: 'Network Usage',
+        startColor: staticMapColor,
+        startLabel: 'Low',
+        textColor: theme.palette.common.white,
+    };
+    return { heatMapColorProps, legendProps };
+};
+export { useHeatMapColors };
+//# sourceMappingURL=useHeatMapColors.js.map

package/dist/esm/hooks/useHeatMapColors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHeatMapColors.js","sourceRoot":"","sources":["../../../src/hooks/useHeatMapColors.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAIxC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IAC5B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,cAAc,GAAG,SAAS,CAAA;IAChC,MAAM,cAAc,GAAG,SAAS,CAAA;IAEhC,MAAM,iBAAiB,GAAiC;QACtD,cAAc;QACd,aAAa,EAAE,SAAS;QACxB,cAAc;KACf,CAAA;IAED,MAAM,WAAW,GAA6B;QAC5C,QAAQ,EAAE,cAAc;QACxB,QAAQ,EAAE,MAAM;QAChB,OAAO,EAAE,eAAe;QACxB,UAAU,EAAE,cAAc;QAC1B,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK;KACtC,CAAA;IAED,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,CAAA;AAC3C,CAAC,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/esm/hooks/useQuadKeyPayloadsToFeatures.d.ts

@@ -0,0 +1,7 @@
+import { Feature, Geometry } from 'geojson';
+import { NetworkXyoLocationHeatmapQuadkeyAnswerPayload } from '../types';
+declare const useQuadKeyPayloadsToFeatures: (payloads?: NetworkXyoLocationHeatmapQuadkeyAnswerPayload[] | NetworkXyoLocationHeatmapQuadkeyAnswerPayload) => {
+    features: Feature<Geometry, import("geojson").GeoJsonProperties>[];
+    multipleFeatureSets: Feature<Geometry, import("geojson").GeoJsonProperties>[][];
+};
+export { useQuadKeyPayloadsToFeatures };

package/dist/esm/hooks/useQuadKeyPayloadsToFeatures.js

@@ -0,0 +1,37 @@
+import { GeoJson } from '@xyo-network/sdk-geo';
+import { useEffect, useState } from 'react';
+const quadKeyToFeature = ({ quadkey, density }) => {
+    const polygonFeature = new GeoJson(quadkey).polygonFeature();
+    polygonFeature.properties = {
+        count: density,
+        density,
+    };
+    return polygonFeature;
+};
+const setDensity = (feature) => {
+    if (feature.properties) {
+        feature.properties.value = feature.properties.density / 5;
+    }
+    return feature;
+};
+const useQuadKeyPayloadsToFeatures = (payloads) => {
+    const [multipleFeatureSets, setMultipleFeatureSets] = useState([[]]);
+    const [features, setFeatures] = useState([]);
+    useEffect(() => {
+        // Convert Multiple Payloads from Quadkey to GeoJson
+        if (Array.isArray(payloads)) {
+            const payloadsArray = payloads;
+            const mappedFeatures = payloadsArray?.map((payload) => payload.result.map(quadKeyToFeature));
+            setMultipleFeatureSets(mappedFeatures.map((features) => features.map(setDensity)));
+        }
+        // Convert Single Payload from Quadkey to GeoJson
+        if (payloads && payloads.result) {
+            const singlePayload = payloads;
+            const mappedFeatures = singlePayload.result.map(quadKeyToFeature);
+            setFeatures(mappedFeatures.map(setDensity));
+        }
+    }, [payloads]);
+    return { features, multipleFeatureSets };
+};
+export { useQuadKeyPayloadsToFeatures };
+//# sourceMappingURL=useQuadKeyPayloadsToFeatures.js.map

package/dist/esm/hooks/useQuadKeyPayloadsToFeatures.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQuadKeyPayloadsToFeatures.js","sourceRoot":"","sources":["../../../src/hooks/useQuadKeyPayloadsToFeatures.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAE9C,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAI3C,MAAM,gBAAgB,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAwC,EAAE,EAAE;IACtF,MAAM,cAAc,GAAG,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC,cAAc,EAAE,CAAA;IAC5D,cAAc,CAAC,UAAU,GAAG;QAC1B,KAAK,EAAE,OAAO;QACd,OAAO;KACR,CAAA;IACD,OAAO,cAAc,CAAA;AACvB,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CAAC,OAAgB,EAAE,EAAE;IACtC,IAAI,OAAO,CAAC,UAAU,EAAE;QACtB,OAAO,CAAC,UAAU,CAAC,KAAK,GAAG,OAAO,CAAC,UAAU,CAAC,OAAO,GAAG,CAAC,CAAA;KAC1D;IACD,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA;AAED,MAAM,4BAA4B,GAAG,CAAC,QAA0G,EAAE,EAAE;IAClJ,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAwB,CAAC,EAAE,CAAC,CAAC,CAAA;IAC3F,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAsB,EAAE,CAAC,CAAA;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,oDAAoD;QACpD,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YAC3B,MAAM,aAAa,GAAG,QAA2D,CAAA;YACjF,MAAM,cAAc,GAAG,aAAa,EAAE,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC,CAAA;YAE5F,sBAAsB,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;SACnF;QAED,iDAAiD;QACjD,IAAI,QAAQ,IAAK,QAA0D,CAAC,MAAM,EAAE;YAClF,MAAM,aAAa,GAAG,QAAyD,CAAA;YAC/E,MAAM,cAAc,GAAG,aAAa,CAAC,MAAM,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;YAEjE,WAAW,CAAC,cAAc,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAA;SAC5C;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAA;AAC1C,CAAC,CAAA;AAED,OAAO,EAAE,4BAA4B,EAAE,CAAA"}

package/dist/esm/index.d.ts

@@ -0,0 +1,9 @@
+export * from './AnimatedHeatMapSettings';
+export * from './Colors';
+export * from './Components';
+export * from './Contexts';
+export * from './hooks';
+export * from './Layers';
+export * from './MapBoxClasses';
+export * from './Settings';
+export * from './types';

package/dist/esm/index.js

@@ -0,0 +1,10 @@
+export * from './AnimatedHeatMapSettings';
+export * from './Colors';
+export * from './Components';
+export * from './Contexts';
+export * from './hooks';
+export * from './Layers';
+export * from './MapBoxClasses';
+export * from './Settings';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAA;AACzC,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}

package/dist/esm/lib/XyoMapBoxBaseProps.d.ts

@@ -0,0 +1,17 @@
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+import { Feature } from 'geojson';
+import { MapboxOptions } from 'mapbox-gl';
+import { ReactNode } from 'react';
+import { XyoMapLayer } from '../Layers';
+export interface XyoMapBoxBaseProps extends FlexBoxProps {
+    disableControls?: boolean;
+    disableFitToPoints?: boolean;
+    features?: Feature[];
+    layers?: XyoMapLayer[];
+    mapBoxOptions?: Partial<MapboxOptions>;
+    fitToPointsPadding?: number;
+    requestLocation?: boolean;
+    zoom?: number;
+    legend?: ReactNode;
+    accessToken: string;
+}

package/dist/esm/lib/XyoMapBoxBaseProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=XyoMapBoxBaseProps.js.map

package/dist/esm/lib/XyoMapBoxBaseProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"XyoMapBoxBaseProps.js","sourceRoot":"","sources":["../../../src/lib/XyoMapBoxBaseProps.ts"],"names":[],"mappings":""}

package/dist/esm/lib/XyoMapStyle.d.ts

@@ -0,0 +1,8 @@
+export declare enum XyoMapStyle {
+    Dark = "mapbox/dark-v10",
+    Light = "mapbox/light-v10",
+    Outdoors = "mapbox/outdoors-v11",
+    Satellite = "mapbox/satellite-v9",
+    SatelliteStreets = "mapbox/satellite-streets-v11",
+    Streets = "mapbox/streets-v11"
+}

package/dist/esm/lib/XyoMapStyle.js

@@ -0,0 +1,10 @@
+export var XyoMapStyle;
+(function (XyoMapStyle) {
+    XyoMapStyle["Dark"] = "mapbox/dark-v10";
+    XyoMapStyle["Light"] = "mapbox/light-v10";
+    XyoMapStyle["Outdoors"] = "mapbox/outdoors-v11";
+    XyoMapStyle["Satellite"] = "mapbox/satellite-v9";
+    XyoMapStyle["SatelliteStreets"] = "mapbox/satellite-streets-v11";
+    XyoMapStyle["Streets"] = "mapbox/streets-v11";
+})(XyoMapStyle || (XyoMapStyle = {}));
+//# sourceMappingURL=XyoMapStyle.js.map

package/dist/esm/lib/XyoMapStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"XyoMapStyle.js","sourceRoot":"","sources":["../../../src/lib/XyoMapStyle.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,WAOX;AAPD,WAAY,WAAW;IACrB,uCAAwB,CAAA;IACxB,yCAA0B,CAAA;IAC1B,+CAAgC,CAAA;IAChC,gDAAiC,CAAA;IACjC,gEAAiD,CAAA;IACjD,6CAA8B,CAAA;AAChC,CAAC,EAPW,WAAW,KAAX,WAAW,QAOtB"}

package/dist/esm/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from './XyoMapBoxBaseProps';
+export * from './XyoMapStyle';

package/dist/esm/lib/index.js

@@ -0,0 +1,3 @@
+export * from './XyoMapBoxBaseProps';
+export * from './XyoMapStyle';
+//# sourceMappingURL=index.js.map

package/dist/esm/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA"}

package/dist/esm/types/NetworkLocationAnswerBase.d.ts

@@ -0,0 +1,16 @@
+import { XyoPayload } from '@xyo-network/payload';
+import { Feature, Point, Polygon } from 'geojson';
+interface NetworkLocationAnswerBase<T> extends XyoPayload {
+    result: T;
+}
+export declare type NetworkXyoLocationAnswerPayload = NetworkLocationAnswerBase<{
+    features: Feature<Point>[];
+}>;
+export declare type NetworkXyoLocationHeatmapAnswerPayload = NetworkLocationAnswerBase<{
+    features: Feature<Polygon>[];
+}>;
+export declare type NetworkXyoLocationHeatmapQuadkeyAnswerPayload = NetworkLocationAnswerBase<{
+    quadkey: string;
+    density: number;
+}[]>;
+export {};

package/dist/esm/types/NetworkLocationAnswerBase.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=NetworkLocationAnswerBase.js.map

package/dist/esm/types/NetworkLocationAnswerBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkLocationAnswerBase.js","sourceRoot":"","sources":["../../../src/types/NetworkLocationAnswerBase.ts"],"names":[],"mappings":""}

package/dist/esm/types/index.d.ts

@@ -0,0 +1 @@
+export * from './NetworkLocationAnswerBase';

package/dist/esm/types/index.js

@@ -0,0 +1,2 @@
+export * from './NetworkLocationAnswerBase';
+//# sourceMappingURL=index.js.map

package/dist/esm/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAA"}

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@xyo-network/react-map",
+  "author": {
+    "email": "support@xyo.network",
+    "name": "XYO Development Team",
+    "url": "https://xyo.network"
+  },
+  "bugs": {
+    "email": "support@xyo.network",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.9.2",
+    "@xylabs/react-flexbox": "^2.14.10",
+    "@xylabs/react-link": "^2.14.10",
+    "@xylabs/sdk-js": "^2.6.2",
+    "@xyo-network/react-archive": "^2.26.44",
+    "@xyo-network/react-archivist-api": "^2.26.44",
+    "@xyo-network/sdk-geo": "^2.6.18",
+    "mapbox-gl": "^2.9.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.4.0"
+  },
+  "description": "Common React library for all XYO projects that use React",
+  "devDependencies": {
+    "@storybook/react": "^6.5.9",
+    "@types/mapbox-gl": "^2.7.4",
+    "@xylabs/sdk-js": "^2.6.2",
+    "@xylabs/tsconfig-dom": "^2.5.5"
+  },
+  "browser": "dist/esm/index.js",
+  "docs": "dist/docs.json",
+  "exports": {
+    ".": {
+      "node": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "browser": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "default": "./dist/esm/index.js"
+    },
+    "./dist/docs.json": {
+      "default": "./dist/docs.json"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "homepage": "https://xyo.network",
+  "keywords": [
+    "xyo",
+    "utility",
+    "typescript",
+    "react"
+  ],
+  "license": "LGPL-3.0",
+  "resolutions": {
+    "@storybook/react/webpack": "^5",
+    "bn.js": "^5.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "webpack": "^5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
+  },
+  "scripts": {
+    "lint-pkg": "npmPkgJsonLint .",
+    "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\""
+  },
+  "sideEffects": false,
+  "types": "dist/esm/index.d.ts",
+  "version": "2.26.44"
+}

package/src/AnimatedHeatMapSettings.ts

@@ -0,0 +1,10 @@
+import { DefaultMapSettings } from './Settings'
+
+const AnimatedHeatMapSettings = DefaultMapSettings()
+const { debugLayer, scrollToZoom, fitToPoints, preferDark } = AnimatedHeatMapSettings
+debugLayer.hidden = false
+scrollToZoom.value = true
+fitToPoints.value = false
+preferDark.value = true
+
+export { AnimatedHeatMapSettings }

package/src/Colors/XyoMapColorProps.ts

@@ -0,0 +1,19 @@
+export interface XyoHeatMapColorProps {
+  staticMapColor: string
+}
+
+export interface XyoAnimatedHeatMapColorProps extends XyoHeatMapColorProps {
+  lowUsageColor: string
+  highUsageColor: string
+}
+
+export interface ColorGradientLegendProps {
+  startColor: string
+  endColor: string
+  heading: string
+  startLabel: string
+  endLabel: string
+  textColor: string
+}
+
+export type LegendProps = ColorGradientLegendProps

package/src/Colors/index.ts

@@ -0,0 +1 @@
+export * from './XyoMapColorProps'

package/src/Components/AnimatedHeatMap.tsx

@@ -0,0 +1,56 @@
+import { darken, useTheme } from '@mui/material'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { WithChildren } from '@xylabs/react-shared'
+import { Feature, Polygon } from 'geojson'
+import { useState } from 'react'
+
+import { XyoAnimatedHeatMapColorProps } from '../Colors'
+import { HeatMapInitializerProvider, MapBoxInstanceProvider, MapSettingsProvider } from '../Contexts'
+import { LocationHeatMapLayerBuilderAnimated, MapHeatConstants, XyoMapLayer } from '../Layers'
+import { MapSetting } from '../Settings'
+import { MapBoxHeat } from './MapBoxHeat'
+
+interface AnimatedHeatMapProps {
+  animatedFeatureSets: Feature<Polygon>[][]
+  staticFeatureSet: Feature<Polygon>[]
+  defaultMapSettings?: MapSetting
+  heatMapColorProps: XyoAnimatedHeatMapColorProps
+  accessToken: string
+}
+
+export const AnimatedHeatMap: React.FC<WithChildren<AnimatedHeatMapProps>> = ({
+  accessToken,
+  animatedFeatureSets,
+  defaultMapSettings,
+  staticFeatureSet,
+  heatMapColorProps,
+  ...props
+}) => {
+  const theme = useTheme()
+  const { staticMapColor, lowUsageColor, highUsageColor } = heatMapColorProps || {}
+  const localStaticMapColor = staticMapColor ?? theme.palette.primary.light
+
+  const [layers] = useState<XyoMapLayer[]>([
+    LocationHeatMapLayerBuilderAnimated(localStaticMapColor, 0, 'static'),
+    LocationHeatMapLayerBuilderAnimated(lowUsageColor || localStaticMapColor, 0, 'animated'),
+    LocationHeatMapLayerBuilderAnimated(highUsageColor || darken(localStaticMapColor, 0.9), 1, 'animated'),
+  ])
+
+  return animatedFeatureSets?.length ? (
+    <MapBoxInstanceProvider>
+      <MapSettingsProvider defaultMapSettings={defaultMapSettings} debugLayerName={MapHeatConstants.LocationDebugLayerId}>
+        <HeatMapInitializerProvider
+          features={staticFeatureSet}
+          layers={[layers[0]]}
+          featureSets={animatedFeatureSets}
+          featureSetsLayers={layers.slice(1, 3)}
+          heatMapColorProps={heatMapColorProps}
+        >
+          <MapBoxHeat accessToken={accessToken} {...props}></MapBoxHeat>
+        </HeatMapInitializerProvider>
+      </MapSettingsProvider>
+    </MapBoxInstanceProvider>
+  ) : (
+    <FlexCol flexGrow={1} busy />
+  )
+}

package/src/Components/AnimatedHetaMapLoaded.tsx

@@ -0,0 +1,40 @@
+import { Alert } from '@mui/material'
+import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import { Feature, Polygon } from 'geojson'
+
+import { AnimatedHeatMapSettings } from '../AnimatedHeatMapSettings'
+import { useFetchPayloads, useFindHashes, useHeatMapColors } from '../hooks'
+import { AnimatedHeatMap } from './AnimatedHeatMap'
+import { AnimatedHeatMapLegend } from './Legend'
+
+export interface AnimatedHeatMapLoadedProps extends FlexBoxProps {
+  accessToken: string
+}
+
+export const AnimatedHeatMapLoaded: React.FC<AnimatedHeatMapLoadedProps> = ({ accessToken, ...props }) => {
+  const hashes = useFindHashes()
+  const { multipleFeatureSets } = useFetchPayloads(hashes)
+  const { heatMapColorProps, legendProps } = useHeatMapColors()
+
+  const MapBoxHeatProps = {
+    flexGrow: 1,
+    legend: legendProps ? <AnimatedHeatMapLegend {...legendProps} /> : null,
+  }
+
+  return (
+    <FlexCol alignItems="stretch" {...props}>
+      {hashes !== undefined ? (
+        <AnimatedHeatMap
+          accessToken={accessToken}
+          defaultMapSettings={AnimatedHeatMapSettings}
+          animatedFeatureSets={multipleFeatureSets.slice(1, multipleFeatureSets.length) as Feature<Polygon>[][]}
+          staticFeatureSet={multipleFeatureSets[0] as Feature<Polygon>[]}
+          heatMapColorProps={heatMapColorProps}
+          {...MapBoxHeatProps}
+        />
+      ) : (
+        <Alert>Missing answer hash for heat map query</Alert>
+      )}
+    </FlexCol>
+  )
+}

package/src/Components/FeaturesToLayersMap.ts

@@ -0,0 +1,8 @@
+import { Feature, Polygon } from 'geojson'
+
+import { XyoMapLayer } from '../Layers'
+
+export interface FeaturesToLayersMap {
+  features: Feature<Polygon>[]
+  layers: XyoMapLayer[]
+}

package/src/Components/HeatMapSettings.ts

@@ -0,0 +1,9 @@
+import { DefaultMapSettings } from '../Settings'
+
+const HeatMapSettings = DefaultMapSettings()
+const { debugLayer, scrollToZoom, fitToPoints } = HeatMapSettings
+debugLayer.hidden = false
+scrollToZoom.value = true
+fitToPoints.value = true
+
+export { HeatMapSettings }

package/src/Components/LayerAnimator.tsx

@@ -0,0 +1,119 @@
+import { useInterval, WithChildren } from '@xylabs/react-shared'
+import { Map } from 'mapbox-gl'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { XyoMapLayer } from '../Layers'
+import { XyoMapBoxBaseProps } from '../lib'
+
+interface LayerAnimatorProps {
+  map: Map | undefined
+  animateLayers?: boolean
+  layersInitialized: boolean
+  layers: XyoMapBoxBaseProps['layers']
+}
+
+const timeIncrement = 2000
+const animatedLayerCount = 3
+
+const LayerAnimator: React.FC<WithChildren<LayerAnimatorProps>> = ({ children, animateLayers, layersInitialized, layers, map }) => {
+  const [fillLayers, setFillLayers] = useState<XyoMapLayer[]>([])
+  const layerIndexQueue = useRef<number[]>([])
+
+  const incrementQueue = useCallback(
+    (index: number) => {
+      if (fillLayers[index]) {
+        layerIndexQueue.current.push(index)
+      } else {
+        layerIndexQueue.current.push(0)
+      }
+      return layerIndexQueue.current.at(-1)
+    },
+    [fillLayers]
+  )
+
+  const lastQueuedIndex = useCallback(() => {
+    const last = layerIndexQueue.current.at(-1)
+    if (last === undefined) {
+      incrementQueue(0)
+      return 0
+    } else {
+      return last
+    }
+  }, [incrementQueue])
+
+  const unshiftQueue = useCallback(() => {
+    layerIndexQueue.current.shift()
+  }, [])
+
+  const getNextLayer = useCallback(() => {
+    const nextLayer = fillLayers[lastQueuedIndex()]
+    incrementQueue(lastQueuedIndex() + 1)
+    return nextLayer
+  }, [fillLayers, incrementQueue, lastQueuedIndex])
+
+  const layerAnimateWorker = useCallback(
+    (layer: XyoMapLayer) => {
+      if (layer) {
+        map?.setPaintProperty(layer.id, 'fill-opacity', 0.85)
+        setTimeout(() => {
+          map?.setPaintProperty(layer.id, 'fill-opacity', 0)
+          unshiftQueue()
+        }, timeIncrement * 2)
+      } else {
+        console.warn('tried to queue an empty layer')
+      }
+    },
+    [map, unshiftQueue]
+  )
+
+  useEffect(() => {
+    if (layers?.length && map && layersInitialized) {
+      // Only animate fill layers for now
+      setFillLayers(
+        layers.filter((layer) => {
+          const fillLayer = layer.id.startsWith('location-fill')
+          if (fillLayer) {
+            map.setPaintProperty(layer.id, 'fill-opacity-transition', { delay: 0, duration: 4000 })
+          }
+          return fillLayer
+        })
+      )
+    }
+  }, [layers, layersInitialized, map])
+
+  //
+  const queueLayerAnimation = useCallback(() => {
+    const animatedLayers: XyoMapLayer[] = []
+
+    for (let i = 0; i < animatedLayerCount; i++) {
+      animatedLayers.push(getNextLayer())
+    }
+
+    animatedLayers.forEach((layer, index) => {
+      if (index === 0) {
+        layerAnimateWorker(layer)
+      } else {
+        setTimeout(() => {
+          layerAnimateWorker(layer)
+        }, timeIncrement * index)
+      }
+    })
+  }, [getNextLayer, layerAnimateWorker])
+
+  // Run a single layer animation before the interval kicks in
+  useEffect(() => {
+    if (animateLayers && layersInitialized && map && fillLayers.length) {
+      queueLayerAnimation()
+    }
+  }, [animateLayers, fillLayers.length, layersInitialized, map, queueLayerAnimation])
+
+  useInterval(() => {
+    if (animateLayers && layersInitialized && map && fillLayers.length) {
+      queueLayerAnimation()
+    }
+  }, timeIncrement * animatedLayerCount)
+
+  return <>{children}</>
+}
+
+export { LayerAnimator }

package/src/Components/Legend.tsx

@@ -0,0 +1,33 @@
+import { useMediaQuery, useTheme } from '@mui/material'
+import { FlexCol } from '@xylabs/react-flexbox'
+
+import { ColorGradientLegendProps } from '../Colors'
+import { ColorGradientLegend } from './Legends'
+
+const AnimatedHeatMapLegend: React.FC<ColorGradientLegendProps> = ({ ...legendProps }) => {
+  const { startColor, endColor, startLabel, endLabel, heading, textColor } = legendProps
+  const theme = useTheme()
+  const isSmall = useMediaQuery(theme.breakpoints.down('sm'))
+
+  return (
+    <FlexCol position="absolute" bottom={0} right={0}>
+      <ColorGradientLegend
+        startColor={startColor}
+        endColor={endColor}
+        startLabel={startLabel}
+        endLabel={endLabel}
+        heading={heading}
+        textColor={textColor}
+        {...{
+          alignItems: 'stretch',
+          marginBottom: theme.spacing(4),
+          marginLeft: isSmall ? theme.spacing(3) : 0,
+          marginRight: isSmall ? theme.spacing(2) : theme.spacing(3),
+          width: isSmall ? '40vw' : theme.spacing(18),
+        }}
+      />
+    </FlexCol>
+  )
+}
+
+export { AnimatedHeatMapLegend }

package/src/Components/Legends/ColorGradient.tsx

@@ -0,0 +1,29 @@
+import { Typography, useTheme } from '@mui/material'
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
+
+import { ColorGradientLegendProps } from '../../Colors'
+
+const ColorGradientLegend: React.FC<ColorGradientLegendProps> = ({ startColor, endColor, startLabel, endLabel, heading, textColor, ...props }) => {
+  const theme = useTheme()
+
+  return (
+    <FlexCol {...props}>
+      <Typography mb={theme.spacing(0.25)} color={textColor} variant="caption" textAlign="center">
+        {heading}
+      </Typography>
+      <FlexCol flexGrow={1} alignItems="stretch" paddingX={theme.spacing(1)} mb={theme.spacing(0.25)}>
+        <FlexCol height={theme.spacing(0.75)} border={`1px solid ${textColor}`} sx={{ backgroundImage: `linear-gradient(to right, ${startColor},${endColor})` }} />
+      </FlexCol>
+      <FlexRow flexGrow={1} justifyContent="space-between">
+        <Typography color={textColor} variant="caption">
+          {startLabel}
+        </Typography>
+        <Typography color={textColor} variant="caption">
+          {endLabel}
+        </Typography>
+      </FlexRow>
+    </FlexCol>
+  )
+}
+
+export { ColorGradientLegend }