@xyo-network/react-map 2.26.44

package/src/Layers/Configs/HeatMapLineLayerConfig.ts

@@ -0,0 +1,13 @@
+import { LineLayer } from 'mapbox-gl'
+
+export const HeatMapLineLayerConfig: (color: string) => Partial<LineLayer> = (color) => ({
+  layout: {
+    // Enable for debugging
+    visibility: 'none',
+  },
+  paint: {
+    'line-color': color,
+    'line-opacity': ['let', 'density', 0, ['interpolate', ['linear'], ['var', 'density'], 0.8, ['var', 'density'], 1, 0.85]],
+    'line-width': 0.5,
+  },
+})

package/src/Layers/Configs/HeatMapSymbolLayerConfig.ts

@@ -0,0 +1,13 @@
+import { SymbolLayer } from 'mapbox-gl'
+
+export const HeatMapSymbolLayerConfig: (color: string) => Partial<SymbolLayer> = (color) => ({
+  layout: {
+    'text-anchor': 'center',
+    'text-field': ['concat', 'value: ', ['to-string', ['+', ['/', ['number', ['get', 'value']], 2], 0.25]], '\n', 'count: ', ['to-string', ['get', 'count']]],
+    'text-size': 10,
+    visibility: 'none',
+  },
+  paint: {
+    'text-color': color,
+  },
+})

package/src/Layers/Configs/LocationPointLayerConfig.ts

@@ -0,0 +1,11 @@
+import { CircleLayer } from 'mapbox-gl'
+
+export const LocationPointLayerConfig: (color: string, circleRadius: number, circleOpacity: number) => Partial<CircleLayer> = (color, circleRadius, circleOpacity) => {
+  return {
+    paint: {
+      'circle-color': color,
+      'circle-opacity': circleOpacity,
+      'circle-radius': circleRadius,
+    },
+  }
+}

package/src/Layers/Configs/index.ts

@@ -0,0 +1,4 @@
+export * from './HeatMapFillLayerConfig'
+export * from './HeatMapLineLayerConfig'
+export * from './HeatMapSymbolLayerConfig'
+export * from './LocationPointLayerConfig'

package/src/Layers/FillLayer.ts

@@ -0,0 +1,23 @@
+import { LayerBase } from '@xyo-network/sdk-geo'
+// eslint-disable-next-line no-restricted-imports
+import { FillLayer } from 'mapbox-gl'
+
+export class FillLayerBuilder extends LayerBase<FillLayer> {
+  FillLayerOptions: Partial<FillLayer>
+
+  // ensures this class passes for `AnyLayer` type in MapBox
+  type: 'fill' = 'fill'
+
+  constructor(id: string, source: string, FillLayerOptions?: Partial<FillLayer>) {
+    super(id, source)
+    this.FillLayerOptions = FillLayerOptions || { id: this.id, source: this.source }
+  }
+  buildLayer(): FillLayer {
+    return {
+      ...this.FillLayerOptions,
+      id: this.id,
+      source: this.source,
+      type: this.type,
+    }
+  }
+}

package/src/Layers/LineLayer.ts

@@ -0,0 +1,24 @@
+import { LayerBase } from '@xyo-network/sdk-geo'
+// eslint-disable-next-line no-restricted-imports
+import { LineLayer } from 'mapbox-gl'
+
+export class LineLayerBuilder extends LayerBase<LineLayer> {
+  LineLayerOptions: Partial<LineLayer>
+
+  // ensures this class passes for `AnyLayer` type in MapBox
+  type: 'line' = 'line'
+
+  constructor(id: string, source: string, LineLayerOptions?: Partial<LineLayer>) {
+    super(id, source)
+    this.LineLayerOptions = LineLayerOptions || { id: this.id, source: this.source }
+  }
+  buildLayer(): LineLayer {
+    return {
+      ...this.LineLayerOptions,
+      id: this.id,
+      layout: {},
+      source: this.source,
+      type: this.type,
+    }
+  }
+}

package/src/Layers/SymbolLayer.ts

