@xyo-network/react-map 7.5.8 → 7.5.11

package/src/Layers/CircleLayer.ts

@@ -1,31 +0,0 @@
-import { LayerBase } from '@xylabs/geo'
-import type { CircleLayerSpecification } from 'mapbox-gl'
-
-export class CircleLayerBuilder extends LayerBase<CircleLayerSpecification> {
-  CircleLayerOptions: Partial<CircleLayerSpecification>
-
-  // ensures this class passes for `AnyLayer` type in MapBox
-  type: 'circle' = 'circle' as const
-
-  constructor(id: string, source: string, CircleLayerOptions?: Partial<CircleLayerSpecification>) {
-    super(id, source)
-    this.CircleLayerOptions = CircleLayerOptions || {
-      id: this.id, source: this.source, type: 'circle',
-    }
-  }
-
-  buildLayer(): CircleLayerSpecification {
-    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

@@ -1,13 +0,0 @@
-import type { FillLayerSpecification } from 'mapbox-gl'
-
-export const HeatMapFillLayerConfig: (color: string) => Partial<FillLayerSpecification> = 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],
-    ],
-  },
-})

package/src/Layers/Configs/HeatMapLineLayerConfig.ts

@@ -1,13 +0,0 @@
-import type { LineLayerSpecification } from 'mapbox-gl'
-
-export const HeatMapLineLayerConfig: (color: string) => Partial<LineLayerSpecification> = 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

@@ -1,18 +0,0 @@
-import type { SymbolLayerSpecification } from 'mapbox-gl'
-
-export const HeatMapSymbolLayerConfig: (color: string) => Partial<SymbolLayerSpecification> = 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

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

package/src/Layers/Configs/index.ts

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

package/src/Layers/FillLayer.ts

@@ -1,23 +0,0 @@
-import { LayerBase } from '@xylabs/geo'
-import type { FillLayerSpecification } from 'mapbox-gl'
-
-export class FillLayerBuilder extends LayerBase<FillLayerSpecification> {
-  FillLayerOptions: Partial<FillLayerSpecification>
-
-  // ensures this class passes for `AnyLayer` type in MapBox
-  type: 'fill' = 'fill' as const
-
-  constructor(id: string, source: string, FillLayerOptions?: Partial<FillLayerSpecification>) {
-    super(id, source)
-    this.FillLayerOptions = FillLayerOptions || { id: this.id, source: this.source }
-  }
-
-  buildLayer(): FillLayerSpecification {
-    return {
-      ...this.FillLayerOptions,
-      id: this.id,
-      source: this.source,
-      type: this.type,
-    }
-  }
-}

package/src/Layers/LineLayer.ts

@@ -1,24 +0,0 @@
-import { LayerBase } from '@xylabs/geo'
-import type { LineLayerSpecification } from 'mapbox-gl'
-
-export class LineLayerBuilder extends LayerBase<LineLayerSpecification> {
-  LineLayerOptions: Partial<LineLayerSpecification>
-
-  // ensures this class passes for `AnyLayer` type in MapBox
-  type: 'line' = 'line' as const
-
-  constructor(id: string, source: string, LineLayerOptions?: Partial<LineLayerSpecification>) {
-    super(id, source)
-    this.LineLayerOptions = LineLayerOptions || { id: this.id, source: this.source }
-  }
-
-  buildLayer(): LineLayerSpecification {
-    return {
-      ...this.LineLayerOptions,
-      id: this.id,
-      layout: {},
-      source: this.source,
-      type: this.type,
-    }
-  }
-}

package/src/Layers/MapLayer.ts

@@ -1,6 +0,0 @@
-import type { LayerBase } from '@xyo-network/sdk-geo'
-import type { Layer, LayerSpecification } from 'mapbox-gl'
-
-export interface MapLayer extends Layer {
-  update: LayerBase<LayerSpecification>['update']
-}

package/src/Layers/SymbolLayer.ts

@@ -1,23 +0,0 @@
-import { LayerBase } from '@xylabs/geo'
-import type { SymbolLayerSpecification } from 'mapbox-gl'
-
-export class SymbolLayerBuilder extends LayerBase<SymbolLayerSpecification> {
-  SymbolLayerOptions: Partial<SymbolLayerSpecification>
-
-  // ensures this class passes for `AnyLayer` type in MapBox
-  type: 'symbol' = 'symbol' as const
-
-  constructor(id: string, source: string, SymbolLayerOptions?: Partial<SymbolLayerSpecification>) {
-    super(id, source)
-    this.SymbolLayerOptions = SymbolLayerOptions || { id: this.id, source: this.source }
-  }
-
-  buildLayer(): SymbolLayerSpecification {
-    return {
-      ...this.SymbolLayerOptions,
-      id: this.id,
-      source: this.source,
-      type: this.type,
-    }
-  }
-}

package/src/Layers/index.ts

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

package/src/MapBoxClasses/MapBase.ts

