refactor: maplibre update

frontend/app/angular.json

@@ -40,6 +40,16 @@
                 "glob": "CHANGELOG.md",
                 "input": ".",
                 "output": "assets"
+              },
+              {
+                "glob": "maplibre-gl-worker.mjs",
+                "input": "node_modules/maplibre-gl/dist",
+                "output": "/"
+              },
+              {
+                "glob": "maplibre-gl-shared.mjs",
+                "input": "node_modules/maplibre-gl/dist",
+                "output": "/"
               }
             ],
             "styles": [

frontend/app/package.json

@@ -78,7 +78,7 @@
     "@ionic/angular": "8.8.19",
     "@ionic/angular-server": "8.8.19",
     "@ionic/storage-angular": "4.0.0",
-    "@maplibre/ngx-maplibre-gl": "17.4.1",
+    "@maplibre/ngx-maplibre-gl": "22.1.0",
     "@ngx-translate/core": "15.0.0",
     "@ngx-translate/http-loader": "8.0.0",
     "@openid/appauth": "1.3.2",
@@ -96,7 +96,7 @@
     "ionic-appauth": "2.1.0",
     "ionicons": "8.1.0",
     "jsonpath-plus": "10.3.0",
-    "maplibre-gl": "4.0.2",
+    "maplibre-gl": "6.0.0",
     "material-symbols": "0.17.1",
     "moment": "2.30.1",
     "ngx-date-fns": "11.0.0",

frontend/app/src/app/app.module.ts

@@ -65,7 +65,7 @@ import {setDefaultOptions} from 'date-fns';
 import {DateFnsConfigurationService} from 'ngx-date-fns';
 import {Capacitor} from '@capacitor/core';
 import {SplashScreen} from '@capacitor/splash-screen';
-import maplibregl from 'maplibre-gl';
+import * as maplibregl from 'maplibre-gl';
 import {Protocol} from 'pmtiles';
 
 registerLocaleData(localeDe);
@@ -87,6 +87,7 @@ export function initializerFactory(
 ) {
   return async () => {
     try {
+      maplibregl.setWorkerUrl(new URL('maplibre-gl-worker.mjs', document.baseURI).href);
       maplibregl.addProtocol('pmtiles', new Protocol().tile);
       initLogger(logger);
       await storageProvider.init();

frontend/app/src/app/modules/map/controls/compass-control.component.ts

@@ -27,10 +27,10 @@ export class CompassControlComponent {
       ),
     ),
     map(event => {
-      const pitch = event.target.transform.pitch;
-      const angle = event.target.transform.angle;
+      // const pitch = event.target.transform.pitch;
+      // const bearing = event.target.transform.bearing;
 
-      return `rotateX(${pitch}deg) rotateZ(${angle}rad)`;
+      // return `rotateX(${pitch}deg) rotateZ(${bearing}deg)`;
     }),
   );
 

frontend/app/src/app/modules/map/controls/geolocate-control.component.ts

@@ -38,7 +38,7 @@ class CustomGeolocateControl extends GeolocateControl {
     const container = this._container;
     this._container = document.createElement('div');
     this._map = map;
-    this._setupUI(true);
+    this._setupUI();
     this._container = container;
     return this._container;
   }

frontend/app/src/app/modules/map/map-page.html

@@ -21,7 +21,7 @@
 
 <ion-content id="map">
   <mgl-map
-    [style]="('(prefers-color-scheme: dark)' | mediaQuery | async) ? 'dark' : ('light' | mapStyleUrl)"
+    [mapStyle]="('(prefers-color-scheme: dark)' | mediaQuery | async) ? 'dark' : ('light' | mapStyleUrl)"
     [attributionControl]="false"
     [fitBounds]="(bounds | async) ?? undefined"
     [fitBoundsOptions]="{maxZoom: 15, padding: {top: 100, bottom: 50, left: 50, right: 50}, animate: false}"

frontend/app/src/app/modules/map/map-widget.html

@@ -14,11 +14,11 @@
   -->
 <mgl-map
   auto-3d
-  [style]="('(prefers-color-scheme: dark)' | mediaQuery | async) ? 'dark' : ('light' | mapStyleUrl)"
+  [mapStyle]="('(prefers-color-scheme: dark)' | mediaQuery | async) ? 'dark' : ('light' | mapStyleUrl)"
   [interactive]="false"
   [attributionControl]="false"
   [center]="$any(place.geo.point.coordinates)"
-  [zoom]="[16]"
+  [zoom]="16"
   [fitBounds]="place.geo | thingBounds"
   [fitBoundsOptions]="{maxZoom: 15, padding: {top: 100, bottom: 50, left: 50, right: 50}}"
 >

frontend/app/src/index.html

@@ -8,7 +8,7 @@
     <base href="/" />
     <meta
       http-equiv="Content-Security-Policy"
-      content="script-src 'self' 'unsafe-inline' blob:;object-src 'none';base-uri 'none';style-src 'self' 'unsafe-inline';"
+      content="script-src 'self' 'unsafe-inline' blob:;object-src 'none';base-uri 'none';style-src 'self' 'unsafe-inline';worker-src 'self' ;"
     />
 
     <meta