Bump @maplibre/ngx-maplibre-gl

package.json

@@ -40,7 +40,7 @@
     "@angular/platform-server": "^18.2.13",
     "@angular/router": "^18.2.13",
     "@mapbox/point-geometry": "^0.1.0",
-    "@maplibre/ngx-maplibre-gl": "^17.4.3",
+    "@maplibre/ngx-maplibre-gl": "^18.1.4",
     "@turf/bbox": "^7.1.0",
     "@turf/distance": "^7.1.0",
     "@turf/helpers": "^7.1.0",

src/app/map/gisaf-mapbox/gisaf-ruler.directive.ts

@@ -1,6 +1,4 @@
-import { ElementRef, Input, ViewChild, Directive, HostListener } from '@angular/core'
+import { ElementRef, Input, ViewChild, Directive, HostListener, OutputRefSubscription } from '@angular/core'
-
-import { Subscription } from 'rxjs'
 
 import { MatButton } from '@angular/material/button'
 
@@ -41,13 +39,13 @@ export class GisafRulerDirective {
   @Input() secondaryColor: string = 'white'
   @Input() fontHalo: number = 2
   @ViewChild(MatButton) button: MatButton
-  clickSubscription: Subscription
+  clickSubscription: OutputRefSubscription
   lineDrawn: boolean
 
   constructor(
     public elementRef: ElementRef,
     private mapService: MapService
-  ) {}
+  ) { }
 
   @HostListener('click')
   onClick() {
@@ -103,7 +101,7 @@ export class GisafRulerDirective {
   */
 
   labelFormat(n) {
-    return n == 0 ? '0' : n < 1 ? `${(n * 1000).toFixed(2)} m`: `${n.toFixed(3)} km`
+    return n == 0 ? '0' : n < 1 ? `${(n * 1000).toFixed(2)} m` : `${n.toFixed(3)} km`
   }
 
   onMapClick(evt: MapMouseEvent) {
@@ -149,9 +147,9 @@ export class GisafRulerDirective {
   addLayers() {
     const map = this.mapService.mapInstance
     map.addSource(SOURCE_LINE, {
-        type: 'geojson',
+      type: 'geojson',
-        data: this.getLineStringFeatures()
+      data: this.getLineStringFeatures()
-      }
+    }
     )
 
     map.addSource(SOURCE_SYMBOL, {