feat: added support for mapbox v3.5.0 and beyond

package.json

@@ -50,11 +50,10 @@
     "update-release-branch": "scripts/update-release-branch.sh"
   },
   "dependencies": {
-    "@maplibre/maplibre-gl-style-spec": "^19.2.1",
-    "@types/mapbox-gl": ">=1.0.0"
+    "@maplibre/maplibre-gl-style-spec": "^19.2.1"
   },
   "peerDependencies": {
-    "mapbox-gl": ">=1.13.0",
+    "mapbox-gl": ">=3.9.0",
     "maplibre-gl": ">=1.13.0",
     "react": ">=16.3.0",
     "react-dom": ">=16.3.0"
@@ -68,16 +67,17 @@
     }
   },
   "devDependencies": {
+    "@types/node": "^18.19.68",
     "@types/react": "^16.0.0",
     "jsdom": "^16.5.0",
-    "mapbox-gl": "^2.14.0",
-    "maplibre-gl": "^2.4.0",
+    "mapbox-gl": "^3.9.0",
+    "maplibre-gl": "^3.6.2",
     "ocular-dev-tools": "2.0.0-alpha.15",
     "pre-commit": "^1.2.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-test-renderer": "^18.0.0",
-    "typescript": "^4.0.0"
+    "typescript": "^5.0.0"
   },
   "pre-commit": [
     "test-fast"

src/exports-mapbox.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type {
   Map as MapboxMap,
-  MapboxOptions,
+  MapOptions as MapboxOptions,
   Marker as MapboxMarker,
   MarkerOptions,
   Popup as MapboxPopup,

src/types/common.ts

@@ -63,10 +63,10 @@ export type MapGeoJSONFeature = GeoJSON.Feature<GeoJSON.Geometry> & {
 };
 
 export type PaddingOptions = {
-  top: number;
-  bottom: number;
-  left: number;
-  right: number;
+  readonly top?: number;
+  readonly bottom?: number;
+  readonly right?: number;
+  readonly left?: number;
 };
 
 /* Public */
@@ -87,7 +87,7 @@ export type ViewState = {
   padding: PaddingOptions;
 };
 
-export type ControlPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export type ControlPosition = 'top-left' | 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left';
 
 export interface ImmutableLike<T> {
   toJS: () => T;

src/types/events-mapbox.ts

@@ -1,13 +1,14 @@
 import {
   Map,
-  MapboxEvent as MapEvent,
+  MapEvent as MapEvent,
   MapMouseEvent,
-  MapLayerMouseEvent,
+  MapMouseEvent as MapLayerMouseEvent,
   MapTouchEvent,
-  MapLayerTouchEvent,
+  MapTouchEvent as MapLayerTouchEvent,
   MapStyleDataEvent,
   MapSourceDataEvent,
   MapWheelEvent,
+  // @ts-ignore
   MapBoxZoomEvent
 } from 'mapbox-gl';
 import {ErrorEvent as _ErrorEvent, ViewStateChangeEvent as _ViewStateChangeEvent} from './events';

src/types/lib.ts

@@ -5,7 +5,7 @@ export interface IControl<MapT extends MapInstance = MapInstance> {
 
   onRemove(map: MapT): void;
 
-  getDefaultPosition?: (() => string) | undefined;
+  getDefaultPosition?: (() => ControlPosition) | undefined;
 }
 
 type Listener = (event?: any) => any;
@@ -71,7 +71,7 @@ export interface MapInstance extends Evented {
 
   unproject(point: any): LngLat;
 
-  queryTerrainElevation?(lngLat: any, options?: any): number | null;
+  queryTerrainElevation?(lngLat: any, options?: any): number | null | undefined;
 
   getContainer(): HTMLElement;
 
@@ -145,7 +145,7 @@ export interface PopupInstance extends Evented {
   getLngLat(): LngLat;
   setLngLat(lnglat: LngLatLike): this;
 
-  getElement(): HTMLElement;
+  getElement(): HTMLElement | undefined;
 
   setDOMContent(htmlNode: any): this;
 

src/types/style-spec-mapbox.ts

@@ -3,16 +3,16 @@
  */
 // Layers
 import type {
-  BackgroundLayer,
-  SkyLayer,
-  CircleLayer,
-  FillLayer,
-  FillExtrusionLayer,
-  HeatmapLayer,
-  HillshadeLayer,
-  LineLayer,
-  RasterLayer,
-  SymbolLayer
+  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
 } from 'mapbox-gl';
 
 export type AnyLayer =
@@ -42,13 +42,13 @@ export type {
 
 // Sources
 import type {
-  GeoJSONSourceRaw,
-  VideoSourceRaw,
-  ImageSourceRaw,
-  VectorSource as VectorSourceRaw,
-  RasterSource,
-  CanvasSourceRaw,
-  RasterDemSource
+  GeoJSONSourceSpecification  as GeoJSONSourceRaw,
+  VideoSourceSpecification as VideoSourceRaw,
+  ImageSourceSpecification as ImageSourceRaw,
+  VectorSourceSpecification as VectorSourceRaw,
+  RasterSourceSpecification as RasterSource,
+  CanvasSourceSpecification as CanvasSourceRaw,
+  RasterDEMSourceSpecification as RasterDemSource
 } from 'mapbox-gl';
 
 export type AnySource =
@@ -72,9 +72,9 @@ export type {
 
 // Other
 export type {
-  Style as MapStyle,
-  Light,
-  Fog,
+  StyleSpecification as MapStyle,
+  LightsSpecification as Light,
+  FogSpecification as Fog,
   TerrainSpecification as Terrain,
-  Projection
+  ProjectionSpecification as Projection
 } from 'mapbox-gl';