@xyo-network/react-map 2.41.37 → 2.41.39

package/dist/types/MapBoxClasses/XyoMapSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"XyoMapSettings.d.ts","sourceRoot":"","sources":["../../../src/MapBoxClasses/XyoMapSettings.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAG,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAEvH,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAExC,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,UAAU,CAAA;IACpB,GAAG,EAAE,GAAG,CAAA;IACR,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED;;;;GAIG;AACH,qBAAa,cAAc;IACzB,MAAM,CAAC,UAAU,EAAE,iBAAiB,GAAG,SAAS,CAAA;IAChD,MAAM,CAAC,gBAAgB,EAAE,gBAAgB,GAAG,SAAS,CAAA;IACrD,MAAM,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,CAAA;IAC3C,MAAM,CAAC,YAAY;uBACF,kBAAkB,GAAG,CAAC,kBAAkB,GAAG,SAAS,CAAC,QAAQ,GAAG;MAOhF;IAED,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,oBAAoB;IAUlD,MAAM,CAAC,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,OAAO;IAUpG,MAAM,CAAC,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,EAAE,GAAG;IAU9D,MAAM,CAAC,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM;IAa/E,MAAM,CAAC,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,EAAE,GAAG;IAY9D,OAAO,CAAC,MAAM,CAAC,WAAW;IA+B1B,OAAO,CAAC,MAAM,CAAC,cAAc;CAa9B"}
+{"version":3,"file":"XyoMapSettings.d.ts","sourceRoot":"","sources":["../../../src/MapBoxClasses/XyoMapSettings.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAG,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAEvH,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAExC,MAAM,WAAW,oBAAoB;IACnC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,GAAG,EAAE,GAAG,CAAA;IACR,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,EAAE,UAAU,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED;;;;GAIG;AACH,qBAAa,cAAc;IACzB,MAAM,CAAC,gBAAgB,EAAE,gBAAgB,GAAG,SAAS,CAAA;IACrD,MAAM,CAAC,YAAY;uBACF,kBAAkB,GAAG,CAAC,kBAAkB,GAAG,SAAS,CAAC,QAAQ,GAAG;MAOhF;IACD,MAAM,CAAC,UAAU,EAAE,iBAAiB,GAAG,SAAS,CAAA;IAChD,MAAM,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,CAAA;IAE3C,MAAM,CAAC,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,OAAO;IAUpG,MAAM,CAAC,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM;IAa/E,MAAM,CAAC,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,EAAE,GAAG;IAW9D,MAAM,CAAC,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,EAAE,GAAG;IAU9D,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,oBAAoB;IAWlD,OAAO,CAAC,MAAM,CAAC,WAAW;IA+B1B,OAAO,CAAC,MAAM,CAAC,cAAc;CAa9B"}

package/dist/types/Settings/MapSetting.d.ts

@@ -1,16 +1,16 @@
 export type MapSettingFields = 'debugLayer' | 'fitToPoints' | 'scrollToZoom' | 'enableControls' | 'debugLogging' | 'preferDark' | 'dynamicMapResize';
 export type MapSetting = {
     [field in MapSettingFields | string]: {
-        /** Initial toggle value for a setting */
-        value: boolean;
+        /** Setting only available when application is in developerMode */
+        devMode?: boolean;
         /** Machine-readable string to reference setting */
         field: string;
-        /** Label in the UI */
-        label: string;
         /** Hide the setting from the UI */
         hidden?: boolean;
-        /** Setting only available when application is in developerMode */
-        devMode?: boolean;
+        /** Label in the UI */
+        label: string;
+        /** Initial toggle value for a setting */
+        value: boolean;
     };
 };
 //# sourceMappingURL=MapSetting.d.ts.map

package/dist/types/Settings/MapSetting.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapSetting.d.ts","sourceRoot":"","sources":["../../../src/Settings/MapSetting.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG,aAAa,GAAG,cAAc,GAAG,gBAAgB,GAAG,cAAc,GAAG,YAAY,GAAG,kBAAkB,CAAA;AAEpJ,MAAM,MAAM,UAAU,GAAG;KACtB,KAAK,IAAI,gBAAgB,GAAG,MAAM,GAAG;QACpC,yCAAyC;QACzC,KAAK,EAAE,OAAO,CAAA;QACd,mDAAmD;QACnD,KAAK,EAAE,MAAM,CAAA;QACb,sBAAsB;QACtB,KAAK,EAAE,MAAM,CAAA;QACb,mCAAmC;QACnC,MAAM,CAAC,EAAE,OAAO,CAAA;QAChB,kEAAkE;QAClE,OAAO,CAAC,EAAE,OAAO,CAAA;KAClB;CACF,CAAA"}
+{"version":3,"file":"MapSetting.d.ts","sourceRoot":"","sources":["../../../src/Settings/MapSetting.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG,aAAa,GAAG,cAAc,GAAG,gBAAgB,GAAG,cAAc,GAAG,YAAY,GAAG,kBAAkB,CAAA;AAEpJ,MAAM,MAAM,UAAU,GAAG;KACtB,KAAK,IAAI,gBAAgB,GAAG,MAAM,GAAG;QACpC,kEAAkE;QAClE,OAAO,CAAC,EAAE,OAAO,CAAA;QACjB,mDAAmD;QACnD,KAAK,EAAE,MAAM,CAAA;QACb,mCAAmC;QACnC,MAAM,CAAC,EAAE,OAAO,CAAA;QAChB,sBAAsB;QACtB,KAAK,EAAE,MAAM,CAAA;QACb,yCAAyC;QACzC,KAAK,EAAE,OAAO,CAAA;KACf;CACF,CAAA"}

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

@@ -4,16 +4,16 @@ import { MapboxOptions } from 'mapbox-gl';
 import { ReactNode } from 'react';
 import { XyoMapLayer } from '../Layers';
 export interface XyoMapboxFlexBoxProps extends FlexBoxProps {
+    accessToken: string;
     developerMode?: boolean;
     disableControls?: boolean;
     disableFitToPoints?: boolean;
     features?: Feature[];
+    fitToPointsPadding?: number;
     layers?: XyoMapLayer[];
+    legend?: ReactNode;
     mapBoxOptions?: Partial<MapboxOptions>;
-    fitToPointsPadding?: number;
     requestLocation?: boolean;
     zoom?: number;
-    legend?: ReactNode;
-    accessToken: string;
 }
 //# sourceMappingURL=XyoMapBoxBaseProps.d.ts.map

package/dist/types/lib/XyoMapBoxBaseProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"XyoMapBoxBaseProps.d.ts","sourceRoot":"","sources":["../../../src/lib/XyoMapBoxBaseProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAEvC,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACzD,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;IACpB,MAAM,CAAC,EAAE,WAAW,EAAE,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;IACtC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,WAAW,EAAE,MAAM,CAAA;CACpB"}
+{"version":3,"file":"XyoMapBoxBaseProps.d.ts","sourceRoot":"","sources":["../../../src/lib/XyoMapBoxBaseProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAEvC,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACzD,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,MAAM,CAAC,EAAE,WAAW,EAAE,CAAA;IACtB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;IACtC,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd"}

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

@@ -10,7 +10,7 @@ export type NetworkXyoLocationHeatmapAnswerPayload = NetworkLocationAnswerBase<{
     features: Feature<Polygon>[];
 }>;
 export type NetworkXyoLocationHeatmapQuadkeyAnswerPayload = NetworkLocationAnswerBase<{
-    quadkey: string;
     density: number;
+    quadkey: string;
 }[]>;
 //# sourceMappingURL=NetworkLocationAnswerBase.d.ts.map

package/package.json

@@ -13,15 +13,15 @@
     "@xylabs/assert": "^2.6.16",
     "@xylabs/delay": "^2.6.16",
     "@xylabs/forget": "^2.6.16",
-    "@xylabs/react-flexbox": "^2.15.11",
-    "@xylabs/react-shared": "^2.15.11",
-    "@xyo-network/archivist": "^2.43.13",
-    "@xyo-network/module": "^2.43.13",
-    "@xyo-network/payload-model": "^2.43.13",
-    "@xyo-network/react-app-settings": "^2.41.37",
-    "@xyo-network/react-archivist": "^2.41.37",
-    "@xyo-network/react-network": "^2.41.37",
-    "@xyo-network/react-shared": "^2.41.37",
+    "@xylabs/react-flexbox": "^2.15.12",
+    "@xylabs/react-shared": "^2.15.12",
+    "@xyo-network/archivist": "^2.43.22",
+    "@xyo-network/module": "^2.43.22",
+    "@xyo-network/payload-model": "^2.43.22",
+    "@xyo-network/react-app-settings": "^2.41.39",
+    "@xyo-network/react-archivist": "^2.41.39",
+    "@xyo-network/react-network": "^2.41.39",
+    "@xyo-network/react-shared": "^2.41.39",
     "@xyo-network/sdk-geo": "^2.7.0",
     "geojson": "^0.5.0",
     "mapbox-gl": "^2.12.0"
@@ -37,9 +37,9 @@
   },
   "description": "Common React library for all XYO projects that use React",
   "devDependencies": {
-    "@storybook/react": "^6.5.15",
+    "@storybook/react": "^6.5.16",
     "@types/mapbox-gl": "^2.7.10",
-    "@xylabs/ts-scripts-yarn3": "2.12.26",
+    "@xylabs/ts-scripts-yarn3": "2.12.29",
     "require-from-string": "^2.0.2"
   },
   "browser": "dist/esm/index.js",
@@ -84,5 +84,5 @@
   },
   "sideEffects": false,
   "types": "dist/types/index.d.ts",
-  "version": "2.41.37"
+  "version": "2.41.39"
 }

