@xyo-network/react-map 2.81.1 → 2.81.2

package/src/Layers/CircleLayer.ts

@@ -1,18 +1,17 @@
 import { LayerBase } from '@xyo-network/sdk-geo'
-// eslint-disable-next-line no-restricted-imports
-import { CircleLayer } from 'mapbox-gl'
+import { CircleLayerSpecification } from 'mapbox-gl'
 
-export class CircleLayerBuilder extends LayerBase<CircleLayer> {
-  CircleLayerOptions: Partial<CircleLayer>
+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<CircleLayer>) {
+  constructor(id: string, source: string, CircleLayerOptions?: Partial<CircleLayerSpecification>) {
     super(id, source)
     this.CircleLayerOptions = CircleLayerOptions || { id: this.id, source: this.source, type: 'circle' }
   }
-  buildLayer(): CircleLayer {
+  buildLayer(): CircleLayerSpecification {
     return {
       filter: ['==', '$type', 'Point'],
       layout: {},

package/src/Layers/Configs/HeatMapFillLayerConfig.ts

@@ -1,6 +1,6 @@
-import { FillLayer } from 'mapbox-gl'
+import { FillLayerSpecification } from 'mapbox-gl'
 
-export const HeatMapFillLayerConfig: (color: string) => Partial<FillLayer> = (color) => ({
+export const HeatMapFillLayerConfig: (color: string) => Partial<FillLayerSpecification> = (color) => ({
   paint: {
     'fill-color': color,
     'fill-opacity': [

package/src/Layers/Configs/HeatMapLineLayerConfig.ts

@@ -1,6 +1,6 @@
-import { LineLayer } from 'mapbox-gl'
+import { LineLayerSpecification } from 'mapbox-gl'
 
-export const HeatMapLineLayerConfig: (color: string) => Partial<LineLayer> = (color) => ({
+export const HeatMapLineLayerConfig: (color: string) => Partial<LineLayerSpecification> = (color) => ({
   layout: {
     // Enable for debugging
     visibility: 'none',

package/src/Layers/Configs/HeatMapSymbolLayerConfig.ts

@@ -1,6 +1,6 @@
-import { SymbolLayer } from 'mapbox-gl'
+import { SymbolLayerSpecification } from 'mapbox-gl'
 
-export const HeatMapSymbolLayerConfig: (color: string) => Partial<SymbolLayer> = (color) => ({
+export const HeatMapSymbolLayerConfig: (color: string) => Partial<SymbolLayerSpecification> = (color) => ({
   layout: {
     'text-anchor': 'center',
     'text-field': [

package/src/Layers/Configs/LocationPointLayerConfig.ts

@@ -1,6 +1,6 @@
-import { CircleLayer } from 'mapbox-gl'
+import { CircleLayerSpecification } from 'mapbox-gl'
 
-export const LocationPointLayerConfig: (color: string, circleRadius: number, circleOpacity: number) => Partial<CircleLayer> = (
+export const LocationPointLayerConfig: (color: string, circleRadius: number, circleOpacity: number) => Partial<CircleLayerSpecification> = (
   color,
   circleRadius,
   circleOpacity,

package/src/Layers/FillLayer.ts

@@ -1,18 +1,17 @@
 import { LayerBase } from '@xyo-network/sdk-geo'
-// eslint-disable-next-line no-restricted-imports
-import { FillLayer } from 'mapbox-gl'
+import { FillLayerSpecification } from 'mapbox-gl'
 
-export class FillLayerBuilder extends LayerBase<FillLayer> {
-  FillLayerOptions: Partial<FillLayer>
+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<FillLayer>) {
+  constructor(id: string, source: string, FillLayerOptions?: Partial<FillLayerSpecification>) {
     super(id, source)
     this.FillLayerOptions = FillLayerOptions || { id: this.id, source: this.source }
   }
-  buildLayer(): FillLayer {
+  buildLayer(): FillLayerSpecification {
     return {
       ...this.FillLayerOptions,
       id: this.id,

package/src/Layers/LineLayer.ts

@@ -1,18 +1,17 @@
 import { LayerBase } from '@xyo-network/sdk-geo'
-// eslint-disable-next-line no-restricted-imports
-import { LineLayer } from 'mapbox-gl'
+import { LineLayerSpecification } from 'mapbox-gl'
 
-export class LineLayerBuilder extends LayerBase<LineLayer> {
-  LineLayerOptions: Partial<LineLayer>
+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<LineLayer>) {
+  constructor(id: string, source: string, LineLayerOptions?: Partial<LineLayerSpecification>) {
     super(id, source)
     this.LineLayerOptions = LineLayerOptions || { id: this.id, source: this.source }
   }
-  buildLayer(): LineLayer {
+  buildLayer(): LineLayerSpecification {
     return {
       ...this.LineLayerOptions,
       id: this.id,

package/src/Layers/MapLayer.ts

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

package/src/Layers/SymbolLayer.ts

@@ -1,18 +1,17 @@
 import { LayerBase } from '@xyo-network/sdk-geo'
-// eslint-disable-next-line no-restricted-imports
-import { SymbolLayer } from 'mapbox-gl'
+import { SymbolLayerSpecification } from 'mapbox-gl'
 
-export class SymbolLayerBuilder extends LayerBase<SymbolLayer> {
-  SymbolLayerOptions: Partial<SymbolLayer>
+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<SymbolLayer>) {
+  constructor(id: string, source: string, SymbolLayerOptions?: Partial<SymbolLayerSpecification>) {
     super(id, source)
     this.SymbolLayerOptions = SymbolLayerOptions || { id: this.id, source: this.source }
   }
-  buildLayer(): SymbolLayer {
+  buildLayer(): SymbolLayerSpecification {
     return {
       ...this.SymbolLayerOptions,
       id: this.id,

package/src/MapBoxClasses/MapBase.ts

@@ -1,7 +1,6 @@
 import { assertEx } from '@xylabs/assert'
 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 { MapLayer } from '../Layers/index.js'

package/src/MapBoxClasses/MapPoints.ts

@@ -1,6 +1,6 @@
 import { Feature, Point } from 'geojson'
 // eslint-disable-next-line no-restricted-imports
-import { FitBoundsOptions, LngLatBounds } from 'mapbox-gl'
+import { LngLatBounds, MapOptions } from 'mapbox-gl'
 
 import { MapBase, MapBaseConfig } from './MapBase.js'
 
@@ -16,7 +16,7 @@ export class MapPoints extends MapBase<Point> {
     this.config = config
   }
 
-  initialMapPositioning(options: FitBoundsOptions, initialBounds?: LngLatBounds) {
+  initialMapPositioning(options: MapOptions['fitBoundsOptions'], initialBounds?: LngLatBounds) {
     let bounds: LngLatBounds
 
     if (initialBounds) {

package/src/hooks/useDynamicPositioning.tsx

@@ -1,5 +1,5 @@
 import { useWindowSize } from '@xylabs/react-shared'
-import { MapboxOptions } from 'mapbox-gl'
+import { MapOptions } from 'mapbox-gl'
 import { useEffect, useState } from 'react'
 
 /**
@@ -49,7 +49,7 @@ const linearInterpolate = (aspectRatio: number, degreeRange: number[], aspectRat
 }
 
 const useDynamicPositioning = () => {
-  const [options, setOptions] = useState<Partial<MapboxOptions>>({})
+  const [options, setOptions] = useState<Partial<MapOptions>>({})
   const { width, height } = useWindowSize()
 
   useEffect(() => {

package/src/lib/MapBoxBaseProps.ts

@@ -1,6 +1,6 @@
 import { FlexBoxProps } from '@xylabs/react-flexbox'
 import { Feature } from 'geojson'
-import { MapboxOptions } from 'mapbox-gl'
+import { MapOptions } from 'mapbox-gl'
 import { ReactNode } from 'react'
 
 import { MapLayer } from '../Layers/index.js'
@@ -14,7 +14,7 @@ export interface MapboxFlexBoxProps extends FlexBoxProps {
   fitToPointsPadding?: number
   layers?: MapLayer[]
   legend?: ReactNode
-  mapBoxOptions?: Partial<MapboxOptions>
+  mapBoxOptions?: Partial<MapOptions>
   requestLocation?: boolean
   zoom?: number
 }