use style imports instead of layers to allow stacking mapbox styles, c…

…loses #32
gpxstudio · Aug 31, 2024 · 0cb7811 · 0cb7811
1 parent 33f3b6c
commit 0cb7811
Show file tree

Hide file tree

Showing 9 changed files with 3,112 additions and 1,040 deletions.
diff --git a/website/src/lib/assets/custom/bikerouter-gravel.json b/website/src/lib/assets/custom/bikerouter-gravel.json
diff --git a/website/src/lib/assets/layers.ts b/website/src/lib/assets/layers.ts
diff --git a/website/src/lib/components/Map.svelte b/website/src/lib/components/Map.svelte
diff --git a/website/src/lib/components/gpx-layer/DistanceMarkers.ts b/website/src/lib/components/gpx-layer/DistanceMarkers.ts
@@ -1,10 +1,9 @@
 
-import { font } from "$lib/assets/layers";
 import { settings } from "$lib/db";
 import { gpxStatistics } from "$lib/stores";
 import { get } from "svelte/store";
 
-const { distanceMarkers, distanceUnits, currentBasemap } = settings;
+const { distanceMarkers, distanceUnits } = settings;
 
 export class DistanceMarkers {
     map: mapboxgl.Map;
@@ -17,7 +16,7 @@ export class DistanceMarkers {
         this.unsubscribes.push(gpxStatistics.subscribe(this.updateBinded));
         this.unsubscribes.push(distanceMarkers.subscribe(this.updateBinded));
         this.unsubscribes.push(distanceUnits.subscribe(this.updateBinded));
-        this.map.on('style.load', this.updateBinded);
+        this.map.on('style.import.load', this.updateBinded);
     }
 
     update() {
@@ -40,7 +39,7 @@ export class DistanceMarkers {
                         layout: {
                             'text-field': ['get', 'distance'],
                             'text-size': 14,
-                            'text-font': [font[get(currentBasemap)] ?? 'Open Sans Bold'],
+                            'text-font': ['Open Sans Bold'],
                             'text-padding': 20,
                         },
                         paint: {

diff --git a/website/src/lib/components/gpx-layer/GPXLayer.ts b/website/src/lib/components/gpx-layer/GPXLayer.ts
@@ -7,7 +7,6 @@ import { addSelectItem, selectItem, selection } from "$lib/components/file-list/
 import { ListTrackSegmentItem, ListWaypointItem, ListWaypointsItem, ListTrackItem, ListFileItem, ListRootItem } from "$lib/components/file-list/FileList";
 import type { Waypoint } from "gpx";
 import { getElevation, resetCursor, setGrabbingCursor, setPointerCursor, setScissorsCursor } from "$lib/utils";
-import { font } from "$lib/assets/layers";
 import { selectedWaypoint } from "$lib/components/toolbar/tools/Waypoint.svelte";
 import { MapPin, Square } from "lucide-static";
 import { getSymbolKey, symbols } from "$lib/assets/symbols";
@@ -66,7 +65,7 @@ function getMarkerForSymbol(symbol: string | undefined, layerColor: string) {
     </svg>`;
 }
 
-const { directionMarkers, verticalFileView, currentBasemap, defaultOpacity, defaultWeight } = settings;
+const { directionMarkers, verticalFileView, defaultOpacity, defaultWeight } = settings;
 
 export class GPXLayer {
     map: mapboxgl.Map;
@@ -112,7 +111,7 @@ export class GPXLayer {
         }));
         this.draggable = get(currentTool) === Tool.WAYPOINT;
 
-        this.map.on('style.load', this.updateBinded);
+        this.map.on('style.import.load', this.updateBinded);
     }
 
     update() {
@@ -170,7 +169,7 @@ export class GPXLayer {
                             'text-keep-upright': false,
                             'text-max-angle': 361,
                             'text-allow-overlap': true,
-                            'text-font': [font[get(currentBasemap)] ?? 'Open Sans Bold'],
+                            'text-font': ['Open Sans Bold'],
                             'symbol-placement': 'line',
                             'symbol-spacing': 20,
                         },
@@ -294,7 +293,7 @@ export class GPXLayer {
 
     updateMap(map: mapboxgl.Map) {
         this.map = map;
-        this.map.on('style.load', this.updateBinded);
+        this.map.on('style.import.load', this.updateBinded);
         this.update();
     }
 
@@ -303,7 +302,7 @@ export class GPXLayer {
             this.map.off('click', this.fileId, this.layerOnClickBinded);
             this.map.off('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
             this.map.off('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
-            this.map.off('style.load', this.updateBinded);
+            this.map.off('style.import.load', this.updateBinded);
 
             if (this.map.getLayer(this.fileId + '-direction')) {
                 this.map.removeLayer(this.fileId + '-direction');