@@ -0,0 +1,23 @@
+import { LayerBase } from '@xyo-network/sdk-geo'
+// eslint-disable-next-line no-restricted-imports
+import { SymbolLayer } from 'mapbox-gl'
+
+export class SymbolLayerBuilder extends LayerBase<SymbolLayer> {
+  SymbolLayerOptions: Partial<SymbolLayer>
+
+  // ensures this class passes for `AnyLayer` type in MapBox
+  type: 'symbol' = 'symbol'
+
+  constructor(id: string, source: string, SymbolLayerOptions?: Partial<SymbolLayer>) {
+    super(id, source)
+    this.SymbolLayerOptions = SymbolLayerOptions || { id: this.id, source: this.source }
+  }
+  buildLayer(): SymbolLayer {
+    return {
+      ...this.SymbolLayerOptions,
+      id: this.id,
+      source: this.source,
+      type: this.type,
+    }
+  }
+}

package/src/Layers/XyoMapLayer.ts

@@ -0,0 +1,7 @@
+import { LayerBase } from '@xyo-network/sdk-geo'
+// eslint-disable-next-line no-restricted-imports
+import { AnyLayer, Layer } from 'mapbox-gl'
+
+export interface XyoMapLayer extends Layer {
+  update: LayerBase<AnyLayer>['update']
+}

package/src/Layers/index.ts

@@ -0,0 +1,7 @@
+export * from './Builders'
+export * from './CircleLayer'
+export * from './Configs'
+export * from './FillLayer'
+export * from './LineLayer'
+export * from './SymbolLayer'
+export * from './XyoMapLayer'

package/src/MapBoxClasses/XyoMapBase.ts

@@ -0,0 +1,44 @@
+import { assertEx } from '@xylabs/sdk-js'
+import { GeoJson } from '@xyo-network/sdk-geo'
+import { Feature, Geometry } from 'geojson'
+// eslint-disable-next-line no-restricted-imports
+import { GeoJSONSource, Map } from 'mapbox-gl'
+
+import { XyoMapLayer } from '../Layers'
+
+export interface XyoMapBaseConfig<T extends Geometry> {
+  map: Map
+  features: Feature<T>[]
+  requestLocation?: boolean
+  zoom?: number
+}
+
+export abstract class XyoMapBase<T extends Geometry> {
+  private _config: XyoMapBaseConfig<T>
+
+  constructor(config: XyoMapBaseConfig<T>) {
+    this._config = { requestLocation: true, zoom: 2, ...config }
+  }
+
+  get isMapReady() {
+    return !!this._config.map
+  }
+
+  initializeMapSource(layer: XyoMapLayer) {
+    const getSource = () => {
+      const featuresCollection = GeoJson.featureCollection(this._config.features)
+      return GeoJson.featuresSource(featuresCollection)
+    }
+
+    const existingSource = this._config.map.getSource(layer.source as string) as GeoJSONSource
+    const source = getSource()
+    if (existingSource) {
+      existingSource.setData(assertEx(source.data))
+    } else {
+      this._config.map.addSource(layer.source as string, source)
+    }
+    layer.update(this._config.map, true)
+
+    return this
+  }
+}

package/src/MapBoxClasses/XyoMapHeat.ts

