@xyo-network/react-map 2.26.44

package/src/Components/Legends/index.ts

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

package/src/Components/MapBox.tsx

@@ -0,0 +1,66 @@
+// eslint-disable-next-line import/no-internal-modules
+import 'mapbox-gl/dist/mapbox-gl.css'
+
+import { Map, MapboxOptions } from 'mapbox-gl'
+import { useEffect, useRef, useState } from 'react'
+
+import { useMapBoxInstance, useMapSettings } from '../Contexts'
+import { XyoMapStyle } from '../lib'
+
+export interface MapBoxProps {
+  options?: Partial<MapboxOptions>
+  zoom?: number
+  darkMode?: boolean
+  accessToken: string
+}
+
+export const MapBox: React.FC<MapBoxProps> = ({ accessToken, darkMode = false, zoom = 2, options, ...props }) => {
+  const [map, setMap] = useState<Map>()
+  const mapContainerRef = useRef<HTMLDivElement | null>(null)
+  const { setMapBoxInstance } = useMapBoxInstance()
+  const { mapSettings } = useMapSettings()
+
+  useEffect(() => {
+    if (mapSettings?.preferDark?.value === true) {
+      map?.setStyle(`mapbox://styles/${XyoMapStyle.Dark}`)
+    } else {
+      map?.setStyle(`mapbox://styles/${darkMode ? XyoMapStyle.Dark : XyoMapStyle.Light}`)
+    }
+  }, [map, darkMode, mapSettings])
+
+  useEffect(() => {
+    const map = new Map({
+      accessToken,
+      center: [0, 0],
+      container: mapContainerRef.current ?? '',
+      style: `mapbox://styles/${XyoMapStyle.Light}`,
+      zoom,
+      ...options,
+    })
+
+    // Allow external components to control the map
+    setMapBoxInstance?.(map)
+    setMap(map)
+
+    console.log('Created Map')
+
+    return () => {
+      console.log('Removing Map')
+      map.remove()
+    }
+  }, [mapContainerRef, setMap, options, zoom, setMapBoxInstance, accessToken])
+
+  return (
+    <div
+      ref={(el) => (mapContainerRef.current = el)}
+      style={{
+        bottom: 0,
+        left: 0,
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        ...props,
+      }}
+    />
+  )
+}

package/src/Components/MapBoxHeat.tsx

@@ -0,0 +1,16 @@
+import { FlexCol } from '@xylabs/react-flexbox'
+
+import { XyoMapBoxBaseProps } from '../lib'
+import { MapBox } from './MapBox'
+import { MapSettings } from './MapSettingsComponents'
+
+export const MapBoxHeat: React.FC<XyoMapBoxBaseProps> = ({ accessToken, children, mapBoxOptions, zoom, legend, ...props }) => {
+  return (
+    <FlexCol {...props}>
+      <MapBox accessToken={accessToken} options={mapBoxOptions} zoom={zoom} />
+      <MapSettings />
+      {legend}
+      {children}
+    </FlexCol>
+  )
+}

package/src/Components/MapBoxPoints.tsx

@@ -0,0 +1,72 @@
+import { Alert } from '@mui/material'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { Feature, Point } from 'geojson'
+import { useCallback, useEffect, useState } from 'react'
+
+import { useMapBoxInstance, useMapSettings } from '../Contexts'
+import { XyoMapBoxBaseProps } from '../lib'
+import { XyoMapPoints } from '../MapBoxClasses'
+import { MapBox } from './MapBox'
+import { MapSettings } from './MapSettingsComponents'
+
+interface MapBoxPointsProps extends XyoMapBoxBaseProps {
+  features?: Feature<Point>[]
+  accessToken: string
+}
+
+const MapBoxPoints: React.FC<MapBoxPointsProps> = ({ accessToken, features, layers, fitToPointsPadding = 20, zoom, ...props }) => {
+  const [MapPoints, setMapPoints] = useState<XyoMapPoints>()
+  const { mapSettings } = useMapSettings()
+  const { map, mapInitialized } = useMapBoxInstance()
+
+  const updateFeatures = useCallback(() => {
+    if (MapPoints?.isMapReady && features?.length) {
+      layers?.forEach((layer) => {
+        MapPoints.initializeMapSource(layer)
+      })
+    }
+  }, [MapPoints, features, layers])
+
+  const updateMapSetup = useCallback(() => {
+    const { fitToPoints } = mapSettings || {}
+
+    if (MapPoints && map) {
+      if (fitToPoints?.value === true) {
+        MapPoints.initialMapPositioning({ padding: fitToPointsPadding })
+      }
+    }
+  }, [MapPoints, map, mapSettings, fitToPointsPadding])
+
+  const reInitializeMap = useCallback(() => {
+    MapPoints?.initialMapPositioning({ padding: fitToPointsPadding })
+    updateFeatures()
+  }, [MapPoints, fitToPointsPadding, updateFeatures])
+
+  useEffect(() => {
+    if (map && features?.length) {
+      setMapPoints(new XyoMapPoints({ features, map, zoom }))
+    }
+  }, [map, features, zoom])
+
+  useEffect(() => {
+    if (mapInitialized) {
+      updateMapSetup()
+      reInitializeMap()
+    }
+  }, [mapInitialized, reInitializeMap, updateMapSetup])
+
+  return (
+    <FlexCol alignItems="stretch" {...props}>
+      {features ? (
+        <>
+          <MapBox accessToken={accessToken} zoom={zoom} />
+          <MapSettings />
+        </>
+      ) : (
+        <Alert severity="error">No data to show</Alert>
+      )}
+    </FlexCol>
+  )
+}
+
+export { MapBoxPoints }

