Merge branch 'dev' into tauri

website/src/lib/components/map/style.ts

@@ -1,3 +1,10 @@
+import type {
+    GeoJSONSourceSpecification,
+    LayerSpecification,
+    Map,
+    SkySpecification,
+    StyleSpecification,
+} from 'maplibre-gl';
 import { settings } from '$lib/state/settings';
 import { get, type Writable } from 'svelte/store';
 import {
@@ -13,13 +20,23 @@ import { i18n } from '$lib/i18n/i18n.svelte';
 const { currentBasemap, currentOverlays, customLayers, opacities, terrainSource, distanceUnits } =
     settings;
 
-const emptySource: maplibregl.GeoJSONSourceSpecification = {
+const emptySource: GeoJSONSourceSpecification = {
     type: 'geojson',
     data: {
         type: 'FeatureCollection',
         features: [],
     },
 };
+/**
+ * The sky above the horizon when the map is tilted, without the atmosphere around the globe.
+ */
+const sky: SkySpecification = {
+    'sky-color': '#88C6FC',
+    'horizon-color': '#ffffff',
+    'sky-horizon-blend': 0.8,
+    'atmosphere-blend': 0,
+};
+
 export const ANCHOR_LAYER_KEY = {
     overlays: 'overlays-end',
     mapillary: 'mapillary-end',
@@ -32,18 +49,18 @@ export const ANCHOR_LAYER_KEY = {
     waypoints: 'waypoints-end',
     routingControls: 'routing-controls-end',
 };
-const anchorLayers: maplibregl.LayerSpecification[] = Object.values(ANCHOR_LAYER_KEY).map((id) => ({
+const anchorLayers: LayerSpecification[] = Object.values(ANCHOR_LAYER_KEY).map((id) => ({
     id: id,
     type: 'symbol',
     source: 'empty-source',
 }));
 
 export class StyleManager {
-    private _map: Writable<maplibregl.Map | null>;
+    private _map: Writable<Map | null>;
     private _maptilerKey: string;
     private _pastOverlays: Set<string> = new Set();
 
-    constructor(map: Writable<maplibregl.Map | null>, maptilerKey: string) {
+    constructor(map: Writable<Map | null>, maptilerKey: string) {
         this._map = map;
         this._maptilerKey = maptilerKey;
         this._map.subscribe((map_) => {
@@ -58,6 +75,7 @@ export class StyleManager {
         opacities.subscribe(() => this.updateOverlays());
         terrainSource.subscribe(() => this.updateTerrain());
         customLayers.subscribe(() => this.updateBasemap());
+        i18n.subscribe(() => this.updateBasemap());
         distanceUnits.subscribe(() => {
             const map = get(this._map);
             if (map && (map.getLayer('contours_m') || map.getLayer('contours_ft'))) {
@@ -75,10 +93,10 @@ export class StyleManager {
         });
     }
 
-    async buildStyle(basemap: string): Promise<maplibregl.StyleSpecification> {
+    async buildStyle(basemap: string): Promise<StyleSpecification> {
         const custom = get(customLayers);
 
-        const style: maplibregl.StyleSpecification = {
+        const style: StyleSpecification = {
             version: 8,
             projection: {
                 type: 'globe',
@@ -91,7 +109,7 @@ export class StyleManager {
 
         const basemapInfo = basemaps[basemap] ?? custom[basemap]?.value ?? basemaps[defaultBasemap];
 
-        let basemapStyle = basemaps.openStreetMap as maplibregl.StyleSpecification;
+        let basemapStyle = basemaps.openStreetMap as StyleSpecification;
         try {
             basemapStyle = await this.get(basemapInfo);
             for (const source in basemapStyle.sources) {
@@ -110,6 +128,7 @@ export class StyleManager {
             console.error(e.message);
         }
         this.merge(style, basemapStyle);
+        style.sky ??= sky;
 
         const terrain = this.getCurrentTerrain();
         style.sources[terrain.source] = terrainSources[terrain.source];
@@ -202,9 +221,7 @@ export class StyleManager {
         }
     }
 
-    async get(
-        styleInfo: maplibregl.StyleSpecification | string
-    ): Promise<maplibregl.StyleSpecification> {
+    async get(styleInfo: StyleSpecification | string): Promise<StyleSpecification> {
         if (typeof styleInfo === 'string') {
             let styleUrl = styleInfo as string;
             const response = await fetch(styleUrl, { cache: 'force-cache' });
@@ -218,7 +235,7 @@ export class StyleManager {
         }
     }
 
-    merge(style: maplibregl.StyleSpecification, other: maplibregl.StyleSpecification) {
+    merge(style: StyleSpecification, other: StyleSpecification) {
         style.sources = { ...style.sources, ...other.sources };
         const units = get(distanceUnits);
         for (let layer of other.layers ?? []) {
@@ -270,6 +287,9 @@ export class StyleManager {
         if (other.glyphs && !style.glyphs) {
             style.glyphs = other.glyphs;
         }
+        if (other.sky && !style.sky) {
+            style.sky = other.sky;
+        }
     }
 
     getCurrentTerrain() {