@@ -0,0 +1,164 @@
+import { assertEx, delay, forget } from '@xylabs/sdk-js'
+import { GeoJson } from '@xyo-network/sdk-geo'
+import { Feature, Polygon } from 'geojson'
+import { FitBoundsOptions, GeoJSONSource, GeoJSONSourceRaw, LngLatBounds, Map } from 'mapbox-gl'
+
+import { XyoMapLayer } from '../Layers'
+import { XyoMapBase, XyoMapBaseConfig } from './XyoMapBase'
+
+export class XyoMapHeat extends XyoMapBase<Polygon> {
+  static animationStarted = false
+
+  config: XyoMapBaseConfig<Polygon>
+  constructor(config: XyoMapBaseConfig<Polygon>) {
+    super(config)
+    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))
+      } 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
+    }
+
+    let bounds: LngLatBounds
+
+    if (initialBounds) {
+      bounds = initialBounds
+    } else {
+      bounds = new LngLatBounds()
+
+      features.forEach((feature: Feature<Polygon>) => {
+        feature.geometry.coordinates.forEach((coordinates) => {
+          coordinates.forEach((position) => {
+            bounds.extend(position as [number, number])
+          })
+        })
+      })
+    }
+
+    map.setCenter(bounds.getCenter())
+    map.fitBounds(bounds, options)
+    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)
+    } else if (source) {
+      map.addSource(layer.source as string, source)
+    }
+    layer.update(map, true)
+  }
+
+  static async initializeAnimatedHeatMapSource(layers: XyoMapLayer[], featureSet: Feature<Polygon>[][], map: Map, startColor?: string, endColor?: string) {
+    this.animationStarted = true
+    let layerTick = 0
+    let sourceTick = 0
+
+    const sources = featureSet.map((feature) => {
+      const featuresCollection = GeoJson.featureCollection(feature)
+      return GeoJson.featuresSource(featuresCollection)
+    })
+    this.updateLayer(map, layers[0], sources[0])
+    this.updateLayer(map, layers[1], sources[1])
+
+    layers.forEach((layer) => {
+      map.setPaintProperty(layer.id, 'fill-opacity', 0)
+    })
+
+    const frameLength = 3000
+    const initialPad = 0.5
+    const factor = 10
+    const steps = 30
+    const stepLength = frameLength / steps
+    const lowUsageColor = startColor ?? '#FFB3B3'
+    const highUsageColor = endColor ?? '#FF0000'
+
+    // Max density at i=0, min density at i=steps
+    const dynamicFillColor = (factor: number, initialPad: number, i: number) => {
+      const sinFade = Math.sin(((i / steps) * Math.PI) / 2)
+      const cosFade = Math.cos(((i / steps) * Math.PI) / 2)
+      // we want the divisor to always be at least 1x the desired factor but will go up to
+      // 2x factor to account for combinative effect of the overlay of two layers at once
+      const divisor = factor + factor * sinFade
+      const offset = initialPad * cosFade
+      return ['let', 'density', ['+', ['/', ['number', ['get', 'value']], divisor], offset], ['interpolate', ['linear'], ['var', 'density'], 0, lowUsageColor, 0.5, highUsageColor]]
+    }
+
+    const fadedIn: boolean[] = layers.map((_) => false)
+
+    const fadeIn = async (id: string, index: number) => {
+      for (let i = steps; i >= 1; i--) {
+        map.setPaintProperty(id, 'fill-color', dynamicFillColor(factor, initialPad, i * (180 / stepLength)))
+        await delay(stepLength)
+      }
+      fadedIn[index] = true
+    }
+
+    const fadeOut = async (id: string, index: number) => {
+      for (let i = 1; i <= steps; i++) {
+        map.setPaintProperty(id, 'fill-color', dynamicFillColor(factor, initialPad, i * (180 / stepLength)))
+        await delay(stepLength)
+      }
+      fadedIn[index] = false
+    }
+
+    let started = false
+    const startAnimation = async () => {
+      assertEx(!started, 'Animation Already Started')
+      started = true
+      while (this.animationStarted) {
+        const upLayer = layerTick % layers.length
+        const downLayer = (layerTick + 1) % layers.length
+
+        const incomingSource = sourceTick % featureSet.length
+        const outgoingSource = (sourceTick + 1) % featureSet.length
+
+        // console.log('incoming / outgoing source', incomingSource, outgoingSource)
+
+        // console.log(`animate: [${upLayer}, ${downLayer}]`)
+        if (fadedIn[upLayer]) {
+          this.updateLayer(map, layers[upLayer], sources[incomingSource])
+          forget(fadeOut(layers[upLayer].id, upLayer))
+        }
+        if (!fadedIn[downLayer]) {
+          this.updateLayer(map, layers[downLayer], sources[outgoingSource])
+          forget(fadeIn(layers[downLayer].id, downLayer))
+        }
+        while ((fadedIn[upLayer] || !fadedIn[downLayer]) && this.animationStarted) {
+          // console.log(`checking: [${fadedIn[upLayer]}, ${!fadedIn[downLayer]}]`)
+          await delay(1000)
+        }
+        layerTick++
+        sourceTick++
+
+        // console.log(`this.layerTick: ${layerTick}`)
+        // console.log(`this.sourceTick: ${sourceTick}`)
+      }
+    }
+
+    await startAnimation()
+  }
+}

package/src/MapBoxClasses/XyoMapPoints.ts

