refactor: maplibre update

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