package/src/Components/MapSettingsComponents/Setting.tsx

@@ -0,0 +1,27 @@
+import { FormControlLabel, Switch, SwitchProps } from '@mui/material'
+
+import { useMapSettings } from '../../Contexts'
+
+export interface MapSettingSwitchProps extends SwitchProps {
+  field: string
+}
+
+export const MapSettingSwitch: React.FC<MapSettingSwitchProps> = ({ field, ...props }) => {
+  const { mapSettings, setMapSettings } = useMapSettings()
+  const setting = mapSettings?.[field]
+
+  const onLocalChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (setting) {
+      setMapSettings?.((previous) => {
+        previous[setting.field].value = event.target.checked
+        return { ...previous }
+      })
+    }
+  }
+
+  if (setting?.devMode) {
+    return null
+  }
+
+  return setting?.hidden ? null : <FormControlLabel label={setting?.label} control={<Switch checked={setting?.value} onChange={onLocalChange} {...props} />} />
+}

package/src/Components/MapSettingsComponents/Settings.tsx

@@ -0,0 +1,25 @@
+import { Paper, Stack } from '@mui/material'
+import { FlexBoxProps, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'
+import { useAppSettings } from '@xyo-network/react-app-settings'
+
+import { useMapSettings } from '../../Contexts'
+import { MapSettingSwitch } from './Setting'
+
+export const MapSettings: React.FC<FlexBoxProps> = (props) => {
+  const { mapSettings } = useMapSettings()
+  const { developerMode } = useAppSettings()
+
+  return mapSettings && developerMode ? (
+    <FlexGrowRow bottom={36} left={10} position="absolute" {...props}>
+      <FlexRow paddingX={2}>
+        <Paper>
+          <Stack direction="row" spacing={1} marginX={1}>
+            {Object.keys(mapSettings).map((key, index) => {
+              return <MapSettingSwitch key={index} field={mapSettings[key].field} />
+            })}
+          </Stack>
+        </Paper>
+      </FlexRow>
+    </FlexGrowRow>
+  ) : null
+}

package/src/Components/MapSettingsComponents/index.tsx

@@ -0,0 +1,2 @@
+export * from './Setting'
+export * from './Settings'

package/src/Components/index.ts

@@ -0,0 +1,11 @@
+export * from './AnimatedHeatMap'
+export * from './AnimatedHetaMapLoaded'
+export * from './FeaturesToLayersMap'
+export * from './HeatMapSettings'
+export * from './LayerAnimator'
+export * from './Legend'
+export * from './Legends'
+export * from './MapBox'
+export * from './MapBoxHeat'
+export * from './MapBoxPoints'
+export * from './MapSettingsComponents'

package/src/Contexts/HeatMapInitializer/Context.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react'
+
+import { HeatMapInitializerState } from './State'
+
+const HeatMapInitializerContext = createContext<HeatMapInitializerState>({})
+
+export { HeatMapInitializerContext }

package/src/Contexts/HeatMapInitializer/Provider.tsx

@@ -0,0 +1,85 @@
+import { WithChildren } from '@xylabs/react-shared'
+import { forget } from '@xylabs/sdk-js'
+import { Feature, Polygon } from 'geojson'
+import { useEffect, useState } from 'react'
+
+import { XyoAnimatedHeatMapColorProps, XyoHeatMapColorProps } from '../../Colors'
+import { useDynamicPositioning } from '../../hooks'
+import { XyoMapLayer } from '../../Layers'
+import { XyoMapHeat } from '../../MapBoxClasses'
+import { useMapBoxInstance } from '../MapBoxInstance'
+import { useMapSettings } from '../MapSettings'
+import { HeatMapInitializerContext } from './Context'
+import { HeatMapInitializerState } from './State'
+
+interface MapInitializerProviderProps {
+  features?: Feature<Polygon>[]
+  featureSets?: Feature<Polygon>[][]
+  featureSetsLayers?: XyoMapLayer[]
+  layers?: XyoMapLayer[]
+  zoom?: number
+  fitToPadding?: number
+  heatMapColorProps: XyoHeatMapColorProps | XyoAnimatedHeatMapColorProps
+}
+
+export const HeatMapInitializerProvider: React.FC<WithChildren<MapInitializerProviderProps>> = ({
+  children,
+  features,
+  featureSets,
+  featureSetsLayers,
+  zoom,
+  fitToPadding,
+  layers,
+  heatMapColorProps,
+}) => {
+  const [MapHeat, setMapHeat] = useState<XyoMapHeat>()
+  const { options } = useDynamicPositioning()
+  const { mapSettings } = useMapSettings()
+  const { map, mapInitialized } = useMapBoxInstance()
+
+  const value: HeatMapInitializerState = {
+    MapHeat,
+    heatMapColorProps,
+  }
+
+  useEffect(() => {
+    if (mapInitialized && featureSets?.length && featureSets[0].length && map && featureSetsLayers?.length) {
+      const { lowUsageColor, highUsageColor } = heatMapColorProps as XyoAnimatedHeatMapColorProps
+      forget(XyoMapHeat.initializeAnimatedHeatMapSource(featureSetsLayers, featureSets, map, lowUsageColor, highUsageColor))
+    }
+
+    return () => {
+      XyoMapHeat.animationStarted = false
+    }
+  }, [featureSets, featureSetsLayers, mapInitialized, map, heatMapColorProps])
+
+  useEffect(() => {
+    if (MapHeat && mapInitialized && features?.length && layers?.length) {
+      MapHeat.initializeHeatMapSource(layers)
+    }
+  }, [MapHeat, features?.length, layers, mapInitialized])
+
+  useEffect(() => {
+    if (mapInitialized) {
+      const { fitToPoints } = mapSettings || {}
+
+      if (map) {
+        if (fitToPoints?.value === true) {
+          XyoMapHeat.initialMapPositioning({ padding: fitToPadding }, map, features)
+        } else if (options.zoom && options.center) {
+          map.setZoom(options.zoom)
+          map.setCenter(options.center)
+        }
+      }
+    }
+  }, [MapHeat, map, mapSettings, fitToPadding, options, mapInitialized, features])
+
+  useEffect(() => {
+    if (map && features?.length) {
+      // Every time we get a new map or features, we make a new class
+      setMapHeat(new XyoMapHeat({ features, map, zoom }))
+    }
+  }, [map, features, zoom])
+
+  return <HeatMapInitializerContext.Provider value={value}>{children}</HeatMapInitializerContext.Provider>
+}

package/src/Contexts/HeatMapInitializer/State.ts

@@ -0,0 +1,7 @@
+import { XyoHeatMapColorProps } from '../../Colors'
+import { XyoMapHeat } from '../../MapBoxClasses'
+
+export interface HeatMapInitializerState {
+  MapHeat?: XyoMapHeat
+  heatMapColorProps?: XyoHeatMapColorProps
+}

package/src/Contexts/HeatMapInitializer/index.ts

@@ -0,0 +1,2 @@
+export * from './Provider'
+export * from './useHeatMapInitializer'

package/src/Contexts/HeatMapInitializer/useHeatMapInitializer.tsx

@@ -0,0 +1,13 @@
+import { assertEx } from '@xylabs/sdk-js'
+import { useContext } from 'react'
+
+import { HeatMapInitializerContext } from './Context'
+
+const useHeatMapInitializer = () => {
+  const context = useContext(HeatMapInitializerContext)
+  assertEx('heatMapInitialized' in context, 'useHeatMapInitializer must be used within a HeatMapInitializerContext')
+
+  return context
+}
+
+export { useHeatMapInitializer }

package/src/Contexts/MapBoxInstance/Context.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react'
+
+import { MapBoxInstanceState } from './State'
+
+const MapBoxInstanceContext = createContext<MapBoxInstanceState>({})
+
+export { MapBoxInstanceContext }

package/src/Contexts/MapBoxInstance/Provider.tsx

@@ -0,0 +1,23 @@
+import { WithChildren } from '@xylabs/react-shared'
+import { Map } from 'mapbox-gl'
+import { useEffect, useState } from 'react'
+
+import { MapBoxInstanceContext } from './Context'
+import { MapBoxInstanceState } from './State'
+
+export const MapBoxInstanceProvider: React.FC<WithChildren> = ({ children }) => {
+  const [map, setMapBoxInstance] = useState<Map>()
+  const [mapInitialized, setMapInitialized] = useState(false)
+
+  const value: MapBoxInstanceState = { map, mapInitialized, setMapBoxInstance }
+
+  useEffect(() => {
+    if (!mapInitialized && map) {
+      map?.on('load', () => {
+        setMapInitialized(true)
+      })
+    }
+  }, [map, mapInitialized, setMapInitialized])
+
+  return <MapBoxInstanceContext.Provider value={value}>{children}</MapBoxInstanceContext.Provider>
+}

package/src/Contexts/MapBoxInstance/State.ts

@@ -0,0 +1,8 @@
+import { Map } from 'mapbox-gl'
+import { Dispatch, SetStateAction } from 'react'
+
+export interface MapBoxInstanceState {
+  map?: Map
+  mapInitialized?: boolean
+  setMapBoxInstance?: Dispatch<SetStateAction<Map | undefined>>
+}

package/src/Contexts/MapBoxInstance/index.ts

@@ -0,0 +1,2 @@
+export * from './Provider'
+export * from './useMapBoxInstance'

package/src/Contexts/MapBoxInstance/useMapBoxInstance.tsx

@@ -0,0 +1,13 @@
+import { assertEx } from '@xylabs/sdk-js'
+import { useContext } from 'react'
+
+import { MapBoxInstanceContext } from './Context'
+
+const useMapBoxInstance = () => {
+  const context = useContext(MapBoxInstanceContext)
+  assertEx('map' in context, 'useMapBoxInstance must be used within a MapBoxInstanceContext')
+
+  return context
+}
+
+export { useMapBoxInstance }

package/src/Contexts/MapSettings/Context.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react'
+
+import { MapSettingsState } from './State'
+
+const MapSettingsContext = createContext<MapSettingsState>({})
+
+export { MapSettingsContext }

package/src/Contexts/MapSettings/Provider.tsx

@@ -0,0 +1,33 @@
+import { WithChildren } from '@xylabs/react-shared'
+import { useEffect, useState } from 'react'
+
+import { XyoMapSettings } from '../../MapBoxClasses'
+import { MapSetting } from '../../Settings'
+import { useMapBoxInstance } from '../MapBoxInstance'
+import { MapSettingsContext } from './Context'
+import { MapSettingsState } from './State'
+
+interface MapSettingsProviderProps {
+  defaultMapSettings?: MapSetting
+  requestLocation?: boolean
+  zoom?: number
+  debugLayerName?: string
+}
+
+export const MapSettingsProvider: React.FC<WithChildren<MapSettingsProviderProps>> = ({ children, debugLayerName, defaultMapSettings, requestLocation, zoom = 1 }) => {
+  const [mapSettings, setMapSettings] = useState<MapSetting>(defaultMapSettings || {})
+  const { map, mapInitialized } = useMapBoxInstance()
+
+  const value: MapSettingsState = {
+    mapSettings,
+    setMapSettings,
+  }
+
+  useEffect(() => {
+    if (mapSettings && map && mapInitialized) {
+      XyoMapSettings.updateSettings({ debugLayerName, map, requestLocation, settings: mapSettings, zoom })
+    }
+  }, [debugLayerName, map, mapInitialized, mapSettings, requestLocation, zoom])
+
+  return <MapSettingsContext.Provider value={value}>{children}</MapSettingsContext.Provider>
+}

package/src/Contexts/MapSettings/State.ts

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

package/src/Contexts/MapSettings/index.ts

@@ -0,0 +1,2 @@
+export * from './Provider'
+export * from './useMapSettings'

package/src/Contexts/MapSettings/useMapSettings.tsx

@@ -0,0 +1,13 @@
+import { assertEx } from '@xylabs/sdk-js'
+import { useContext } from 'react'
+
+import { MapSettingsContext } from './Context'
+
+const useMapSettings = () => {
+  const context = useContext(MapSettingsContext)
+  assertEx('mapSettings' in context, 'useMapSettings must be used within a MapSettingsContext')
+
+  return context
+}
+
+export { useMapSettings }

package/src/Contexts/MapboxAccessToken/Context.ts

@@ -0,0 +1,5 @@
+import { createContextEx } from '@xyo-network/react-shared'
+
+import { MapboxAccessTokenContextState } from './State'
+
+export const MapboxAccessTokenContext = createContextEx<MapboxAccessTokenContextState>()

package/src/Contexts/MapboxAccessToken/Provider.tsx

@@ -0,0 +1,14 @@
+import { WithChildren } from '@xylabs/react-shared'
+import { useState } from 'react'
+
+import { MapboxAccessTokenContext } from './Context'
+
+export interface MapboxAccessTokenProviderProps {
+  defaultAccessToken?: string
+}
+
+export const MapboxAccessTokenProvider: React.FC<WithChildren<MapboxAccessTokenProviderProps>> = ({ defaultAccessToken, ...props }) => {
+  const [accessToken, setAccessToken] = useState<string>()
+
+  return <MapboxAccessTokenContext.Provider value={{ accessToken: accessToken ?? defaultAccessToken, provided: true, setAccessToken }} {...props} />
+}

package/src/Contexts/MapboxAccessToken/State.ts

@@ -0,0 +1,7 @@
+import { ContextExState } from '@xyo-network/react-shared'
+import { Dispatch } from 'react'
+
+export interface MapboxAccessTokenContextState extends ContextExState {
+  accessToken?: string
+  setAccessToken?: Dispatch<string>
+}

package/src/Contexts/MapboxAccessToken/index.ts

@@ -0,0 +1,4 @@
+export * from './Context'
+export * from './Provider'
+export * from './State'
+export * from './use'

package/src/Contexts/MapboxAccessToken/use.ts

@@ -0,0 +1,7 @@
+import { useContextEx } from '@xyo-network/react-shared'
+
+import { MapboxAccessTokenContext } from './Context'
+
+export const useMapboxAccessToken = (required = false) => {
+  return useContextEx(MapboxAccessTokenContext, 'MapboxAccessToken', required)
+}

package/src/Contexts/index.ts

@@ -0,0 +1,4 @@
+export * from './HeatMapInitializer'
+export * from './MapboxAccessToken'
+export * from './MapBoxInstance'
+export * from './MapSettings'

package/src/Layers/Builders/LocationHeatMapLayerBuilder.ts

@@ -0,0 +1,27 @@
+import { HeatMapFillLayerConfig, HeatMapLineLayerConfig, HeatMapSymbolLayerConfig } from '../Configs'
+import { FillLayerBuilder } from '../FillLayer'
+import { LineLayerBuilder } from '../LineLayer'
+import { SymbolLayerBuilder } from '../SymbolLayer'
+
+export const MapHeatConstants = {
+  LocationDebugLayerId: 'location-debug-id',
+  LocationDebugLayerSource: 'location-debug-source',
+  LocationFillLayerId: 'location-fill-id',
+  LocationFillLayerSource: 'location-fill-source',
+  LocationLineLayerId: 'location-line-id',
+  LocationLineLayerSource: 'location-line-source',
+}
+
+export const LocationHeatMapLayerBuilder = (color: string, alternateColor = '#000') => {
+  const { LocationFillLayerId, LocationFillLayerSource, LocationLineLayerId, LocationLineLayerSource, LocationDebugLayerId, LocationDebugLayerSource } = MapHeatConstants
+
+  const fillLayerConfig = HeatMapFillLayerConfig(color)
+  const lineLayerConfig = HeatMapLineLayerConfig(color)
+  const debugLayerConfig = HeatMapSymbolLayerConfig(alternateColor)
+
+  const fillLayer = new FillLayerBuilder(LocationFillLayerId, LocationFillLayerSource, fillLayerConfig)
+  const lineLayer = new LineLayerBuilder(LocationLineLayerId, LocationLineLayerSource, lineLayerConfig)
+  const debugLayer = new SymbolLayerBuilder(LocationDebugLayerId, LocationDebugLayerSource, debugLayerConfig)
+
+  return [fillLayer, lineLayer, debugLayer]
+}

package/src/Layers/Builders/LocationHeatMapLayerBuilderAnimated.ts

@@ -0,0 +1,21 @@
+import { HeatMapFillLayerConfig } from '../Configs'
+import { FillLayerBuilder } from '../FillLayer'
+
+const MapHeatConstants = (index: number, type: string) => ({
+  LocationDebugLayerId: `location-${type}-debug-id-${index}`,
+  LocationDebugLayerSource: `location-${type}-debug-source-${index}`,
+  LocationFillLayerId: `location-${type}-fill-id-${index}`,
+  LocationFillLayerSource: `location-${type}-fill-source-${index}`,
+  LocationLineLayerId: `location-${type}-line-id-${index}`,
+  LocationLineLayerSource: `location-${type}-line-source-${index}`,
+})
+
+export const LocationHeatMapLayerBuilderAnimated = (color: string, index: number, type = '') => {
+  const { LocationFillLayerId, LocationFillLayerSource } = MapHeatConstants(index, type)
+
+  const fillLayerConfig = HeatMapFillLayerConfig(color)
+
+  const fillLayer = new FillLayerBuilder(LocationFillLayerId, LocationFillLayerSource, fillLayerConfig)
+
+  return fillLayer
+}

package/src/Layers/Builders/LocationPointsMapLayerBuilder.ts

@@ -0,0 +1,17 @@
+import { CircleLayerBuilder } from '../CircleLayer'
+import { LocationPointLayerConfig } from '../Configs'
+
+export const MapPointsConstants = {
+  LocationDotsLayerId: 'location-dots',
+  LocationDotsLayerSource: 'location-dots-source',
+}
+
+export const LocationPointsMapLayerBuilder = (color: string, circleRadius = 6, circleOpacity = 0.8) => {
+  const { LocationDotsLayerId, LocationDotsLayerSource } = MapPointsConstants
+
+  const dotLayerConfig = LocationPointLayerConfig(color, circleRadius, circleOpacity)
+
+  const dotLayer = new CircleLayerBuilder(LocationDotsLayerId, LocationDotsLayerSource, dotLayerConfig)
+
+  return [dotLayer]
+}

package/src/Layers/Builders/index.ts

@@ -0,0 +1,3 @@
+export * from './LocationHeatMapLayerBuilder'
+export * from './LocationHeatMapLayerBuilderAnimated'
+export * from './LocationPointsMapLayerBuilder'

package/src/Layers/CircleLayer.ts

@@ -0,0 +1,29 @@
+import { LayerBase } from '@xyo-network/sdk-geo'
+// eslint-disable-next-line no-restricted-imports
+import { CircleLayer } from 'mapbox-gl'
+
+export class CircleLayerBuilder extends LayerBase<CircleLayer> {
+  CircleLayerOptions: Partial<CircleLayer>
+
+  // ensures this class passes for `AnyLayer` type in MapBox
+  type: 'circle' = 'circle'
+
+  constructor(id: string, source: string, CircleLayerOptions?: Partial<CircleLayer>) {
+    super(id, source)
+    this.CircleLayerOptions = CircleLayerOptions || { id: this.id, source: this.source, type: 'circle' }
+  }
+  buildLayer(): CircleLayer {
+    return {
+      filter: ['==', '$type', 'Point'],
+      layout: {},
+      paint: {
+        'circle-color': '#ff0000',
+        'circle-radius': 6,
+      },
+      type: this.type,
+      ...this.CircleLayerOptions,
+      id: this.id,
+      source: this.source,
+    }
+  }
+}

package/src/Layers/Configs/HeatMapFillLayerConfig.ts

@@ -0,0 +1,8 @@
+import { FillLayer } from 'mapbox-gl'
+
+export const HeatMapFillLayerConfig: (color: string) => Partial<FillLayer> = (color) => ({
+  paint: {
+    'fill-color': color,
+    'fill-opacity': ['let', 'density', ['+', ['/', ['number', ['get', 'value']], 4], 0.125], ['interpolate', ['linear'], ['var', 'density'], 0.8, ['var', 'density'], 1, 0.85]],
+  },
+})