@@ -0,0 +1,37 @@
+import { Feature, Point } from 'geojson'
+// eslint-disable-next-line no-restricted-imports
+import { FitBoundsOptions, LngLatBounds } from 'mapbox-gl'
+
+import { XyoMapBase, XyoMapBaseConfig } from './XyoMapBase'
+
+export interface XyoMapPointsConfig extends XyoMapBaseConfig<Point> {
+  features: Feature<Point>[]
+}
+
+export class XyoMapPoints extends XyoMapBase<Point> {
+  private config: XyoMapPointsConfig
+
+  constructor(config: XyoMapPointsConfig) {
+    super(config)
+    this.config = config
+  }
+
+  initialMapPositioning(options: FitBoundsOptions, initialBounds?: LngLatBounds) {
+    let bounds: LngLatBounds
+
+    if (initialBounds) {
+      bounds = initialBounds
+    } else {
+      bounds = new LngLatBounds()
+
+      this.config.features.forEach((feature: Feature<Point>) => {
+        bounds.extend(feature.geometry.coordinates as [number, number])
+      })
+    }
+
+    this.config.map.setCenter(bounds.getCenter())
+    this.config.map.fitBounds(bounds, options)
+
+    return this.config.map
+  }
+}

package/src/MapBoxClasses/XyoMapSettings.ts

