From 0cc4544b317e6f27d3fce3c725f6233b48ed88f4 Mon Sep 17 00:00:00 2001 From: Xiaoji Chen Date: Fri, 24 Jan 2025 21:15:25 -0800 Subject: [PATCH] Align types with base library --- docs/upgrade-guide.md | 18 +++ examples/mapbox/filter/src/map-style.ts | 6 +- examples/mapbox/terrain/src/app.tsx | 4 +- .../mapbox/zoom-to-bounds/src/map-style.tsx | 12 +- examples/maplibre/filter/src/map-style.ts | 6 +- .../maplibre/zoom-to-bounds/src/map-style.tsx | 12 +- .../src/mapbox-legacy/components/layer.ts | 4 +- .../src/mapbox-legacy/components/source.ts | 14 ++- .../main/src/mapbox-legacy/mapbox/mapbox.ts | 20 ++-- .../src/mapbox-legacy/types/style-spec.ts | 99 +++++------------ .../src/mapbox-legacy/utils/style-utils.ts | 6 +- modules/react-mapbox/src/components/layer.ts | 4 +- modules/react-mapbox/src/components/source.ts | 21 ++-- modules/react-mapbox/src/mapbox/mapbox.ts | 20 ++-- modules/react-mapbox/src/types/internal.ts | 35 ++---- modules/react-mapbox/src/types/style-spec.ts | 104 ++++++------------ modules/react-mapbox/src/utils/style-utils.ts | 6 +- .../react-maplibre/src/components/layer.ts | 4 +- .../react-maplibre/src/components/source.ts | 8 +- .../src/components/terrain-control.ts | 4 +- .../react-maplibre/src/maplibre/maplibre.ts | 33 +++--- modules/react-maplibre/src/types/internal.ts | 40 ++----- .../react-maplibre/src/types/style-spec.ts | 96 +++++----------- .../react-maplibre/src/utils/style-utils.ts | 6 +- 24 files changed, 235 insertions(+), 347 deletions(-) diff --git a/docs/upgrade-guide.md b/docs/upgrade-guide.md index 6d064b7e2..232290d54 100644 --- a/docs/upgrade-guide.md +++ b/docs/upgrade-guide.md @@ -1,5 +1,23 @@ # Upgrade Guide +## Upgrading to v8.0 + +- All imports from `react-map-gl` should be replaced with one of the following endpoints: + + If using with `mapbox-gl@>=3.5.0`: import from `react-map-gl/mapbox` + + If using with `mapbox-gl@<3.5.0`: import from `react-map-gl/mapbox-legacy` +- Some TypeScript types have been renamed to align with the official types from the base map libraries: + + | Old name | New name | + |----------|----------| + | `MapStyle` | `StyleSpecification` | + | `Fog` | `FogSpecification` | + | `Light` | `LightSpecification` | + | `Terrain` | `TerrainSpecification` | + | `Projection` | `ProjectionSpecification` | + | `*Layer` | `*LayerSpecification` | + | `*SourceRaw` | `*SourceSpecification` | + + ## Upgrading to v7.1 - `maplibre-gl` users no longer need to install `mapbox-gl` or a placeholder package as dependency. Change your imports to the new endpoint `react-map-gl/maplibre`. Components imported from here do not require setting the `mapLib` prop, and use the types defined by `maplibre-gl`. diff --git a/examples/mapbox/filter/src/map-style.ts b/examples/mapbox/filter/src/map-style.ts index e2c29be98..79d23f9b9 100644 --- a/examples/mapbox/filter/src/map-style.ts +++ b/examples/mapbox/filter/src/map-style.ts @@ -1,6 +1,6 @@ -import type {FillLayer} from 'react-map-gl/mapbox'; +import type {FillLayerSpecification} from 'react-map-gl/mapbox'; -export const countiesLayer: FillLayer = { +export const countiesLayer: FillLayerSpecification = { id: 'counties', source: '', type: 'fill', @@ -11,7 +11,7 @@ export const countiesLayer: FillLayer = { } }; // Highlighted county polygons -export const highlightLayer: FillLayer = { +export const highlightLayer: FillLayerSpecification = { id: 'counties-highlighted', type: 'fill', source: 'counties', diff --git a/examples/mapbox/terrain/src/app.tsx b/examples/mapbox/terrain/src/app.tsx index 5937915ea..e1267bfba 100644 --- a/examples/mapbox/terrain/src/app.tsx +++ b/examples/mapbox/terrain/src/app.tsx @@ -4,11 +4,11 @@ import Map, {Source, Layer} from 'react-map-gl/mapbox'; import ControlPanel from './control-panel'; -import type {SkyLayer} from 'react-map-gl/mapbox'; +import type {SkyLayerSpecification} from 'react-map-gl/mapbox'; const TOKEN = ''; // Set your mapbox token here -const skyLayer: SkyLayer = { +const skyLayer: SkyLayerSpecification = { id: 'sky', type: 'sky', paint: { diff --git a/examples/mapbox/zoom-to-bounds/src/map-style.tsx b/examples/mapbox/zoom-to-bounds/src/map-style.tsx index 33f899c3c..ac1e08552 100644 --- a/examples/mapbox/zoom-to-bounds/src/map-style.tsx +++ b/examples/mapbox/zoom-to-bounds/src/map-style.tsx @@ -1,13 +1,17 @@ -import type {GeoJSONSource, FillLayer, LineLayer} from 'react-map-gl/mapbox'; +import type { + GeoJSONSourceSpecification, + FillLayerSpecification, + LineLayerSpecification +} from 'react-map-gl/mapbox'; import MAP_STYLE from '../../../map-style-basic-v8.json'; -const sfNeighborhoods: GeoJSONSource = { +const sfNeighborhoods: GeoJSONSourceSpecification = { type: 'geojson', data: 'https://raw.githubusercontent.com/uber/react-map-gl/master/examples/.data/feature-example-sf.json' }; -const fillLayer: FillLayer = { +const fillLayer: FillLayerSpecification = { id: 'sf-neighborhoods-fill', source: 'sf-neighborhoods', type: 'fill', @@ -18,7 +22,7 @@ const fillLayer: FillLayer = { } }; -const lineLayer: LineLayer = { +const lineLayer: LineLayerSpecification = { id: 'sf-neighborhoods-outline', source: 'sf-neighborhoods', type: 'line', diff --git a/examples/maplibre/filter/src/map-style.ts b/examples/maplibre/filter/src/map-style.ts index de8368a6f..b091c6ccb 100644 --- a/examples/maplibre/filter/src/map-style.ts +++ b/examples/maplibre/filter/src/map-style.ts @@ -1,6 +1,6 @@ -import type {FillLayer} from 'react-map-gl/maplibre'; +import type {FillLayerSpecification} from 'react-map-gl/maplibre'; -export const countiesLayer: FillLayer = { +export const countiesLayer: FillLayerSpecification = { id: 'counties', source: '', type: 'fill', @@ -10,7 +10,7 @@ export const countiesLayer: FillLayer = { } }; // Highlighted county polygons -export const highlightLayer: FillLayer = { +export const highlightLayer: FillLayerSpecification = { id: 'counties-highlighted', type: 'fill', source: 'counties', diff --git a/examples/maplibre/zoom-to-bounds/src/map-style.tsx b/examples/maplibre/zoom-to-bounds/src/map-style.tsx index a88503ef6..9fcf2ba39 100644 --- a/examples/maplibre/zoom-to-bounds/src/map-style.tsx +++ b/examples/maplibre/zoom-to-bounds/src/map-style.tsx @@ -1,13 +1,17 @@ -import type {GeoJSONSource, FillLayer, LineLayer} from 'react-map-gl/maplibre'; +import type { + GeoJSONSourceSpecification, + FillLayerSpecification, + LineLayerSpecification +} from 'react-map-gl/maplibre'; import MAP_STYLE from '../../../map-style-basic-v8.json'; -const sfNeighborhoods: GeoJSONSource = { +const sfNeighborhoods: GeoJSONSourceSpecification = { type: 'geojson', data: 'https://raw.githubusercontent.com/visgl/react-map-gl/master/examples/.data/feature-example-sf.json' }; -const fillLayer: FillLayer = { +const fillLayer: FillLayerSpecification = { id: 'sf-neighborhoods-fill', source: 'sf-neighborhoods', type: 'fill', @@ -18,7 +22,7 @@ const fillLayer: FillLayer = { } }; -const lineLayer: LineLayer = { +const lineLayer: LineLayerSpecification = { id: 'sf-neighborhoods-outline', source: 'sf-neighborhoods', type: 'line', diff --git a/modules/main/src/mapbox-legacy/components/layer.ts b/modules/main/src/mapbox-legacy/components/layer.ts index 35e63cc5a..439be9c8d 100644 --- a/modules/main/src/mapbox-legacy/components/layer.ts +++ b/modules/main/src/mapbox-legacy/components/layer.ts @@ -4,14 +4,14 @@ import assert from '../utils/assert'; import {deepEqual} from '../utils/deep-equal'; import type {MapInstance, CustomLayerInterface} from '../types/lib'; -import type {AnyLayer} from '../types/style-spec'; +import type {LayerSpecification} from '../types/style-spec'; // Omiting property from a union type, see // https://github.com/microsoft/TypeScript/issues/39556#issuecomment-656925230 type OptionalId = T extends {id: string} ? Omit & {id?: string} : T; type OptionalSource = T extends {source: string} ? Omit & {source?: string} : T; -export type LayerProps = (OptionalSource> | CustomLayerInterface) & { +export type LayerProps = (OptionalSource> | CustomLayerInterface) & { /** If set, the layer will be inserted before the specified layer */ beforeId?: string; }; diff --git a/modules/main/src/mapbox-legacy/components/source.ts b/modules/main/src/mapbox-legacy/components/source.ts index 27e745526..a4d137995 100644 --- a/modules/main/src/mapbox-legacy/components/source.ts +++ b/modules/main/src/mapbox-legacy/components/source.ts @@ -9,10 +9,14 @@ import type { ImageSourceImplemtation, AnySourceImplementation } from '../types/internal'; -import type {AnySource, ImageSource, VectorSource} from '../types/style-spec'; +import type { + SourceSpecification, + ImageSourceSpecification, + VectorSourceSpecification +} from '../types/style-spec'; import type {MapInstance} from '../types/lib'; -export type SourceProps = AnySource & { +export type SourceProps = SourceSpecification & { id?: string; children?: any; }; @@ -61,11 +65,11 @@ function updateSource(source: AnySourceImplementation, props: SourceProps, prevP coordinates: props.coordinates }); } else if ('setCoordinates' in source && changedKeyCount === 1 && changedKey === 'coordinates') { - source.setCoordinates((props as unknown as ImageSource).coordinates); + source.setCoordinates((props as unknown as ImageSourceSpecification).coordinates); } else if ('setUrl' in source && changedKey === 'url') { - source.setUrl((props as VectorSource).url); + source.setUrl((props as VectorSourceSpecification).url); } else if ('setTiles' in source && changedKey === 'tiles') { - source.setTiles((props as VectorSource).tiles); + source.setTiles((props as VectorSourceSpecification).tiles); } else { // eslint-disable-next-line console.warn(`Unable to update prop: ${changedKey}`); diff --git a/modules/main/src/mapbox-legacy/mapbox/mapbox.ts b/modules/main/src/mapbox-legacy/mapbox/mapbox.ts index 8e590f0c8..5e3f295dd 100644 --- a/modules/main/src/mapbox-legacy/mapbox/mapbox.ts +++ b/modules/main/src/mapbox-legacy/mapbox/mapbox.ts @@ -16,7 +16,13 @@ import type { LngLatBoundsLike, MapGeoJSONFeature } from '../types/common'; -import type {MapStyle, Light, Terrain, Fog, Projection} from '../types/style-spec'; +import type { + StyleSpecification, + LightSpecification, + TerrainSpecification, + FogSpecification, + ProjectionSpecification +} from '../types/style-spec'; import type {MapInstance} from '../types/lib'; import type {Transform, MapInstanceInternal} from '../types/internal'; import type { @@ -57,7 +63,7 @@ export type MapboxProps = Partial & // Styling /** Mapbox style */ - mapStyle?: string | MapStyle | ImmutableLike; + mapStyle?: string | StyleSpecification | ImmutableLike; /** Enable diffing when the map style changes * @default true */ @@ -65,15 +71,15 @@ export type MapboxProps = Partial & /** The projection property of the style. Must conform to the Projection Style Specification. * @default 'mercator' */ - projection?: Projection; + projection?: ProjectionSpecification | ProjectionSpecification['name']; /** The fog property of the style. Must conform to the Fog Style Specification . * If `undefined` is provided, removes the fog from the map. */ - fog?: Fog; + fog?: FogSpecification; /** Light properties of the map. */ - light?: Light; + light?: LightSpecification; /** Terrain property of the style. Must conform to the Terrain Style Specification . * If `undefined` is provided, removes terrain from the map. */ - terrain?: Terrain; + terrain?: TerrainSpecification; /** Default layers to query on pointer events */ interactiveLayerIds?: string[]; @@ -81,7 +87,7 @@ export type MapboxProps = Partial & cursor?: string; }; -const DEFAULT_STYLE = {version: 8, sources: {}, layers: []} as MapStyle; +const DEFAULT_STYLE = {version: 8, sources: {}, layers: []} as StyleSpecification; const pointerEvents = { mousedown: 'onMouseDown', diff --git a/modules/main/src/mapbox-legacy/types/style-spec.ts b/modules/main/src/mapbox-legacy/types/style-spec.ts index 114b7d01c..d92ccde76 100644 --- a/modules/main/src/mapbox-legacy/types/style-spec.ts +++ b/modules/main/src/mapbox-legacy/types/style-spec.ts @@ -1,77 +1,34 @@ /* * Mapbox Style Specification types */ -// Layers -import type { - BackgroundLayer, - SkyLayer, - CircleLayer, - FillLayer, - FillExtrusionLayer, - HeatmapLayer, - HillshadeLayer, - LineLayer, - RasterLayer, - SymbolLayer -} from 'mapbox-gl'; - -export type AnyLayer = - | BackgroundLayer - | CircleLayer - | FillExtrusionLayer - | FillLayer - | HeatmapLayer - | HillshadeLayer - | LineLayer - | RasterLayer - | SymbolLayer - | SkyLayer; - export type { - BackgroundLayer, - SkyLayer, - CircleLayer, - FillLayer, - FillExtrusionLayer, - HeatmapLayer, - HillshadeLayer, - LineLayer, - RasterLayer, - SymbolLayer -}; - -// Sources -import type { - Projection as ProjectionSpecification, - GeoJSONSourceRaw as GeoJSONSource, - VideoSourceRaw as VideoSource, - ImageSourceRaw as ImageSource, - VectorSource, - RasterSource, - CanvasSourceRaw as CanvasSource, - RasterDemSource -} from 'mapbox-gl'; + // Layers + AnyLayer as LayerSpecification, + BackgroundLayer as BackgroundLayerSpecification, + SkyLayer as SkyLayerSpecification, + CircleLayer as CircleLayerSpecification, + FillLayer as FillLayerSpecification, + FillExtrusionLayer as FillExtrusionLayerSpecification, + HeatmapLayer as HeatmapLayerSpecification, + HillshadeLayer as HillshadeLayerSpecification, + LineLayer as LineLayerSpecification, + RasterLayer as RasterLayerSpecification, + SymbolLayer as SymbolLayerSpecification, -export type AnySource = - | GeoJSONSource - | VideoSource - | ImageSource - | CanvasSource - | VectorSource - | RasterSource - | RasterDemSource; + // Sources + AnySourceData as SourceSpecification, + CanvasSourceRaw as CanvasSourceSpecification, + GeoJSONSourceRaw as GeoJSONSourceSpecification, + VideoSourceRaw as VideoSourceSpecification, + ImageSourceRaw as ImageSourceSpecification, + VectorSource as VectorSourceSpecification, + RasterSource as RasterSourceSpecification, + RasterDemSource as RasterDemSourceSpecification, -export type { - GeoJSONSource, - VideoSource, - ImageSource, - CanvasSource, - VectorSource, - RasterSource, - RasterDemSource -}; - -// Other -export type {Style as MapStyle, Light, Fog, TerrainSpecification as Terrain} from 'mapbox-gl'; - -export type Projection = ProjectionSpecification | ProjectionSpecification['name']; + // Style + Style as StyleSpecification, + Light as LightSpecification, + Fog as FogSpecification, + TerrainSpecification, + Projection as ProjectionSpecification +} from 'mapbox-gl'; diff --git a/modules/main/src/mapbox-legacy/utils/style-utils.ts b/modules/main/src/mapbox-legacy/utils/style-utils.ts index bb61d366f..179c1a749 100644 --- a/modules/main/src/mapbox-legacy/utils/style-utils.ts +++ b/modules/main/src/mapbox-legacy/utils/style-utils.ts @@ -1,5 +1,5 @@ import {ImmutableLike} from '../types/common'; -import {MapStyle} from '../types/style-spec'; +import {StyleSpecification} from '../types/style-spec'; const refProps = ['type', 'source', 'source-layer', 'minzoom', 'maxzoom', 'filter', 'layout']; @@ -7,8 +7,8 @@ const refProps = ['type', 'source', 'source-layer', 'minzoom', 'maxzoom', 'filte // If immutable - convert to plain object // Work around some issues in older styles that would fail Mapbox's diffing export function normalizeStyle( - style: string | MapStyle | ImmutableLike -): string | MapStyle { + style: string | StyleSpecification | ImmutableLike +): string | StyleSpecification { if (!style) { return null; } diff --git a/modules/react-mapbox/src/components/layer.ts b/modules/react-mapbox/src/components/layer.ts index 35e63cc5a..439be9c8d 100644 --- a/modules/react-mapbox/src/components/layer.ts +++ b/modules/react-mapbox/src/components/layer.ts @@ -4,14 +4,14 @@ import assert from '../utils/assert'; import {deepEqual} from '../utils/deep-equal'; import type {MapInstance, CustomLayerInterface} from '../types/lib'; -import type {AnyLayer} from '../types/style-spec'; +import type {LayerSpecification} from '../types/style-spec'; // Omiting property from a union type, see // https://github.com/microsoft/TypeScript/issues/39556#issuecomment-656925230 type OptionalId = T extends {id: string} ? Omit & {id?: string} : T; type OptionalSource = T extends {source: string} ? Omit & {source?: string} : T; -export type LayerProps = (OptionalSource> | CustomLayerInterface) & { +export type LayerProps = (OptionalSource> | CustomLayerInterface) & { /** If set, the layer will be inserted before the specified layer */ beforeId?: string; }; diff --git a/modules/react-mapbox/src/components/source.ts b/modules/react-mapbox/src/components/source.ts index 2b7f9e886..3139d61a7 100644 --- a/modules/react-mapbox/src/components/source.ts +++ b/modules/react-mapbox/src/components/source.ts @@ -4,15 +4,20 @@ import {MapContext} from './map'; import assert from '../utils/assert'; import {deepEqual} from '../utils/deep-equal'; +import type { + SourceSpecification, + CanvasSourceSpecification, + ImageSourceSpecification, + VectorSourceSpecification +} from '../types/style-spec'; +import type {MapInstance} from '../types/lib'; import type { GeoJSONSourceImplementation, - ImageSourceImplemtation, + ImageSourceImplementation, AnySourceImplementation } from '../types/internal'; -import type {AnySource, ImageSource, VectorSource} from '../types/style-spec'; -import type {MapInstance} from '../types/lib'; -export type SourceProps = AnySource & { +export type SourceProps = (SourceSpecification | CanvasSourceSpecification) & { id?: string; children?: any; }; @@ -56,16 +61,16 @@ function updateSource(source: AnySourceImplementation, props: SourceProps, prevP if (type === 'geojson') { (source as GeoJSONSourceImplementation).setData(props.data); } else if (type === 'image') { - (source as ImageSourceImplemtation).updateImage({ + (source as ImageSourceImplementation).updateImage({ url: props.url, coordinates: props.coordinates }); } else if ('setCoordinates' in source && changedKeyCount === 1 && changedKey === 'coordinates') { - source.setCoordinates((props as unknown as ImageSource).coordinates); + source.setCoordinates((props as unknown as ImageSourceSpecification).coordinates); } else if ('setUrl' in source && changedKey === 'url') { - source.setUrl((props as VectorSource).url); + source.setUrl((props as VectorSourceSpecification).url); } else if ('setTiles' in source && changedKey === 'tiles') { - source.setTiles((props as VectorSource).tiles); + source.setTiles((props as VectorSourceSpecification).tiles); } else { // eslint-disable-next-line console.warn(`Unable to update prop: ${changedKey}`); diff --git a/modules/react-mapbox/src/mapbox/mapbox.ts b/modules/react-mapbox/src/mapbox/mapbox.ts index adb03147e..bf7c87773 100644 --- a/modules/react-mapbox/src/mapbox/mapbox.ts +++ b/modules/react-mapbox/src/mapbox/mapbox.ts @@ -16,7 +16,13 @@ import type { LngLatBoundsLike, MapGeoJSONFeature } from '../types/common'; -import type {MapStyle, Light, Terrain, Fog, Projection} from '../types/style-spec'; +import type { + StyleSpecification, + LightSpecification, + TerrainSpecification, + FogSpecification, + ProjectionSpecification +} from '../types/style-spec'; import type {MapInstance} from '../types/lib'; import type {Transform} from '../types/internal'; import type { @@ -57,7 +63,7 @@ export type MapboxProps = Partial & // Styling /** Mapbox style */ - mapStyle?: string | MapStyle | ImmutableLike; + mapStyle?: string | StyleSpecification | ImmutableLike; /** Enable diffing when the map style changes * @default true */ @@ -65,15 +71,15 @@ export type MapboxProps = Partial & /** The projection property of the style. Must conform to the Projection Style Specification. * @default 'mercator' */ - projection?: Projection; + projection?: ProjectionSpecification | ProjectionSpecification['name']; /** The fog property of the style. Must conform to the Fog Style Specification . * If `undefined` is provided, removes the fog from the map. */ - fog?: Fog; + fog?: FogSpecification; /** Light properties of the map. */ - light?: Light; + light?: LightSpecification; /** Terrain property of the style. Must conform to the Terrain Style Specification . * If `undefined` is provided, removes terrain from the map. */ - terrain?: Terrain; + terrain?: TerrainSpecification; /** Default layers to query on pointer events */ interactiveLayerIds?: string[]; @@ -81,7 +87,7 @@ export type MapboxProps = Partial & cursor?: string; }; -const DEFAULT_STYLE = {version: 8, sources: {}, layers: []} as MapStyle; +const DEFAULT_STYLE = {version: 8, sources: {}, layers: []} as StyleSpecification; const pointerEvents = { mousedown: 'onMouseDown', diff --git a/modules/react-mapbox/src/types/internal.ts b/modules/react-mapbox/src/types/internal.ts index 999b5b822..04f2253b7 100644 --- a/modules/react-mapbox/src/types/internal.ts +++ b/modules/react-mapbox/src/types/internal.ts @@ -1,34 +1,15 @@ // Internal types -import type { - Map, +import type {Map} from 'mapbox-gl'; + +export type Transform = Map['transform']; + +export type { GeoJSONSource as GeoJSONSourceImplementation, - ImageSource as ImageSourceImplemtation, - CanvasSource as CanvasSourceImplemtation, + ImageSource as ImageSourceImplementation, + CanvasSource as CanvasSourceImplementation, VectorTileSource as VectorSourceImplementation, RasterTileSource as RasterSourceImplementation, RasterDemTileSource as RasterDemSourceImplementation, VideoSource as VideoSourceImplementation, - Source + Source as AnySourceImplementation } from 'mapbox-gl'; - -export type Transform = Map['transform']; - -export type { - GeoJSONSourceImplementation, - ImageSourceImplemtation, - CanvasSourceImplemtation, - VectorSourceImplementation, - RasterDemSourceImplementation, - RasterSourceImplementation, - VideoSourceImplementation -}; - -export type AnySourceImplementation = - | GeoJSONSourceImplementation - | VideoSourceImplementation - | ImageSourceImplemtation - | CanvasSourceImplemtation - | VectorSourceImplementation - | RasterSourceImplementation - | RasterDemSourceImplementation - | Source; diff --git a/modules/react-mapbox/src/types/style-spec.ts b/modules/react-mapbox/src/types/style-spec.ts index 62a3c45ec..1d1f66936 100644 --- a/modules/react-mapbox/src/types/style-spec.ts +++ b/modules/react-mapbox/src/types/style-spec.ts @@ -1,84 +1,46 @@ /* * Mapbox Style Specification types */ -// Layers -import type { - BackgroundLayerSpecification as BackgroundLayer, - SkyLayerSpecification as SkyLayer, - CircleLayerSpecification as CircleLayer, - FillLayerSpecification as FillLayer, - FillExtrusionLayerSpecification as FillExtrusionLayer, - HeatmapLayerSpecification as HeatmapLayer, - HillshadeLayerSpecification as HillshadeLayer, - LineLayerSpecification as LineLayer, - RasterLayerSpecification as RasterLayer, - SymbolLayerSpecification as SymbolLayer, - GeoJSONSourceSpecification as GeoJSONSource, - VideoSourceSpecification as VideoSource, - ImageSourceSpecification as ImageSource, - VectorSourceSpecification as VectorSource, - RasterSourceSpecification as RasterSource, - RasterDEMSourceSpecification as RasterDemSource, - ProjectionSpecification -} from 'mapbox-gl'; - -type CanvasSource = { +export type CanvasSourceSpecification = { type: 'canvas'; coordinates: [[number, number], [number, number], [number, number], [number, number]]; animate?: boolean; canvas: string | HTMLCanvasElement; }; -export type AnyLayer = - | BackgroundLayer - | CircleLayer - | FillExtrusionLayer - | FillLayer - | HeatmapLayer - | HillshadeLayer - | LineLayer - | RasterLayer - | SymbolLayer - | SkyLayer; - export type { - BackgroundLayer, - SkyLayer, - CircleLayer, - FillLayer, - FillExtrusionLayer, - HeatmapLayer, - HillshadeLayer, - LineLayer, - RasterLayer, - SymbolLayer -}; + // Layers + LayerSpecification, + FillLayerSpecification, + LineLayerSpecification, + SymbolLayerSpecification, + CircleLayerSpecification, + HeatmapLayerSpecification, + FillExtrusionLayerSpecification, + RasterLayerSpecification, + RasterParticleLayerSpecification, + HillshadeLayerSpecification, + ModelLayerSpecification, + BackgroundLayerSpecification, + SkyLayerSpecification, + SlotLayerSpecification, + ClipLayerSpecification, -export type AnySource = - | GeoJSONSource - | VideoSource - | ImageSource - | CanvasSource - | VectorSource - | RasterSource - | RasterDemSource; + // Sources + SourceSpecification, + VectorSourceSpecification, + RasterSourceSpecification, + RasterDEMSourceSpecification, + RasterArraySourceSpecification, + GeoJSONSourceSpecification, + VideoSourceSpecification, + ImageSourceSpecification, + ModelSourceSpecification, -export type { - GeoJSONSource, - VideoSource, - ImageSource, - CanvasSource, - VectorSource, - RasterSource, - RasterDemSource -}; - -// Other -export type { - StyleSpecification as MapStyle, - LightSpecification as Light, - FogSpecification as Fog, - TerrainSpecification as Terrain + // Style + StyleSpecification, + LightSpecification, + FogSpecification, + TerrainSpecification, + ProjectionSpecification } from 'mapbox-gl'; - -export type Projection = ProjectionSpecification | ProjectionSpecification['name']; diff --git a/modules/react-mapbox/src/utils/style-utils.ts b/modules/react-mapbox/src/utils/style-utils.ts index bb61d366f..179c1a749 100644 --- a/modules/react-mapbox/src/utils/style-utils.ts +++ b/modules/react-mapbox/src/utils/style-utils.ts @@ -1,5 +1,5 @@ import {ImmutableLike} from '../types/common'; -import {MapStyle} from '../types/style-spec'; +import {StyleSpecification} from '../types/style-spec'; const refProps = ['type', 'source', 'source-layer', 'minzoom', 'maxzoom', 'filter', 'layout']; @@ -7,8 +7,8 @@ const refProps = ['type', 'source', 'source-layer', 'minzoom', 'maxzoom', 'filte // If immutable - convert to plain object // Work around some issues in older styles that would fail Mapbox's diffing export function normalizeStyle( - style: string | MapStyle | ImmutableLike -): string | MapStyle { + style: string | StyleSpecification | ImmutableLike +): string | StyleSpecification { if (!style) { return null; } diff --git a/modules/react-maplibre/src/components/layer.ts b/modules/react-maplibre/src/components/layer.ts index 27adb26f4..d927e380a 100644 --- a/modules/react-maplibre/src/components/layer.ts +++ b/modules/react-maplibre/src/components/layer.ts @@ -4,14 +4,14 @@ import assert from '../utils/assert'; import {deepEqual} from '../utils/deep-equal'; import type {MapInstance, CustomLayerInterface} from '../types/lib'; -import type {AnyLayer} from '../types/style-spec'; +import type {LayerSpecification} from '../types/style-spec'; // Omiting property from a union type, see // https://github.com/microsoft/TypeScript/issues/39556#issuecomment-656925230 type OptionalId = T extends {id: string} ? Omit & {id?: string} : T; type OptionalSource = T extends {source: string} ? Omit & {source?: string} : T; -export type LayerProps = (OptionalSource> | CustomLayerInterface) & { +export type LayerProps = (OptionalSource> | CustomLayerInterface) & { /** If set, the layer will be inserted before the specified layer */ beforeId?: string; }; diff --git a/modules/react-maplibre/src/components/source.ts b/modules/react-maplibre/src/components/source.ts index ef13f34ce..1a704a377 100644 --- a/modules/react-maplibre/src/components/source.ts +++ b/modules/react-maplibre/src/components/source.ts @@ -6,13 +6,13 @@ import {deepEqual} from '../utils/deep-equal'; import type { GeoJSONSourceImplementation, - ImageSourceImplemtation, + ImageSourceImplementation, AnySourceImplementation } from '../types/internal'; -import type {AnySource} from '../types/style-spec'; +import type {SourceSpecification} from '../types/style-spec'; import type {MapInstance} from '../types/lib'; -export type SourceProps = AnySource & { +export type SourceProps = SourceSpecification & { id?: string; children?: any; }; @@ -56,7 +56,7 @@ function updateSource(source: AnySourceImplementation, props: SourceProps, prevP if (type === 'geojson') { (source as GeoJSONSourceImplementation).setData(props.data); } else if (type === 'image') { - (source as ImageSourceImplemtation).updateImage({ + (source as ImageSourceImplementation).updateImage({ url: props.url, coordinates: props.coordinates }); diff --git a/modules/react-maplibre/src/components/terrain-control.ts b/modules/react-maplibre/src/components/terrain-control.ts index 69650e6e0..dbcc2c2e0 100644 --- a/modules/react-maplibre/src/components/terrain-control.ts +++ b/modules/react-maplibre/src/components/terrain-control.ts @@ -4,9 +4,9 @@ import {applyReactStyle} from '../utils/apply-react-style'; import {useControl} from './use-control'; import type {ControlPosition} from '../types/lib'; -import type {Terrain} from '../types/style-spec'; +import type {TerrainSpecification} from '../types/style-spec'; -export type TerrainControlProps = Terrain & { +export type TerrainControlProps = TerrainSpecification & { /** Placement of the control relative to the map. */ position?: ControlPosition; /** CSS style override, applied to the control's container */ diff --git a/modules/react-maplibre/src/maplibre/maplibre.ts b/modules/react-maplibre/src/maplibre/maplibre.ts index e462c9823..31d2039f1 100644 --- a/modules/react-maplibre/src/maplibre/maplibre.ts +++ b/modules/react-maplibre/src/maplibre/maplibre.ts @@ -12,7 +12,13 @@ import type { LngLatBoundsLike, MapGeoJSONFeature } from '../types/common'; -import type {MapStyle, Sky, Light, Terrain, Projection} from '../types/style-spec'; +import type { + StyleSpecification, + SkySpecification, + LightSpecification, + TerrainSpecification, + ProjectionSpecification +} from '../types/style-spec'; import type {MapInstance} from '../types/lib'; import type { MapCallbacks, @@ -49,7 +55,7 @@ export type MaplibreProps = Partial & // Styling /** Mapbox style */ - mapStyle?: string | MapStyle | ImmutableLike; + mapStyle?: string | StyleSpecification | ImmutableLike; /** Enable diffing when the map style changes * @default true */ @@ -57,14 +63,14 @@ export type MaplibreProps = Partial & /** The projection property of the style. Must conform to the Projection Style Specification. * @default 'mercator' */ - projection?: Projection; + projection?: ProjectionSpecification | 'mercator' | 'globe'; /** Light properties of the map. */ - light?: Light; + light?: LightSpecification; /** Terrain property of the style. Must conform to the Terrain Style Specification. * If `undefined` is provided, removes terrain from the map. */ - terrain?: Terrain; + terrain?: TerrainSpecification; /** Sky properties of the map. Must conform to the Sky Style Specification. */ - sky?: Sky; + sky?: SkySpecification; /** Default layers to query on pointer events */ interactiveLayerIds?: string[]; @@ -72,7 +78,7 @@ export type MaplibreProps = Partial & cursor?: string; }; -const DEFAULT_STYLE = {version: 8, sources: {}, layers: []} as MapStyle; +const DEFAULT_STYLE = {version: 8, sources: {}, layers: []} as StyleSpecification; const pointerEvents = { mousedown: 'onMouseDown', @@ -157,10 +163,10 @@ export default class Maplibre { private _hoveredFeatures: MapGeoJSONFeature[] = null; private _propsedCameraUpdate: ViewState | null = null; private _styleComponents: { - light?: Light; - sky?: Sky; - projection?: Projection; - terrain?: Terrain | null; + light?: LightSpecification; + sky?: SkySpecification; + projection?: ProjectionSpecification; + terrain?: TerrainSpecification | null; } = {}; static savedMaps: Maplibre[] = []; @@ -451,12 +457,11 @@ export default class Maplibre { if ( projection && !deepEqual(projection, currProps.projection) && - // @ts-expect-error currProps.projection may be a string projection !== currProps.projection?.type ) { - currProps.projection = projection; + currProps.projection = typeof projection === 'string' ? {type: projection} : projection; // @ts-ignore setProjection does not exist in v4 - map.setProjection?.(typeof projection === 'string' ? {type: projection} : projection); + map.setProjection?.(currProps.projection); } if (sky && !deepEqual(sky, currProps.sky)) { currProps.sky = sky; diff --git a/modules/react-maplibre/src/types/internal.ts b/modules/react-maplibre/src/types/internal.ts index ff4742a72..9ccb34033 100644 --- a/modules/react-maplibre/src/types/internal.ts +++ b/modules/react-maplibre/src/types/internal.ts @@ -1,16 +1,5 @@ // Internal types -import type { - LngLat, - PaddingOptions, - GeoJSONSource as GeoJSONSourceImplementation, - ImageSource as ImageSourceImplemtation, - CanvasSource as CanvasSourceImplemtation, - VectorTileSource as VectorSourceImplementation, - RasterTileSource as RasterSourceImplementation, - RasterDEMTileSource as RasterDemSourceImplementation, - VideoSource as VideoSourceImplementation, - Source -} from 'maplibre-gl'; +import type {LngLat, PaddingOptions} from 'maplibre-gl'; /** * maplibre's Transform interface / CameraUpdateTransformFunction argument @@ -26,21 +15,12 @@ export type TransformLike = { }; export type { - GeoJSONSourceImplementation, - ImageSourceImplemtation, - CanvasSourceImplemtation, - VectorSourceImplementation, - RasterDemSourceImplementation, - RasterSourceImplementation, - VideoSourceImplementation -}; - -export type AnySourceImplementation = - | GeoJSONSourceImplementation - | VideoSourceImplementation - | ImageSourceImplemtation - | CanvasSourceImplemtation - | VectorSourceImplementation - | RasterSourceImplementation - | RasterDemSourceImplementation - | Source; + GeoJSONSource as GeoJSONSourceImplementation, + ImageSource as ImageSourceImplementation, + CanvasSource as CanvasSourceImplementation, + VectorTileSource as VectorSourceImplementation, + RasterTileSource as RasterSourceImplementation, + RasterDEMTileSource as RasterDemSourceImplementation, + VideoSource as VideoSourceImplementation, + Source as AnySourceImplementation +} from 'maplibre-gl'; diff --git a/modules/react-maplibre/src/types/style-spec.ts b/modules/react-maplibre/src/types/style-spec.ts index c1a6e06cd..000123602 100644 --- a/modules/react-maplibre/src/types/style-spec.ts +++ b/modules/react-maplibre/src/types/style-spec.ts @@ -2,77 +2,33 @@ * Maplibre Style Specification types * Type names are aligned with mapbox */ -import type { - BackgroundLayerSpecification as BackgroundLayer, - CircleLayerSpecification as CircleLayer, - FillLayerSpecification as FillLayer, - FillExtrusionLayerSpecification as FillExtrusionLayer, - HeatmapLayerSpecification as HeatmapLayer, - HillshadeLayerSpecification as HillshadeLayer, - LineLayerSpecification as LineLayer, - RasterLayerSpecification as RasterLayer, - SymbolLayerSpecification as SymbolLayer, - GeoJSONSourceSpecification as GeoJSONSource, - VideoSourceSpecification as VideoSource, - ImageSourceSpecification as ImageSource, - VectorSourceSpecification as VectorSource, - RasterSourceSpecification as RasterSource, - RasterDEMSourceSpecification as RasterDemSource, - CanvasSourceSpecification as CanvasSource, - ProjectionSpecification -} from 'maplibre-gl'; - -// Layers -export type { - BackgroundLayer, - CircleLayer, - FillLayer, - FillExtrusionLayer, - HeatmapLayer, - HillshadeLayer, - LineLayer, - RasterLayer, - SymbolLayer -}; - -export type AnyLayer = - | BackgroundLayer - | CircleLayer - | FillLayer - | FillExtrusionLayer - | HeatmapLayer - | HillshadeLayer - | LineLayer - | RasterLayer - | SymbolLayer; - -// Sources export type { - GeoJSONSource, - VideoSource, - ImageSource, - CanvasSource, - VectorSource, - RasterSource, - RasterDemSource -}; - -export type AnySource = - | GeoJSONSource - | VideoSource - | ImageSource - | CanvasSource - | VectorSource - | RasterSource - | RasterDemSource; + // Layers + LayerSpecification, + FillLayerSpecification, + LineLayerSpecification, + SymbolLayerSpecification, + CircleLayerSpecification, + HeatmapLayerSpecification, + FillExtrusionLayerSpecification, + RasterLayerSpecification, + HillshadeLayerSpecification, + BackgroundLayerSpecification, -// Other style types + // Sources + SourceSpecification, + VectorSourceSpecification, + RasterSourceSpecification, + RasterDEMSourceSpecification, + GeoJSONSourceSpecification, + VideoSourceSpecification, + ImageSourceSpecification, + CanvasSourceSpecification, -export type { - StyleSpecification as MapStyle, - LightSpecification as Light, - TerrainSpecification as Terrain, - SkySpecification as Sky + // Style + StyleSpecification, + SkySpecification, + LightSpecification, + TerrainSpecification, + ProjectionSpecification } from 'maplibre-gl'; - -export type Projection = ProjectionSpecification | ProjectionSpecification['type']; diff --git a/modules/react-maplibre/src/utils/style-utils.ts b/modules/react-maplibre/src/utils/style-utils.ts index a265d9682..cacf154ae 100644 --- a/modules/react-maplibre/src/utils/style-utils.ts +++ b/modules/react-maplibre/src/utils/style-utils.ts @@ -1,4 +1,4 @@ -import type {MapStyle} from '../types/style-spec'; +import type {StyleSpecification} from '../types/style-spec'; import type {ImmutableLike} from '../types/common'; const refProps = ['type', 'source', 'source-layer', 'minzoom', 'maxzoom', 'filter', 'layout']; @@ -7,8 +7,8 @@ const refProps = ['type', 'source', 'source-layer', 'minzoom', 'maxzoom', 'filte // If immutable - convert to plain object // Work around some issues in older styles that would fail Mapbox's diffing export function normalizeStyle( - style: string | MapStyle | ImmutableLike -): string | MapStyle { + style: string | StyleSpecification | ImmutableLike +): string | StyleSpecification { if (!style) { return null; }