refactor: fix map controlls

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

@@ -28,10 +28,10 @@ export class CompassControlComponent {
         ),
       ),
     ),
-    map(_event => {
+    map(event => {
-      // const pitch = event.target.transform.pitch;
+      const pitch = event.target._camera.getPitch();
-      // const bearing = event.target.transform.bearing;
+      const bearing = event.target._camera.getBearing();
-      // return `rotateX(${pitch}deg) rotateZ(${bearing}deg)`;
+      return `rotateX(${pitch}deg) rotateZ(${bearing}deg)`;
     }),
   );
 }

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

@@ -40,6 +40,7 @@ class CustomGeolocateControl extends GeolocateControl {
     this._container = document.createElement('div');
     this._map = map;
     this._setupUI();
+    this._finishSetupUI('geolocation' in navigator);
     this._container = container;
     return this._container;
   }

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

@@ -21,7 +21,9 @@
 
 <ion-content id="map">
   <mgl-map
-    [mapStyle]="('(prefers-color-scheme: dark)' | mediaQuery | async) ? 'dark' : ('light' | mapStyleUrl)"
+    [mapStyle]="
+      ('(prefers-color-scheme: dark)' | mediaQuery | async) ? ('dark' | mapStyleUrl) : ('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,7 +14,9 @@
   -->
 <mgl-map
   auto-3d
-  [mapStyle]="('(prefers-color-scheme: dark)' | mediaQuery | async) ? 'dark' : ('light' | mapStyleUrl)"
+  [mapStyle]="
+    ('(prefers-color-scheme: dark)' | mediaQuery | async) ? ('dark' | mapStyleUrl) : ('light' | mapStyleUrl)
+  "
   [interactive]="false"
   [attributionControl]="false"
   [center]="$any(place.geo.point.coordinates)"