Support mapbox-gl-js v3

README.md

@@ -55,12 +55,6 @@ npm install ngx-mapbox-gl mapbox-gl
 yarn add ngx-mapbox-gl mapbox-gl
 ```
 
-If using typescript add mapbox-gl types
-
-```
-npm install @types/mapbox-gl --save-dev
-yarn add @types/mapbox-gl --dev
-```
 
 Load the CSS of `mapbox-gl`
 

apps/showcase/project.json

@@ -24,6 +24,9 @@
           "node_modules/marked/marked.min.js",
           "node_modules/prismjs/prism.js",
           "node_modules/prismjs/components/prism-typescript.min.js"
+        ],
+        "allowedCommonJsDependencies": [
+          "mapbox-gl"
         ]
       },
       "configurations": {
@@ -32,7 +35,7 @@
             {
               "type": "initial",
               "maximumWarning": "500kb",
-              "maximumError": "2.2mb"
+              "maximumError": "2.66mb"
             },
             {
               "type": "anyComponentStyle",

apps/showcase/src/app/demo/examples/3d-buildings.component.ts

@@ -51,7 +51,7 @@ export class Display3dBuildingsComponent {
   labelLayerId?: string;
 
   onLoad(mapInstance: Map) {
-    const layers = mapInstance.getStyle().layers;
+    const layers = mapInstance.getStyle()?.layers;
     if (!layers) {
       return;
     }

apps/showcase/src/app/demo/examples/custom-style-id.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'showcase-demo',
+  selector: 'custom-style-id',
   template: `
     <mgl-map
       [style]="'mapbox://styles/mapbox/dark-v9'"

