improve layer stacking

website/src/lib/components/file-list/FileListNodeLabel.svelte

@@ -34,11 +34,10 @@
     import { editStyle } from '$lib/components/file-list/style/utils.svelte';
     import { getSymbolKey, symbols } from '$lib/assets/symbols';
     import { selection, copied, cut } from '$lib/logic/selection';
-    import { map } from '$lib/components/map/map';
     import { fileActions, pasteSelection } from '$lib/logic/file-actions';
     import { allHidden } from '$lib/logic/hidden';
     import { boundsManager } from '$lib/logic/bounds';
-    import { gpxLayers } from '$lib/components/map/gpx-layer/gpx-layers';
+    import { gpxColors, gpxLayers } from '$lib/components/map/gpx-layer/gpx-layers';
     import { fileStateCollection } from '$lib/logic/file-state';
     import { waypointPopup } from '$lib/components/map/gpx-layer/gpx-layer-popup';
     import { allowedPastes } from './sortable-file-list';
@@ -58,19 +57,11 @@
 
     let singleSelection = $derived($selection.size === 1);
 
-    let nodeColors: string[] = $state([]);
+    let nodeColors: string[] = $derived.by(() => {
-
-    $effect.pre(() => {
         let colors: string[] = [];
-        if (node && $map) {
+        if (node) {
             if (node instanceof GPXFile) {
-                let defaultColor = undefined;
+                let defaultColor = $gpxColors.get(item.getFileId());
-
-                let layer = gpxLayers.getLayer(item.getFileId());
-                if (layer) {
-                    defaultColor = layer.layerColor;
-                }
-
                 let style = node.getStyle(defaultColor);
                 colors = style.color;
             } else if (node instanceof Track) {
@@ -83,14 +74,14 @@
                     colors.push(style['gpx_style:color']);
                 }
                 if (colors.length === 0) {
-                    let layer = gpxLayers.getLayer(item.getFileId());
+                    let defaultColor = $gpxColors.get(item.getFileId());
-                    if (layer) {
+                    if (defaultColor) {
-                        colors.push(layer.layerColor);
+                        colors.push(defaultColor);
                     }
                 }
             }
         }
-        nodeColors = colors;
+        return colors;
     });
 
     let symbolKey = $derived(node instanceof Waypoint ? getSymbolKey(node.sym) : undefined);

website/src/lib/components/map/Map.svelte

@@ -48,7 +48,7 @@
             language = 'en';
         }
 
-        map.init(PUBLIC_MAPBOX_TOKEN, language, hash, geocoder, geolocate);
+        map.init(language, hash, geocoder, geolocate);
     });
 
     onDestroy(() => {

website/src/lib/components/map/gpx-layer/GPXLayers.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onDestroy, onMount } from 'svelte';
+    import { onDestroy } from 'svelte';
     import { gpxLayers } from '$lib/components/map/gpx-layer/gpx-layers';
     import { DistanceMarkers } from '$lib/components/map/gpx-layer/distance-markers';
     import { StartEndMarkers } from '$lib/components/map/gpx-layer/start-end-markers';
@@ -9,13 +9,10 @@
     let distanceMarkers: DistanceMarkers;
     let startEndMarkers: StartEndMarkers;
 
-    onMount(() => {
+    map.onLoad((map_) => {
         gpxLayers.init();
         startEndMarkers = new StartEndMarkers();
         distanceMarkers = new DistanceMarkers();
-    });
-
-    map.onLoad((map_) => {
         createPopups(map_);
     });
 

website/src/lib/components/map/gpx-layer/TrackpointPopup.svelte

@@ -41,6 +41,7 @@
             <Button
                 size="sm"
                 variant="outline"
+                class="justify-start"
                 href={`https://www.openstreetmap.org/edit?#map=${(($map?.getZoom() ?? 17) + 1).toFixed(0)}/${trackpoint.item.getLatitude().toFixed(5)}/${trackpoint.item.getLongitude().toFixed(5)}`}
                 target="_blank"
             >

website/src/lib/components/map/gpx-layer/distance-markers.ts

@@ -3,7 +3,7 @@ import { gpxStatistics } from '$lib/logic/statistics';
 import { getConvertedDistanceToKilometers } from '$lib/units';
 import type { GeoJSONSource } from 'mapbox-gl';
 import { get } from 'svelte/store';
-import { map } from '$lib/components/map/map';
+import { ANCHOR_LAYER_KEY, map } from '$lib/components/map/map';
 import { allHidden } from '$lib/logic/hidden';
 
 const { distanceMarkers, distanceUnits } = settings;
@@ -44,44 +44,45 @@ export class DistanceMarkers {
                     });
                 }
                 if (!map_.getLayer('distance-markers')) {
-                    map_.addLayer({
+                    map_.addLayer(
-                        id: 'distance-markers',
+                        {
-                        type: 'symbol',
+                            id: 'distance-markers',
-                        source: 'distance-markers',
+                            type: 'symbol',
-                        filter: [
+                            source: 'distance-markers',
-                            'match',
+                            filter: [
-                            ['get', 'level'],
+                                'match',
-                            100,
+                                ['get', 'level'],
-                            ['>=', ['zoom'], 0],
+                                100,
-                            50,
+                                ['>=', ['zoom'], 0],
-                            ['>=', ['zoom'], 7],
+                                50,
-                            25,
+                                ['>=', ['zoom'], 7],
-                            [
+                                25,
-                                'any',
+                                [
-                                ['all', ['>=', ['zoom'], 8], ['<=', ['zoom'], 9]],
+                                    'any',
+                                    ['all', ['>=', ['zoom'], 8], ['<=', ['zoom'], 9]],
+                                    ['>=', ['zoom'], 11],
+                                ],
+                                10,
+                                ['>=', ['zoom'], 10],
+                                5,
                                 ['>=', ['zoom'], 11],
+                                1,
+                                ['>=', ['zoom'], 13],
+                                false,
                             ],
-                            10,
+                            layout: {
-                            ['>=', ['zoom'], 10],
+                                'text-field': ['get', 'distance'],
-                            5,
+                                'text-size': 14,
-                            ['>=', ['zoom'], 11],
+                                'text-font': ['Open Sans Bold'],
-                            1,
+                            },
-                            ['>=', ['zoom'], 13],
+                            paint: {
-                            false,
+                                'text-color': 'black',
-                        ],
+                                'text-halo-width': 2,
-                        layout: {
+                                'text-halo-color': 'white',
-                            'text-field': ['get', 'distance'],
+                            },
-                            'text-size': 14,
-                            'text-font': ['Open Sans Bold'],
                         },
-                        paint: {
+                        ANCHOR_LAYER_KEY.distanceMarkers
-                            'text-color': 'black',
+                    );
-                            'text-halo-width': 2,
-                            'text-halo-color': 'white',
-                        },
-                    });
-                } else {
-                    map_.moveLayer('distance-markers');
                 }
             } else {
                 if (map_.getLayer('distance-markers')) {

website/src/lib/components/map/gpx-layer/gpx-layer.ts

@@ -1,6 +1,6 @@
 import { get, type Readable } from 'svelte/store';
 import mapboxgl, { type FilterSpecification } from 'mapbox-gl';
-import { map } from '$lib/components/map/map';
+import { ANCHOR_LAYER_KEY, map } from '$lib/components/map/map';
 import { waypointPopup, trackpointPopup } from './gpx-layer-popup';
 import {
     ListTrackSegmentItem,
@@ -22,6 +22,7 @@ import { fileActionManager } from '$lib/logic/file-action-manager';
 import { fileActions } from '$lib/logic/file-actions';
 import { splitAs } from '$lib/components/toolbar/tools/scissors/scissors';
 import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
+import { gpxColors } from '$lib/components/map/gpx-layer/gpx-layers';
 
 const colors = [
     '#ff0000',
@@ -43,16 +44,35 @@ for (let color of colors) {
 }
 
 // Get the color with the least amount of uses
-function getColor() {
+function getColor(fileId: string) {
     let color = colors.reduce((a, b) => (colorCount[a] <= colorCount[b] ? a : b));
     colorCount[color]++;
+    gpxColors.update((colors) => {
+        colors.set(fileId, color);
+        return colors;
+    });
     return color;
 }
 
-function decrementColor(color: string) {
+function replaceColor(fileId: string, oldColor: string, newColor: string) {
+    if (colorCount.hasOwnProperty(oldColor)) {
+        colorCount[oldColor]--;
+    }
+    colorCount[newColor]++;
+    gpxColors.update((colors) => {
+        colors.set(fileId, newColor);
+        return colors;
+    });
+}
+
+function removeColor(fileId: string, color: string) {
     if (colorCount.hasOwnProperty(color)) {
         colorCount[color]--;
     }
+    gpxColors.update((colors) => {
+        colors.delete(fileId);
+        return colors;
+    });
 }
 
 export function getSvgForSymbol(symbol?: string | undefined, layerColor?: string | undefined) {
@@ -121,7 +141,7 @@ export class GPXLayer {
     constructor(fileId: string, file: Readable<GPXFileWithStatistics | undefined>) {
         this.fileId = fileId;
         this.file = file;
-        this.layerColor = getColor();
+        this.layerColor = getColor(fileId);
         this.unsubscribe.push(
             map.subscribe(($map) => {
                 if ($map) {
@@ -158,7 +178,7 @@ export class GPXLayer {
             file._data.style.color &&
             this.layerColor !== `#${file._data.style.color}`
         ) {
-            decrementColor(this.layerColor);
+            replaceColor(this.fileId, this.layerColor, `#${file._data.style.color}`);
             this.layerColor = `#${file._data.style.color}`;
         }
 
@@ -176,20 +196,23 @@ export class GPXLayer {
             }
 
             if (!_map.getLayer(this.fileId)) {
-                _map.addLayer({
+                _map.addLayer(
-                    id: this.fileId,
+                    {
-                    type: 'line',
+                        id: this.fileId,
-                    source: this.fileId,
+                        type: 'line',
-                    layout: {
+                        source: this.fileId,
-                        'line-join': 'round',
+                        layout: {
-                        'line-cap': 'round',
+                            'line-join': 'round',
+                            'line-cap': 'round',
+                        },
+                        paint: {
+                            'line-color': ['get', 'color'],
+                            'line-width': ['get', 'width'],
+                            'line-opacity': ['get', 'opacity'],
+                        },
                     },
-                    paint: {
+                    ANCHOR_LAYER_KEY.tracks
-                        'line-color': ['get', 'color'],
+                );
-                        'line-width': ['get', 'width'],
-                        'line-opacity': ['get', 'opacity'],
-                    },
-                });
 
                 _map.on('click', this.fileId, this.layerOnClickBinded);
                 _map.on('contextmenu', this.fileId, this.layerOnContextMenuBinded);
@@ -212,18 +235,21 @@ export class GPXLayer {
             }
 
             if (!_map.getLayer(this.fileId + '-waypoints')) {
-                _map.addLayer({
+                _map.addLayer(
-                    id: this.fileId + '-waypoints',
+                    {
-                    type: 'symbol',
+                        id: this.fileId + '-waypoints',
-                    source: this.fileId + '-waypoints',
+                        type: 'symbol',
-                    layout: {
+                        source: this.fileId + '-waypoints',
-                        'icon-image': ['get', 'icon'],
+                        layout: {
-                        'icon-size': 0.3,
+                            'icon-image': ['get', 'icon'],
-                        'icon-anchor': 'bottom',
+                            'icon-size': 0.3,
-                        'icon-padding': 0,
+                            'icon-anchor': 'bottom',
-                        'icon-allow-overlap': true,
+                            'icon-padding': 0,
+                            'icon-allow-overlap': true,
+                        },
                     },
-                });
+                    ANCHOR_LAYER_KEY.waypoints
+                );
 
                 _map.on(
                     'mouseenter',
@@ -272,7 +298,7 @@ export class GPXLayer {
                                 'text-halo-color': 'white',
                             },
                         },
-                        _map.getLayer('distance-markers') ? 'distance-markers' : undefined
+                        ANCHOR_LAYER_KEY.directionMarkers
                     );
                 }
             } else {
@@ -364,7 +390,7 @@ export class GPXLayer {
 
         this.unsubscribe.forEach((unsubscribe) => unsubscribe());
 
-        decrementColor(this.layerColor);
+        removeColor(this.fileId, this.layerColor);
     }
 
     moveToFront() {
@@ -373,13 +399,13 @@ export class GPXLayer {
             return;
         }
         if (_map.getLayer(this.fileId)) {
-            _map.moveLayer(this.fileId);
+            _map.moveLayer(this.fileId, ANCHOR_LAYER_KEY.tracks);
         }
         if (_map.getLayer(this.fileId + '-waypoints')) {
-            _map.moveLayer(this.fileId + '-waypoints');
+            _map.moveLayer(this.fileId + '-waypoints', ANCHOR_LAYER_KEY.waypoints);
         }
         if (_map.getLayer(this.fileId + '-direction')) {
-            _map.moveLayer(this.fileId + '-direction');
+            _map.moveLayer(this.fileId + '-direction', ANCHOR_LAYER_KEY.directionMarkers);
         }
     }
 

website/src/lib/components/map/gpx-layer/gpx-layers.ts

@@ -1,4 +1,5 @@
 import { GPXFileStateCollectionObserver } from '$lib/logic/file-state';
+import { writable } from 'svelte/store';
 import { GPXLayer } from './gpx-layer';
 
 export class GPXLayerCollection {
@@ -42,3 +43,4 @@ export class GPXLayerCollection {
 }
 
 export const gpxLayers = new GPXLayerCollection();
+export const gpxColors = writable(new Map<string, string>());

website/src/lib/components/map/layer-control/OverpassPopup.svelte

@@ -54,28 +54,27 @@
 
 <Card.Root class="border-none shadow-md text-base p-2 max-w-[50dvw] gap-0">
     <Card.Header class="p-0 gap-0">
-        <Card.Title class="text-md">
+        <Card.Title class="text-md flex flex-row">
-            <div class="flex flex-row gap-3">
+            <div class="flex flex-col">
-                <div class="flex flex-col">
+                <p>{name}</p>
-                    {name}
+                <div class="text-muted-foreground text-xs font-normal">
-                    <div class="text-muted-foreground text-xs font-normal">
+                    {poi.item.lat.toFixed(6)}&deg; {poi.item.lon.toFixed(6)}&deg;
-                        {poi.item.lat.toFixed(6)}&deg; {poi.item.lon.toFixed(6)}&deg;
-                    </div>
                 </div>
-                <Button
-                    class="ml-auto"
-                    variant="outline"
-                    size="icon"
-                    href="https://www.openstreetmap.org/edit?editor=id&{poi.item.type ??
-                        'node'}={poi.item.id}"
-                    target="_blank"
-                >
-                    <PencilLine size="16" />
-                </Button>
             </div>
+
+            <Button
+                class="ml-auto"
+                variant="outline"
+                size="icon-sm"
+                href="https://www.openstreetmap.org/edit?editor=id&{poi.item.type ?? 'node'}={poi
+                    .item.id}"
+                target="_blank"
+            >
+                <PencilLine size="16" />
+            </Button>
         </Card.Title>
     </Card.Header>
-    <Card.Content class="flex flex-col p-0 text-sm mt-1 whitespace-normal break-all">
+    <Card.Content class="flex flex-col gap-1 p-0 text-sm whitespace-normal break-all">
         <ScrollArea class="flex flex-col max-h-[30dvh]">
             {#if tags.image || tags['image:0']}
                 <div class="w-full rounded-md overflow-clip my-2 max-w-96 mx-auto">
@@ -100,8 +99,14 @@
                 {/each}
             </div>
         </ScrollArea>
-        <Button class="mt-2" variant="outline" disabled={$selection.size === 0} onclick={addToFile}>
+        <Button
-            <MapPin size="16" />
+            size="sm"
+            class="mt-1 justify-start"
+            variant="outline"
+            disabled={$selection.size === 0}
+            onclick={addToFile}
+        >
+            <MapPin size="14" />
             {i18n._('toolbar.waypoint.add')}
         </Button>
     </Card.Content>

website/src/lib/components/map/layer-control/overpass-layer.ts

@@ -6,6 +6,7 @@ import { overpassQueryData } from '$lib/assets/layers';
 import { MapPopup } from '$lib/components/map/map-popup';
 import { settings } from '$lib/logic/settings';
 import { db } from '$lib/db';
+import { ANCHOR_LAYER_KEY } from '$lib/components/map/map';
 
 const { currentOverpassQueries } = settings;
 
@@ -85,17 +86,20 @@ export class OverpassLayer {
             }
 
             if (!this.map.getLayer('overpass')) {
-                this.map.addLayer({
+                this.map.addLayer(
-                    id: 'overpass',
+                    {
-                    type: 'symbol',
+                        id: 'overpass',
-                    source: 'overpass',
+                        type: 'symbol',
-                    layout: {
+                        source: 'overpass',
-                        'icon-image': ['get', 'icon'],
+                        layout: {
-                        'icon-size': 0.25,
+                            'icon-image': ['get', 'icon'],
-                        'icon-padding': 0,
+                            'icon-size': 0.25,
-                        'icon-allow-overlap': ['step', ['zoom'], false, 14, true],
+                            'icon-padding': 0,
+                            'icon-allow-overlap': ['step', ['zoom'], false, 14, true],
+                        },
                     },
-                });
+                    ANCHOR_LAYER_KEY.overpass
+                );
 
                 this.map.on('mouseenter', 'overpass', this.onHoverBinded);
                 this.map.on('click', 'overpass', this.onHoverBinded);

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

@@ -20,6 +20,28 @@ let fitBoundsOptions: mapboxgl.MapOptions['fitBoundsOptions'] = {
     easing: () => 1,
 };
 
+const emptySource: mapboxgl.GeoJSONSourceSpecification = {
+    type: 'geojson',
+    data: {
+        type: 'FeatureCollection',
+        features: [],
+    },
+};
+export const ANCHOR_LAYER_KEY = {
+    mapillary: 'mapillary-end',
+    tracks: 'tracks-end',
+    directionMarkers: 'direction-markers-end',
+    distanceMarkers: 'distance-markers-end',
+    interactions: 'interactions-end',
+    overpass: 'overpass-end',
+    waypoints: 'waypoints-end',
+};
+const anchorLayers: mapboxgl.LayerSpecification[] = Object.values(ANCHOR_LAYER_KEY).map((id) => ({
+    id: id,
+    type: 'symbol',
+    source: 'empty-source',
+}));
+
 export class MapboxGLMap {
     private _map: Writable<mapboxgl.Map | null> = writable(null);
     private _onLoadCallbacks: ((map: mapboxgl.Map) => void)[] = [];
@@ -29,19 +51,15 @@ export class MapboxGLMap {
         return this._map.subscribe(run, invalidate);
     }
 
-    init(
+    init(language: string, hash: boolean, geocoder: boolean, geolocate: boolean) {
-        accessToken: string,
-        language: string,
-        hash: boolean,
-        geocoder: boolean,
-        geolocate: boolean
-    ) {
         const map = new mapboxgl.Map({
             container: 'map',
             style: {
                 version: 8,
-                sources: {},
+                sources: {
-                layers: [],
+                    'empty-source': emptySource,
+                },
+                layers: anchorLayers,
                 imports: [
                     {
                         id: 'basemap',
@@ -50,11 +68,6 @@ export class MapboxGLMap {
                     {
                         id: 'overlays',
                         url: '',
-                        data: {
-                            version: 8,
-                            sources: {},
-                            layers: [],
-                        },
                     },
                 ],
             },

website/src/lib/components/map/street-view-control/mapillary.ts

@@ -2,6 +2,7 @@ import mapboxgl, { type LayerSpecification, type VectorSourceSpecification } fro
 import { Viewer, type ViewerBearingEvent } from 'mapillary-js/dist/mapillary.module';
 import 'mapillary-js/dist/mapillary.css';
 import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
+import { ANCHOR_LAYER_KEY } from '$lib/components/map/map';
 
 const mapillarySource: VectorSourceSpecification = {
     type: 'vector',
@@ -99,10 +100,10 @@ export class MapillaryLayer {
             this.map.addSource('mapillary', mapillarySource);
         }
         if (!this.map.getLayer('mapillary-sequence')) {
-            this.map.addLayer(mapillarySequenceLayer);
+            this.map.addLayer(mapillarySequenceLayer, ANCHOR_LAYER_KEY.mapillary);
         }
         if (!this.map.getLayer('mapillary-image')) {
-            this.map.addLayer(mapillaryImageLayer);
+            this.map.addLayer(mapillaryImageLayer, ANCHOR_LAYER_KEY.mapillary);
         }
         this.map.on('style.load', this.addBinded);
         this.map.on('mouseenter', 'mapillary-image', this.onMouseEnterBinded);

website/src/lib/components/toolbar/tools/Clean.svelte

@@ -15,7 +15,7 @@
     import { onDestroy, onMount } from 'svelte';
     import { getURLForLanguage } from '$lib/utils';
     import { Trash2 } from '@lucide/svelte';
-    import { map } from '$lib/components/map/map';
+    import { ANCHOR_LAYER_KEY, map } from '$lib/components/map/map';
     import type { GeoJSONSource } from 'mapbox-gl';
     import { selection } from '$lib/logic/selection';
     import { fileActions } from '$lib/logic/file-actions';
@@ -63,15 +63,18 @@
                     });
                 }
                 if (!$map.getLayer('rectangle')) {
-                    $map.addLayer({
+                    $map.addLayer(
-                        id: 'rectangle',
+                        {
-                        type: 'fill',
+                            id: 'rectangle',
-                        source: 'rectangle',
+                            type: 'fill',
-                        paint: {
+                            source: 'rectangle',
-                            'fill-color': 'SteelBlue',
+                            paint: {
-                            'fill-opacity': 0.5,
+                                'fill-color': 'SteelBlue',
+                                'fill-opacity': 0.5,
+                            },
                         },
-                    });
+                        ANCHOR_LAYER_KEY.interactions
+                    );
                 }
             }
         }

website/src/lib/components/toolbar/tools/Elevation.svelte

@@ -2,7 +2,6 @@
     import { Button } from '$lib/components/ui/button';
     import Help from '$lib/components/Help.svelte';
     import { MountainSnow } from '@lucide/svelte';
-    import { map } from '$lib/components/map/map';
     import { i18n } from '$lib/i18n.svelte';
     import { getURLForLanguage } from '$lib/utils';
     import { selection } from '$lib/logic/selection';
@@ -20,11 +19,7 @@
         variant="outline"
         class="whitespace-normal h-fit"
         disabled={!validSelection}
-        onclick={() => {
+        onclick={() => fileActions.addElevationToSelection()}
-            if ($map) {
-                fileActions.addElevationToSelection($map);
-            }
-        }}
     >
         <MountainSnow size="16" class="shrink-0" />
         {i18n._('toolbar.elevation.button')}

website/src/lib/components/toolbar/tools/reduce/utils.svelte.ts

@@ -1,5 +1,5 @@
 import { ListItem, ListTrackSegmentItem } from '$lib/components/file-list/file-list';
-import { map } from '$lib/components/map/map';
+import { ANCHOR_LAYER_KEY, map } from '$lib/components/map/map';
 import { fileActions } from '$lib/logic/file-actions';
 import { GPXFileStateCollectionObserver, type GPXFileState } from '$lib/logic/file-state';
 import { selection } from '$lib/logic/selection';
@@ -144,17 +144,18 @@ export class ReducedGPXLayerCollection {
             });
         }
         if (!map_.getLayer('simplified')) {
-            map_.addLayer({
+            map_.addLayer(
-                id: 'simplified',
+                {
-                type: 'line',
+                    id: 'simplified',
-                source: 'simplified',
+                    type: 'line',
-                paint: {
+                    source: 'simplified',
-                    'line-color': 'white',
+                    paint: {
-                    'line-width': 3,
+                        'line-color': 'white',
+                        'line-width': 3,
+                    },
                 },
-            });
+                ANCHOR_LAYER_KEY.interactions
-        } else {
+            );
-            map_.moveLayer('simplified');
         }
     }
 

website/src/lib/components/toolbar/tools/scissors/split-controls.ts

@@ -8,6 +8,7 @@ import { get } from 'svelte/store';
 import { fileStateCollection } from '$lib/logic/file-state';
 import { fileActions } from '$lib/logic/file-actions';
 import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
+import { ANCHOR_LAYER_KEY } from '$lib/components/map/map';
 
 export class SplitControls {
     map: mapboxgl.Map;
@@ -108,24 +109,25 @@ export class SplitControls {
             }
 
             if (!this.map.getLayer('split-controls')) {
-                this.map.addLayer({
+                this.map.addLayer(
-                    id: 'split-controls',
+                    {
-                    type: 'symbol',
+                        id: 'split-controls',
-                    source: 'split-controls',
+                        type: 'symbol',
-                    layout: {
+                        source: 'split-controls',
-                        'icon-image': 'split-control',
+                        layout: {
-                        'icon-size': 0.25,
+                            'icon-image': 'split-control',
-                        'icon-padding': 0,
+                            'icon-size': 0.25,
+                            'icon-padding': 0,
+                        },
+                        filter: ['<=', ['get', 'minZoom'], ['zoom']],
                     },
-                    filter: ['<=', ['get', 'minZoom'], ['zoom']],
+                    ANCHOR_LAYER_KEY.interactions
-                });
+                );
 
                 this.map.on('mouseenter', 'split-controls', this.layerOnMouseEnterBinded);
                 this.map.on('mouseleave', 'split-controls', this.layerOnMouseLeaveBinded);
                 this.map.on('click', 'split-controls', this.layerOnClickBinded);
             }
-
-            this.map.moveLayer('split-controls');
         } catch (e) {
             // No reliable way to check if the map is ready to add sources and layers
         }

website/src/lib/logic/file-actions.ts

@@ -807,7 +807,7 @@ export const fileActions = {
             });
         });
     },
-    addElevationToSelection: async (map: mapboxgl.Map) => {
+    addElevationToSelection: async () => {
         if (get(selection).size === 0) {
             return;
         }

website/src/locales/zh.json

@@ -282,7 +282,7 @@
             "update": "更新图层"
         },
         "opacity": "图层透明度",
-        "terrain": "Terrain source",
+        "terrain": "地形来源",
         "label": {
             "basemaps": "底图",
             "overlays": "叠加层",
@@ -326,7 +326,7 @@
             "usgs": "USGS",
             "bikerouterGravel": "bikerouter.de Gravel",
             "cyclOSMlite": "CyclOSM Lite",
-            "mapterhornHillshade": "Mapterhorn Hillshade",
+            "mapterhornHillshade": "山体阴影",
             "openRailwayMap": "OpenRailwayMap",
             "swisstopoSlope": "Swisstopo Slope",
             "swisstopoHiking": "Swisstopo Hiking",