package/src/Colors/XyoMapColorProps.ts

@@ -3,16 +3,16 @@ export interface XyoHeatMapColorProps {
 }
 
 export interface XyoAnimatedHeatMapColorProps extends XyoHeatMapColorProps {
-  lowUsageColor: string
   highUsageColor: string
+  lowUsageColor: string
 }
 
 export interface ColorGradientLegendProps {
-  startColor: string
   endColor: string
+  endLabel: string
   heading: string
+  startColor: string
   startLabel: string
-  endLabel: string
   textColor: string
 }
 

package/src/Components/AnimatedHeatMap.tsx

@@ -11,19 +11,19 @@ import { MapSetting } from '../Settings'
 import { XyoMapboxHeatFlexBox } from './MapBoxHeat'
 
 export interface AnimatedHeatMapProps {
+  accessToken: string
   animatedFeatureSets: Feature<Polygon>[][]
-  staticFeatureSet: Feature<Polygon>[]
   defaultMapSettings?: MapSetting
   heatMapColorProps: XyoAnimatedHeatMapColorProps
-  accessToken: string
+  staticFeatureSet: Feature<Polygon>[]
 }
 
 export const AnimatedHeatMap: React.FC<WithChildren<AnimatedHeatMapProps>> = ({
   accessToken,
   animatedFeatureSets,
   defaultMapSettings,
-  staticFeatureSet,
   heatMapColorProps,
+  staticFeatureSet,
   ...props
 }) => {
   const theme = useTheme()

package/src/Components/LayerAnimator.tsx

@@ -6,16 +6,16 @@ import { XyoMapLayer } from '../Layers'
 import { XyoMapboxFlexBoxProps } from '../lib'
 
 export interface LayerAnimatorProps {
-  map: Map | undefined
   animateLayers?: boolean
-  layersInitialized: boolean
   layers: XyoMapboxFlexBoxProps['layers']
+  layersInitialized: boolean
+  map: Map | undefined
 }
 
 const timeIncrement = 2000
 const animatedLayerCount = 3
 
-export const LayerAnimator: React.FC<WithChildren<LayerAnimatorProps>> = ({ children, animateLayers, layersInitialized, layers, map }) => {
+export const LayerAnimator: React.FC<WithChildren<LayerAnimatorProps>> = ({ animateLayers, children, layers, layersInitialized, map }) => {
   const [fillLayers, setFillLayers] = useState<XyoMapLayer[]>([])
   const layerIndexQueue = useRef<number[]>([])
 

package/src/Components/MapBox.tsx

@@ -9,13 +9,13 @@ import { useDynamicMapResize } from '../hooks'
 import { XyoMapStyle } from '../lib'
 
 export interface MapBoxProps {
+  accessToken: string
+  darkMode?: boolean
   options?: Partial<MapboxOptions>
   zoom?: number
-  darkMode?: boolean
-  accessToken: string
 }
 
-export const MapBox: React.FC<MapBoxProps> = ({ accessToken, darkMode = false, zoom = 2, options, ...props }) => {
+export const MapBox: React.FC<MapBoxProps> = ({ accessToken, darkMode = false, options, zoom = 2, ...props }) => {
   const [map, setMap] = useState<Map>()
   const mapContainerRef = useRef<HTMLDivElement | null>(null)
   const mapCanvasRef = useRef<HTMLCanvasElement | null>(null)

package/src/Components/MapBoxPoints.tsx

@@ -11,15 +11,15 @@ import { MapBox } from './MapBox'
 import { MapSettings } from './MapSettingsComponents'
 
 export interface XyoMapboxPointsFlexBoxProps extends XyoMapboxFlexBoxProps {
-  features?: Feature<Point>[]
   accessToken: string
+  features?: Feature<Point>[]
 }
 
 export const XyoMapboxPointsFlexBox: React.FC<XyoMapboxPointsFlexBoxProps> = ({
   accessToken,
   features,
-  layers,
   fitToPointsPadding = 20,
+  layers,
   zoom,
   ...props
 }) => {

package/src/Components/MapSettingsComponents/Setting.tsx

@@ -3,11 +3,11 @@ import { FormControlLabel, Switch, SwitchProps } from '@mui/material'
 import { useMapSettings } from '../../Contexts'
 
 export interface MapSettingSwitchProps extends SwitchProps {
-  field: string
   developerMode?: boolean
+  field: string
 }
 
-export const MapSettingSwitch: React.FC<MapSettingSwitchProps> = ({ field, developerMode, ...props }) => {
+export const MapSettingSwitch: React.FC<MapSettingSwitchProps> = ({ developerMode, field, ...props }) => {
   const { mapSettings, setMapSettings } = useMapSettings()
   const setting = mapSettings?.[field]
 

package/src/Contexts/HeatMapInitializer/Provider.tsx

@@ -13,24 +13,24 @@ import { HeatMapInitializerContext } from './Context'
 import { HeatMapInitializerState } from './State'
 
 interface MapInitializerProviderProps {
-  features?: Feature<Polygon>[]
   featureSets?: Feature<Polygon>[][]
   featureSetsLayers?: XyoMapLayer[]
-  layers?: XyoMapLayer[]
-  zoom?: number
+  features?: Feature<Polygon>[]
   fitToPadding?: number
   heatMapColorProps: XyoHeatMapColorProps | XyoAnimatedHeatMapColorProps
+  layers?: XyoMapLayer[]
+  zoom?: number
 }
 
 export const HeatMapInitializerProvider: React.FC<WithChildren<MapInitializerProviderProps>> = ({
   children,
-  features,
   featureSets,
   featureSetsLayers,
-  zoom,
+  features,
   fitToPadding,
-  layers,
   heatMapColorProps,
+  layers,
+  zoom,
 }) => {
   const [MapHeat, setMapHeat] = useState<XyoMapHeat>()
   const { options } = useDynamicPositioning()

package/src/Contexts/MapSettings/Provider.tsx

@@ -8,10 +8,10 @@ import { MapSettingsContext } from './Context'
 import { MapSettingsState } from './State'
 
 export interface MapSettingsProviderProps {
+  debugLayerName?: string
   defaultMapSettings?: MapSetting
   requestLocation?: boolean
   zoom?: number
-  debugLayerName?: string
 }
 
 export const MapSettingsProvider: React.FC<WithChildren<MapSettingsProviderProps>> = ({

package/src/Contexts/MapSettings/State.ts

@@ -3,6 +3,6 @@ import { Dispatch } from 'react'
 import { MapSetting } from '../../Settings'
 
 export interface MapSettingsState {
-  setMapSettings?: Dispatch<React.SetStateAction<MapSetting>>
   mapSettings?: MapSetting
+  setMapSettings?: Dispatch<React.SetStateAction<MapSetting>>
 }

package/src/MapBoxClasses/XyoMapBase.ts

@@ -7,8 +7,8 @@ import { GeoJSONSource, Map } from 'mapbox-gl'
 import { XyoMapLayer } from '../Layers'
 
 export interface XyoMapBaseConfig<T extends Geometry> {
-  map: Map
   features: Feature<T>[]
+  map: Map
   requestLocation?: boolean
   zoom?: number
 }

package/src/MapBoxClasses/XyoMapHeat.ts

@@ -17,27 +17,6 @@ export class XyoMapHeat extends XyoMapBase<Polygon> {
     this.config = config
   }
 
-  // Build layers each with the same features
-  initializeHeatMapSource(layers: XyoMapLayer[]) {
-    const getSource = (_: number) => {
-      const featuresCollection = GeoJson.featureCollection(this.config.features)
-      return GeoJson.featuresSource(featuresCollection)
-    }
-
-    layers.forEach((layer, index) => {
-      const existingSource = this.config.map.getSource(layer.source as string) as GeoJSONSource
-      const source = getSource(index)
-      if (existingSource) {
-        existingSource.setData(assertEx(source.data) as GeoJSON.Feature<GeoJSON.Geometry> | GeoJSON.FeatureCollection<GeoJSON.Geometry>)
-      } else {
-        this.config.map.addSource(layer.source as string, source)
-      }
-      layer.update(this.config.map, true)
-    })
-
-    return this
-  }
-
   static initialMapPositioning(options: FitBoundsOptions, map: Map, features?: Feature<Polygon>[], initialBounds?: LngLatBounds) {
     if (!features) {
       return
@@ -64,16 +43,6 @@ export class XyoMapHeat extends XyoMapBase<Polygon> {
     return this
   }
 
-  private static updateLayer(map: Map, layer: XyoMapLayer, source: GeoJSONSourceRaw) {
-    const existingSource = map.getSource(layer.source as string) as GeoJSONSource
-    if (existingSource && source.data) {
-      existingSource.setData(source.data as GeoJSON.Feature<GeoJSON.Geometry> | GeoJSON.FeatureCollection<GeoJSON.Geometry>)
-    } else if (source) {
-      map.addSource(layer.source as string, source)
-    }
-    layer.update(map, true)
-  }
-
   static async initializeAnimatedHeatMapSource(
     layers: XyoMapLayer[],
     featureSet: Feature<Polygon>[][],
@@ -174,4 +143,35 @@ export class XyoMapHeat extends XyoMapBase<Polygon> {
 
     await startAnimation()
   }
+
+  private static updateLayer(map: Map, layer: XyoMapLayer, source: GeoJSONSourceRaw) {
+    const existingSource = map.getSource(layer.source as string) as GeoJSONSource
+    if (existingSource && source.data) {
+      existingSource.setData(source.data as GeoJSON.Feature<GeoJSON.Geometry> | GeoJSON.FeatureCollection<GeoJSON.Geometry>)
+    } else if (source) {
+      map.addSource(layer.source as string, source)
+    }
+    layer.update(map, true)
+  }
+
+  // Build layers each with the same features
+  initializeHeatMapSource(layers: XyoMapLayer[]) {
+    const getSource = (_: number) => {
+      const featuresCollection = GeoJson.featureCollection(this.config.features)
+      return GeoJson.featuresSource(featuresCollection)
+    }
+
+    layers.forEach((layer, index) => {
+      const existingSource = this.config.map.getSource(layer.source as string) as GeoJSONSource
+      const source = getSource(index)
+      if (existingSource) {
+        existingSource.setData(assertEx(source.data) as GeoJSON.Feature<GeoJSON.Geometry> | GeoJSON.FeatureCollection<GeoJSON.Geometry>)
+      } else {
+        this.config.map.addSource(layer.source as string, source)
+      }
+      layer.update(this.config.map, true)
+    })
+
+    return this
+  }
 }

package/src/MapBoxClasses/XyoMapSettings.ts

@@ -3,11 +3,11 @@ import { EventData, GeolocateControl, Map, MapLayerMouseEvent, MapLayerTouchEven
 import { MapSetting } from '../Settings'
 
 export interface XyoMapSettingsConfig {
-  settings: MapSetting
+  debugLayerName?: string
   map: Map
-  zoom?: number
   requestLocation?: boolean
-  debugLayerName?: string
+  settings: MapSetting
+  zoom?: number
 }
 
 /**
@@ -16,9 +16,7 @@ export interface XyoMapSettingsConfig {
  * Methods are pure functions dedicated to map manipulation
  */
 export class XyoMapSettings {
-  static navControl: NavigationControl | undefined
   static geoLocateControl: GeolocateControl | undefined
-  static requestLocation: boolean | undefined
   static mapListeners = {
     logData: (ev?: MapLayerMouseEvent | (MapLayerTouchEvent & EventData), map?: Map) => {
       const target = map || ev?.target
@@ -28,16 +26,8 @@ export class XyoMapSettings {
       }
     },
   }
-
-  static updateSettings(config: XyoMapSettingsConfig) {
-    const { settings, map, zoom, requestLocation, debugLayerName = '' } = config
-    const { scrollToZoom, enableControls, debugLayer, debugLogging } = settings
-
-    XyoMapSettings.toggleControls(enableControls?.value, map, zoom, requestLocation)
-      .toggleScrollToZoom(scrollToZoom?.value, map)
-      .toggleDebugLayer(debugLayer?.value, map, debugLayerName)
-      .toggleDebugLogging(debugLogging.value, map)
-  }
+  static navControl: NavigationControl | undefined
+  static requestLocation: boolean | undefined
 
   static toggleControls(value: boolean | undefined, map: Map, zoom?: number, requestLocation?: boolean) {
     if (value) {
@@ -49,16 +39,6 @@ export class XyoMapSettings {
     return this
   }
 
-  static toggleScrollToZoom(value: boolean | undefined, map: Map) {
-    if (value) {
-      map.scrollZoom.enable()
-    } else {
-      map.scrollZoom.disable()
-    }
-
-    return this
-  }
-
   static toggleDebugLayer(value: boolean | undefined, map: Map, layerName: string) {
     const debugLayer = map.getLayer(layerName)
     if (debugLayer) {
@@ -83,6 +63,26 @@ export class XyoMapSettings {
     }
   }
 
+  static toggleScrollToZoom(value: boolean | undefined, map: Map) {
+    if (value) {
+      map.scrollZoom.enable()
+    } else {
+      map.scrollZoom.disable()
+    }
+
+    return this
+  }
+
+  static updateSettings(config: XyoMapSettingsConfig) {
+    const { settings, map, zoom, requestLocation, debugLayerName = '' } = config
+    const { scrollToZoom, enableControls, debugLayer, debugLogging } = settings
+
+    XyoMapSettings.toggleControls(enableControls?.value, map, zoom, requestLocation)
+      .toggleScrollToZoom(scrollToZoom?.value, map)
+      .toggleDebugLayer(debugLayer?.value, map, debugLayerName)
+      .toggleDebugLogging(debugLogging.value, map)
+  }
+
   // Needs to be static so we ensure controls are only instantiated once
   private static addControls(map: Map, zoom?: number, requestLocation?: boolean) {
     const geolocateControl = new GeolocateControl({

package/src/Settings/MapSetting.ts

@@ -2,15 +2,15 @@ export type MapSettingFields = 'debugLayer' | 'fitToPoints' | 'scrollToZoom' | '
 
 export type MapSetting = {
   [field in MapSettingFields | string]: {
-    /** Initial toggle value for a setting */
-    value: boolean
+    /** Setting only available when application is in developerMode */
+    devMode?: boolean
     /** Machine-readable string to reference setting */
     field: string
-    /** Label in the UI */
-    label: string
     /** Hide the setting from the UI */
     hidden?: boolean
-    /** Setting only available when application is in developerMode */
-    devMode?: boolean
+    /** Label in the UI */
+    label: string
+    /** Initial toggle value for a setting */
+    value: boolean
   }
 }

package/src/hooks/useQuadKeyPayloadsToFeatures.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'
 
 import { NetworkXyoLocationHeatmapQuadkeyAnswerPayload } from '../types'
 
-const quadKeyToFeature = ({ quadkey, density }: { quadkey: string; density: number }) => {
+const quadKeyToFeature = ({ density, quadkey }: { density: number; quadkey: string }) => {
   const polygonFeature = new GeoJson(quadkey).polygonFeature()
   polygonFeature.properties = {
     count: density,

package/src/lib/XyoMapBoxBaseProps.ts

@@ -6,15 +6,15 @@ import { ReactNode } from 'react'
 import { XyoMapLayer } from '../Layers'
 
 export interface XyoMapboxFlexBoxProps extends FlexBoxProps {
+  accessToken: string
   developerMode?: boolean
   disableControls?: boolean
   disableFitToPoints?: boolean
   features?: Feature[]
+  fitToPointsPadding?: number
   layers?: XyoMapLayer[]
+  legend?: ReactNode
   mapBoxOptions?: Partial<MapboxOptions>
-  fitToPointsPadding?: number
   requestLocation?: boolean
   zoom?: number
-  legend?: ReactNode
-  accessToken: string
 }

package/src/types/NetworkLocationAnswerBase.ts

@@ -7,4 +7,4 @@ export interface NetworkLocationAnswerBase<T> extends XyoPayload {
 
 export type NetworkXyoLocationAnswerPayload = NetworkLocationAnswerBase<{ features: Feature<Point>[] }>
 export type NetworkXyoLocationHeatmapAnswerPayload = NetworkLocationAnswerBase<{ features: Feature<Polygon>[] }>
-export type NetworkXyoLocationHeatmapQuadkeyAnswerPayload = NetworkLocationAnswerBase<{ quadkey: string; density: number }[]>
+export type NetworkXyoLocationHeatmapQuadkeyAnswerPayload = NetworkLocationAnswerBase<{ density: number; quadkey: string }[]>