@@ -1,45 +0,0 @@
-import { GeoJson } from '@xylabs/geo'
-import { assertEx } from '@xylabs/sdk-js'
-import type { Feature, Geometry } from 'geojson'
-import type { GeoJSONSource, Map } from 'mapbox-gl'
-
-import type { MapLayer } from '../Layers/index.ts'
-
-export interface MapBaseConfig<T extends Geometry> {
-  features: Feature<T>[]
-  map: Map
-  requestLocation?: boolean
-  zoom?: number
-}
-
-export abstract class MapBase<T extends Geometry> {
-  private _config: MapBaseConfig<T>
-
-  constructor(config: MapBaseConfig<T>) {
-    this._config = {
-      requestLocation: true, zoom: 2, ...config,
-    }
-  }
-
-  get isMapReady() {
-    return !!this._config.map
-  }
-
-  initializeMapSource(layer: MapLayer) {
-    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 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/MapHeat.ts

@@ -1,184 +0,0 @@
-import { GeoJson } from '@xylabs/geo'
-import {
-  assertEx, delay, forget,
-} from '@xylabs/sdk-js'
-import type { Feature, Polygon } from 'geojson'
-import type {
-  DataDrivenPropertyValueSpecification,
-  GeoJSONSource, GeoJSONSourceSpecification, Map, MapOptions,
-} from 'mapbox-gl'
-import { LngLatBounds } from 'mapbox-gl'
-
-import type { MapLayer } from '../Layers/index.ts'
-import type { MapBaseConfig } from './MapBase.ts'
-import { MapBase } from './MapBase.ts'
-
-export class MapHeat extends MapBase<Polygon> {
-  // eslint-disable-next-line sonarjs/public-static-readonly
-  static animationStarted = false
-
-  config: MapBaseConfig<Polygon>
-  constructor(config: MapBaseConfig<Polygon>) {
-    super(config)
-    this.config = config
-  }
-
-  static initialMapPositioning(options: MapOptions['fitBoundsOptions'], map: Map, features?: Feature<Polygon>[], initialBounds?: LngLatBounds) {
-    if (!features) {
-      return
-    }
-
-    let bounds: LngLatBounds
-
-    if (initialBounds) {
-      bounds = initialBounds
-    } else {
-      bounds = new LngLatBounds()
-
-      // eslint-disable-next-line unicorn/no-array-for-each
-      features.forEach((feature: Feature<Polygon>) => {
-        for (const coordinates of feature.geometry.coordinates) {
-          for (const position of coordinates) {
-            bounds.extend(position as [number, number])
-          }
-        }
-      })
-    }
-
-    map.setCenter(bounds.getCenter())
-    map.fitBounds(bounds, options)
-    return this
-  }
-
-  static async initializeAnimatedHeatMapSource(
-    layers: MapLayer[],
-    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])
-
-    for (const layer of layers) {
-      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): DataDrivenPropertyValueSpecification<string> => {
-      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()
-  }
-
-  private static updateLayer(map: Map, layer: MapLayer, source: GeoJSONSourceSpecification) {
-    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: MapLayer[]) {
-    const getSource = (_: number) => {
-      const featuresCollection = GeoJson.featureCollection(this.config.features)
-      return GeoJson.featuresSource(featuresCollection)
-    }
-
-    for (const [index, layer] of layers.entries()) {
-      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/MapPoints.ts

@@ -1,39 +0,0 @@
-import type { Feature, Point } from 'geojson'
-import type { MapOptions } from 'mapbox-gl'
-import { LngLatBounds } from 'mapbox-gl'
-
-import type { MapBaseConfig } from './MapBase.ts'
-import { MapBase } from './MapBase.ts'
-
-export interface MapPointsConfig extends MapBaseConfig<Point> {
-  features: Feature<Point>[]
-}
-
-export class MapPoints extends MapBase<Point> {
-  private config: MapPointsConfig
-
-  constructor(config: MapPointsConfig) {
-    super(config)
-    this.config = config
-  }
-
-  initialMapPositioning(options: MapOptions['fitBoundsOptions'], initialBounds?: LngLatBounds) {
-    let bounds: LngLatBounds
-
-    if (initialBounds) {
-      bounds = initialBounds
-    } else {
-      bounds = new LngLatBounds()
-
-      // eslint-disable-next-line unicorn/no-array-for-each
-      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/MapSettings.ts

@@ -1,132 +0,0 @@
-import type { MapSetting } from '@xyo-network/react-map-model'
-import type {
-  Map, MapEventOf, MapEventType,
-} from 'mapbox-gl'
-import { GeolocateControl, NavigationControl } from 'mapbox-gl'
-
-export interface MapSettingsConfig {
-  debugLayerName?: string
-  map: Map
-  requestLocation?: boolean
-  settings: MapSetting
-  zoom?: number
-}
-
-/**
- * Utility class to handle changes in settings
- *
- * Methods are pure functions dedicated to map manipulation
- */
-export class MapSettings {
-  // eslint-disable-next-line sonarjs/public-static-readonly
-  static geoLocateControl: GeolocateControl | undefined
-  // eslint-disable-next-line sonarjs/public-static-readonly
-  static mapListeners = {
-    logData: (ev?: MapEventOf<MapEventType>, map?: Map) => {
-      const target = map || ev?.target
-      if (target) {
-        console.log('zoom', target.getZoom())
-        console.log('center', target.getCenter())
-      }
-    },
-  }
-
-  // eslint-disable-next-line sonarjs/public-static-readonly
-  static navControl: NavigationControl | undefined
-  // eslint-disable-next-line sonarjs/public-static-readonly
-  static requestLocation: boolean | undefined
-
-  static toggleControls(value: boolean | undefined, map: Map, zoom?: number, requestLocation?: boolean) {
-    if (value) {
-      MapSettings.addControls(map, zoom, requestLocation)
-    } else {
-      MapSettings.removeControls(map)
-    }
-
-    return this
-  }
-
-  static toggleDebugLayer(value: boolean | undefined, map: Map, layerName: string) {
-    const debugLayer = map.getLayer(layerName)
-    if (debugLayer) {
-      if (value) {
-        map.setLayoutProperty(layerName, 'visibility', 'visible')
-      } else {
-        map.setLayoutProperty(layerName, 'visibility', 'none')
-      }
-    }
-
-    return this
-  }
-
-  static toggleDebugLogging(value: boolean | undefined, map: Map) {
-    const debugEvents: MapEventType[] = ['resize', 'zoomend', 'dragend']
-    if (value) {
-      // initial values
-      this.mapListeners.logData(undefined, map)
-      for (const event of debugEvents) map.on(event, this.mapListeners.logData)
-    } else {
-      for (const event of debugEvents) map.off(event, this.mapListeners.logData)
-    }
-  }
-
-  static toggleScrollToZoom(value: boolean | undefined, map: Map) {
-    if (value) {
-      map.scrollZoom.enable()
-    } else {
-      map.scrollZoom.disable()
-    }
-
-    return this
-  }
-
-  static updateSettings(config: MapSettingsConfig) {
-    const {
-      settings, map, zoom, requestLocation, debugLayerName = '',
-    } = config
-    const {
-      scrollToZoom, enableControls, debugLayer, debugLogging,
-    } = settings
-
-    MapSettings.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({
-      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) && 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) && this.requestLocation) {
-      map.removeControl(this.geoLocateControl)
-    }
-
-    if (this.navControl && map.hasControl(this.navControl)) {
-      map.removeControl(this.navControl)
-    }
-
-    return this
-  }
-}

package/src/MapBoxClasses/index.ts

@@ -1,4 +0,0 @@
-export * from './MapBase.ts'
-export * from './MapHeat.ts'
-export * from './MapPoints.ts'
-export * from './MapSettings.ts'

package/src/global.d.ts

@@ -1 +0,0 @@
-import '@mui/material/themeCssVarsAugmentation'

package/src/hooks/index.ts

@@ -1,3 +0,0 @@
-export * from './useDynamicMapResize.tsx'
-export * from './useDynamicPositioning.tsx'
-export * from './useQuadKeyPayloadsToFeatures.tsx'

package/src/hooks/useDynamicMapResize.tsx

@@ -1,43 +0,0 @@
-import type { Map } from 'mapbox-gl'
-import type { RefObject } from 'react'
-import { useEffect, useMemo } from 'react'
-
-/**
- * Inspired by - https://bl.ocks.org/danswick/fc56f37c10d40be62e4feac5984250d2
- */
-export const useDynamicMapResize = (
-  mapContainerRef: RefObject<HTMLDivElement | null>,
-  mapCanvasRef: RefObject<HTMLCanvasElement | null>,
-  mapInstance?: Map,
-  active = true,
-) => {
-  const resizer = useMemo(
-    () =>
-      new ResizeObserver(() => {
-        const width = mapContainerRef.current?.getBoundingClientRect().width
-        if (width && mapCanvasRef.current) {
-          mapCanvasRef.current.style.width = `${width}px`
-          // setTimeout allows for the smoothest animation (vs requestAnimationFrame, debouce, etc)
-          // likely because it lets mapbox resize once when the event loop is ready?
-          setTimeout(() => mapInstance?.resize())
-        }
-      }),
-    [mapCanvasRef, mapContainerRef, mapInstance],
-  )
-
-  const dependenciesReady = useMemo(() => {
-    return !!(active && mapInstance && mapContainerRef?.current && mapCanvasRef.current)
-  }, [active, mapCanvasRef, mapContainerRef, mapInstance])
-
-  useEffect(() => {
-    if (dependenciesReady) {
-      if (mapContainerRef.current) {
-        resizer.observe(mapContainerRef.current)
-      }
-
-      return () => {
-        resizer.disconnect()
-      }
-    }
-  }, [active, dependenciesReady, mapCanvasRef, mapContainerRef, mapInstance, resizer])
-}