@@ -0,0 +1,130 @@
+import { EventData, GeolocateControl, Map, MapLayerMouseEvent, MapLayerTouchEvent, NavigationControl } from 'mapbox-gl'
+
+import { MapSetting } from '../Settings'
+
+export interface XyoMapSettingsConfig {
+  settings: MapSetting
+  map: Map
+  zoom?: number
+  requestLocation?: boolean
+  debugLayerName?: string
+}
+
+/**
+ * Utility class to handle changes in settings
+ *
+ * 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
+      if (target) {
+        console.log('zoom', target.getZoom())
+        console.log('center', target.getCenter())
+      }
+    },
+  }
+
+  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 toggleControls(value: boolean | undefined, map: Map, zoom?: number, requestLocation?: boolean) {
+    if (value) {
+      XyoMapSettings.addControls(map, zoom, requestLocation)
+    } else {
+      XyoMapSettings.removeControls(map)
+    }
+
+    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, layer: string) {
+    if (layer && map.getLayer(layer)) {
+      if (value) {
+        map.setLayoutProperty(layer, 'visibility', 'visible')
+      } else {
+        map.setLayoutProperty(layer, 'visibility', 'none')
+      }
+    }
+
+    return this
+  }
+
+  static toggleDebugLogging(value: boolean | undefined, map: Map) {
+    const debugEvents = ['resize', 'zoomend', 'dragend']
+    if (value) {
+      // initial values
+      this.mapListeners.logData(undefined, map)
+      debugEvents.forEach((event) => map.on(event, this.mapListeners.logData))
+    } else {
+      debugEvents.forEach((event) => map.off(event, this.mapListeners.logData))
+    }
+  }
+
+  // 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({
+      fitBoundsOptions: {
+        zoom: zoom || 2,
+      },
+      positionOptions: {
+        enableHighAccuracy: true,
+      },
+      trackUserLocation: true,
+    })
+
+    const navControl = new NavigationControl({
+      showCompass: false,
+    })
+
+    this.geoLocateControl = this.geoLocateControl || geolocateControl
+    this.navControl = this.navControl || navControl
+
+    if (!map.hasControl(this.geoLocateControl)) {
+      if (requestLocation) {
+        map.addControl(this.geoLocateControl)
+      }
+    }
+
+    if (!map.hasControl(this.navControl)) {
+      map.addControl(this.navControl, 'top-left')
+    }
+
+    return this
+  }
+
+  private static removeControls(map: Map) {
+    if (this.geoLocateControl && map.hasControl(this.geoLocateControl)) {
+      if (this.requestLocation) {
+        map.removeControl(this.geoLocateControl)
+      }
+    }
+
+    if (this.navControl && map.hasControl(this.navControl)) {
+      map.removeControl(this.navControl)
+    }
+
+    return this
+  }
+}

package/src/MapBoxClasses/index.ts

@@ -0,0 +1,4 @@
+export * from './XyoMapBase'
+export * from './XyoMapHeat'
+export * from './XyoMapPoints'
+export * from './XyoMapSettings'

package/src/Settings/DefaultMapSettings.ts

@@ -0,0 +1,43 @@
+import { MapSetting } from './MapSetting'
+
+export const DefaultMapSettings: () => MapSetting = () => ({
+  debugLayer: {
+    devMode: true,
+    field: 'debugLayer',
+    hidden: true,
+    label: 'Debug Layer',
+    value: false,
+  },
+  debugLogging: {
+    devMode: true,
+    field: 'debugLogging',
+    label: 'Debug Logging',
+    value: false,
+  },
+  enableControls: {
+    devMode: true,
+    field: 'enableControls',
+    label: 'Map Controls',
+    value: false,
+  },
+  fitToPoints: {
+    devMode: true,
+    field: 'fitToPoints',
+    hidden: true,
+    label: 'Fit To Points',
+    value: false,
+  },
+  preferDark: {
+    devMode: false,
+    field: 'preferDark',
+    hidden: true,
+    label: 'Prefer dark',
+    value: false,
+  },
+  scrollToZoom: {
+    devMode: true,
+    field: 'scrollToZoom',
+    label: 'Scroll To Zoom',
+    value: false,
+  },
+})

package/src/Settings/MapSetting.ts

@@ -0,0 +1,11 @@
+type MapSettingFields = 'debugLayer' | 'fitToPoints' | 'scrollToZoom' | 'enableControls' | 'debugLogging' | 'preferDark'
+
+export type MapSetting = {
+  [field in MapSettingFields | string]: {
+    value: boolean
+    field: string
+    label: string
+    hidden?: boolean
+    devMode?: boolean
+  }
+}

package/src/Settings/index.ts

@@ -0,0 +1,2 @@
+export * from './DefaultMapSettings'
+export * from './MapSetting'

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+export * from './useDynamicPositioning'
+export * from './useFetchPayloads'
+export * from './useFindHashes'
+export * from './useHeatMapColors'
+export * from './useQuadKeyPayloadsToFeatures'

package/src/hooks/useDynamicPositioning.tsx

@@ -0,0 +1,69 @@
+import { useWindowSize } from '@xylabs/react-shared'
+import { MapboxOptions } from 'mapbox-gl'
+import { useEffect, useState } from 'react'
+
+/**
+ * Zoom level for the map
+ *
+ * Note: Changing zoom will require changes to Lat/Lng Ranges
+ */
+const defaultZoom = 1.6
+
+/**
+ * Range of aspect ratio values (width / height = aspect ratio) to scale against degrees
+ * On lower aspect ratios, the width is larger than the height and vice-versa for higher
+ */
+const defaultAspectRatioRange = [0.5, 2]
+
+/**
+ * Lat/Lng ranges, the first index is the minimum and the second is the maximum
+ * Index 0 is for portrait screens and centers on the Eastern Hemisphere
+ * Index 1 is for wider screens near the Prime Meridian and north of the Equator
+ *
+ * Note: Values are based off the zoom level
+ */
+const latRange = [0.9121644205263664, 1.71785031559439]
+const lngRange = [-81.4742014851959, 12.788958675506933]
+
+/**
+ * Function to interpolate an aspect ratio value across a range of degrees and aspect ratios
+ *
+ * Inspired by - https://stackoverflow.com/questions/14224535/scaling-between-two-number-ranges
+ *
+ * @param aspectRatio aspect ratio to scale
+ * @param degreeRange A latitude or longitude range (i.e. [minLat, maxLat])
+ * @param aspectRatioRange A range of aspect ratios to scale against degreeRange parameter
+ * @returns number
+ */
+const linearInterpolate = (aspectRatio: number, degreeRange: number[], aspectRatioRange?: number[]): number => {
+  const [degreeMin, degreeMax] = degreeRange
+  const [aspectRatioMin, aspectRatioMax] = aspectRatioRange || defaultAspectRatioRange
+
+  const aspectRatioRangeSpan = aspectRatioMax - aspectRatioMin
+  const degreeRangeSpan = degreeMax - degreeMin
+
+  const percent = (aspectRatio - aspectRatioMin) / aspectRatioRangeSpan
+  const scaledDegree = percent * degreeRangeSpan + degreeMin
+
+  return scaledDegree
+}
+
+const useDynamicPositioning = () => {
+  const [options, setOptions] = useState<Partial<MapboxOptions>>({})
+  const { width, height } = useWindowSize()
+
+  useEffect(() => {
+    if (width && height) {
+      const aspectRatio = width / height
+
+      setOptions({
+        center: [linearInterpolate(aspectRatio, lngRange), linearInterpolate(aspectRatio, latRange)],
+        zoom: defaultZoom,
+      })
+    }
+  }, [height, width])
+
+  return { options }
+}
+
+export { useDynamicPositioning }