apps/showcase/src/app/demo/examples/live-update-image-srource.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { interval, Subscription } from 'rxjs';
+import { ImageSourceSpecification, LngLatLike } from 'mapbox-gl';
 
 @Component({
   selector: 'showcase-demo',
@@ -31,19 +32,19 @@ import { interval, Subscription } from 'rxjs';
 export class LiveUpdateImageSourceComponent implements OnInit, OnDestroy {
   private sub: Subscription;
   private readonly size = 0.001;
-  center: [number, number];
+  center: LngLatLike;
 
   url = 'assets/red.png';
-  coordinates: number[][];
+
+  coordinates: ImageSourceSpecification['coordinates'];
 
   async ngOnInit() {
     const data: GeoJSON.FeatureCollection<GeoJSON.LineString> = (await import(
       './hike.geo.json'
     )) as any;
     const points = data.features[0].geometry?.coordinates;
     const coordinates = points.map((c) => this.makeRectangle(c));
-
-    this.center = points[0] as [number, number];
+    this.center = [points[0][0], points[0][1]];
     this.coordinates = coordinates[0];
 
     let i = 0;
@@ -61,7 +62,7 @@ export class LiveUpdateImageSourceComponent implements OnInit, OnDestroy {
     }
   }
 
-  private makeRectangle([long, lat]: number[]): number[][] {
+  private makeRectangle([long, lat]: number[]): ImageSourceSpecification['coordinates'] {
     return [
       [long, lat],
       [long + this.size, lat],

apps/showcase/src/app/demo/stackblitz-edit/create-stackblitz-project.ts

@@ -38,7 +38,6 @@ import 'zone.js';
       url: '*',
       querystring: '*',
       events: '*',
-      '@types/mapbox-gl': '*',
       '@types/supercluster': '*',
       '@types/geojson': '*',
     },

apps/showcase/src/app/doc/doc.component.ts

@@ -57,6 +57,7 @@ export class DocComponent implements OnInit {
   constructor(private markdownService: MarkdownService) {}
 
   ngOnInit() {
+    // @ts-ignore
     this.markdownService.renderer.heading = (text: string, level: number) => {
       if (level !== 1) {
         return `<h${level}>${text}</h${level}>`;

libs/ngx-mapbox-gl/package.json

@@ -22,7 +22,7 @@
   "peerDependencies": {
     "@angular/core": "^18.0.0 || ^19.0.0",
     "@angular/common": "^18.0.0 || ^19.0.0",
-    "mapbox-gl": "^2.9.0",
+    "mapbox-gl": ">=2.9.0 < 4",
     "rxjs": "^7.8.0"
   },
   "dependencies": {

libs/ngx-mapbox-gl/src/lib/control/control.component.ts

@@ -7,7 +7,7 @@ import {
   OnDestroy,
   ViewChild,
 } from '@angular/core';
-import { IControl } from 'mapbox-gl';
+import { IControl, ControlPosition } from 'mapbox-gl';
 import { MapService } from '../map/map.service';
 
 export class CustomControl implements IControl {
@@ -21,7 +21,7 @@ export class CustomControl implements IControl {
     return this.container.parentNode!.removeChild(this.container);
   }
 
-  getDefaultPosition() {
+  getDefaultPosition(): ControlPosition {
     return 'top-right';
   }
 }

libs/ngx-mapbox-gl/src/lib/control/geolocate-control.directive.ts

@@ -6,7 +6,7 @@ import {
   Input,
   Output,
 } from '@angular/core';
-import { FitBoundsOptions, GeolocateControl } from 'mapbox-gl';
+import { MapOptions, GeolocateControl } from 'mapbox-gl';
 import { MapService } from '../map/map.service';
 import { Position } from '../map/map.types';
 import { ControlComponent } from './control.component';
@@ -17,7 +17,7 @@ import { ControlComponent } from './control.component';
 export class GeolocateControlDirective implements AfterContentInit {
   /* Init inputs */
   @Input() positionOptions?: PositionOptions;
-  @Input() fitBoundsOptions?: FitBoundsOptions;
+  @Input() fitBoundsOptions?: MapOptions["fitBoundsOptions"];
   @Input() trackUserLocation?: boolean;
   @Input() showUserLocation?: boolean;
   @Input() showUserHeading?: boolean;

libs/ngx-mapbox-gl/src/lib/control/scale-control.directive.ts

@@ -6,7 +6,7 @@ import {
   OnChanges,
   SimpleChanges,
 } from '@angular/core';
-import { ScaleControl } from 'mapbox-gl';
+import { ScaleControl, ScaleControlOptions } from 'mapbox-gl';
 import { MapService } from '../map/map.service';
 import { ControlComponent } from './control.component';
 
@@ -38,7 +38,7 @@ export class ScaleControlDirective implements AfterContentInit, OnChanges {
       if (this.controlComponent.control) {
         throw new Error('Another control is already set for this control');
       }
-      const options: { maxWidth?: number; unit?: string } = {};
+      const options: ScaleControlOptions = {};
       if (this.maxWidth !== undefined) {
         options.maxWidth = this.maxWidth;
       }

libs/ngx-mapbox-gl/src/lib/layer/layer.component.spec.ts

@@ -1,6 +1,6 @@
 import { SimpleChange } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { BackgroundLayer } from 'mapbox-gl';
+import { BackgroundLayerSpecification } from 'mapbox-gl';
 import { of } from 'rxjs';
 import { MapService, SetupLayer } from '../map/map.service';
 import { mockMapbox } from '../map/mapbox.mock';
@@ -45,7 +45,7 @@ describe('LayerComponent', () => {
       msSpy.addLayer.mockImplementation((options: SetupLayer) => {
         expect(options.layerOptions.id).toEqual(component.id);
         expect(
-          (options.layerOptions as BackgroundLayer).paint!['background-color']
+          (options.layerOptions as BackgroundLayerSpecification).paint!['background-color']
         ).toEqual('green');
       });
       fixture.detectChanges();

libs/ngx-mapbox-gl/src/lib/layer/layer.component.ts

@@ -8,30 +8,24 @@ import {
   Output,
   SimpleChanges,
 } from '@angular/core';
-import {
-  AnyLayer,
-  EventData,
-  Layer,
-  MapLayerMouseEvent,
-  MapLayerTouchEvent,
-} from 'mapbox-gl';
+import { Layer, LayerSpecification, MapMouseEvent, MapTouchEvent } from 'mapbox-gl';
 import { fromEvent, Subscription } from 'rxjs';
 import { filter, mapTo, startWith, switchMap } from 'rxjs/operators';
 import { MapService, SetupLayer } from '../map/map.service';
-import { LayerEvents } from '../map/map.types';
+import { NgxMapboxLayerEvents, EventData } from '../map/map.types';
 import { deprecationWarning } from '../utils';
 
 @Component({
   selector: 'mgl-layer',
   template: '',
 })
 export class LayerComponent
-  implements OnInit, OnDestroy, OnChanges, Layer, LayerEvents
+  implements OnInit, OnDestroy, OnChanges, Layer, NgxMapboxLayerEvents
 {
   /* Init inputs */
-  @Input() id: AnyLayer['id'];
-  @Input() source?: Layer['source'];
-  @Input() type: AnyLayer['type'];
+  @Input() id: LayerSpecification['id'];
+  @Input() source?: any | Layer['source'];
+  @Input() type: LayerSpecification['type'];
   @Input() metadata?: Layer['metadata'];
   @Input() sourceLayer?: Layer['source-layer'];
 
@@ -43,82 +37,80 @@ export class LayerComponent
   @Input() minzoom?: Layer['minzoom'];
   @Input() maxzoom?: Layer['maxzoom'];
 
-  @Output() layerClick = new EventEmitter<MapLayerMouseEvent & EventData>();
-  @Output() layerDblClick = new EventEmitter<MapLayerMouseEvent & EventData>();
-  @Output() layerMouseDown = new EventEmitter<MapLayerMouseEvent & EventData>();
-  @Output() layerMouseUp = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() layerClick = new EventEmitter<MapMouseEvent & EventData>();
+  @Output() layerDblClick = new EventEmitter<MapMouseEvent & EventData>();
+  @Output() layerMouseDown = new EventEmitter<MapMouseEvent & EventData>();
+  @Output() layerMouseUp = new EventEmitter<MapMouseEvent & EventData>();
   @Output() layerMouseEnter = new EventEmitter<
-    MapLayerMouseEvent & EventData
+    MapMouseEvent
   >();
   @Output() layerMouseLeave = new EventEmitter<
-    MapLayerMouseEvent & EventData
+    MapMouseEvent
   >();
-  @Output() layerMouseMove = new EventEmitter<MapLayerMouseEvent & EventData>();
-  @Output() layerMouseOver = new EventEmitter<MapLayerMouseEvent & EventData>();
-  @Output() layerMouseOut = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() layerMouseMove = new EventEmitter<MapMouseEvent & EventData>();
+  @Output() layerMouseOver = new EventEmitter<MapMouseEvent & EventData>();
+  @Output() layerMouseOut = new EventEmitter<MapMouseEvent & EventData>();
   @Output() layerContextMenu = new EventEmitter<
-    MapLayerMouseEvent & EventData
+    MapMouseEvent
   >();
   @Output() layerTouchStart = new EventEmitter<
-    MapLayerTouchEvent & EventData
-  >();
-  @Output() layerTouchEnd = new EventEmitter<MapLayerTouchEvent & EventData>();
-  @Output() layerTouchCancel = new EventEmitter<
-    MapLayerTouchEvent & EventData
+    MapTouchEvent
   >();
+  @Output() layerTouchEnd = new EventEmitter<MapTouchEvent & EventData>();
+  @Output() layerTouchCancel = new EventEmitter<MapTouchEvent & EventData>();
   /**
    * @deprecated Use layerClick instead
    */
   // eslint-disable-next-line @angular-eslint/no-output-native
-  @Output() click = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() click = new EventEmitter<MapMouseEvent & EventData>();
   /**
    * @deprecated Use layerDblClick instead
    */
-  @Output() dblClick = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() dblClick = new EventEmitter<MapMouseEvent & EventData>();
   /**
    * @deprecated Use layerMouseDown instead
    */
-  @Output() mouseDown = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() mouseDown = new EventEmitter<MapMouseEvent & EventData>();
   /**
    * @deprecated Use layerMouseUp instead
    */
-  @Output() mouseUp = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() mouseUp = new EventEmitter<MapMouseEvent & EventData>();
   /**
    * @deprecated Use layerMouseEnter instead
    */
-  @Output() mouseEnter = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() mouseEnter = new EventEmitter<MapMouseEvent & EventData>();
   /**
    * @deprecated Use layerMouseLeave instead
    */
-  @Output() mouseLeave = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() mouseLeave = new EventEmitter<MapMouseEvent & EventData>();
   /**
    * @deprecated Use layerMouseMove instead
    */
-  @Output() mouseMove = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() mouseMove = new EventEmitter<MapMouseEvent & EventData>();
   /**
    * @deprecated Use layerMouseOver instead
    */
-  @Output() mouseOver = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() mouseOver = new EventEmitter<MapMouseEvent & EventData>();
   /**
    * @deprecated Use layerMouseOut instead
    */
-  @Output() mouseOut = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() mouseOut = new EventEmitter<MapMouseEvent & EventData>();
   /**
    * @deprecated Use layerContextMenu instead
    */
-  @Output() contextMenu = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() contextMenu = new EventEmitter<MapMouseEvent & EventData>();
   /**
    * @deprecated Use layerTouchStart instead
    */
-  @Output() touchStart = new EventEmitter<MapLayerTouchEvent & EventData>();
+  @Output() touchStart = new EventEmitter<MapTouchEvent & EventData>();
   /**
    * @deprecated Use layerTouchEnd instead
    */
-  @Output() touchEnd = new EventEmitter<MapLayerTouchEvent & EventData>();
+  @Output() touchEnd = new EventEmitter<MapTouchEvent & EventData>();
   /**
    * @deprecated Use layerTouchCancel instead
    */
-  @Output() touchCancel = new EventEmitter<MapLayerTouchEvent & EventData>();
+  @Output() touchCancel = new EventEmitter<MapTouchEvent & EventData>();
 
   private layerAdded = false;
   private sub: Subscription;