working overpass layer, and selection

website/package-lock.json

@@ -18,6 +18,7 @@
                 "dexie": "^4.0.7",
                 "gpx": "file:../gpx",
                 "immer": "^10.1.1",
+                "lucide-static": "^0.408.0",
                 "lucide-svelte": "^0.395.0",
                 "mapbox-gl": "^3.4.0",
                 "mapillary-js": "^4.1.2",
@@ -4371,6 +4372,11 @@
                 "es5-ext": "~0.10.2"
             }
         },
+        "node_modules/lucide-static": {
+            "version": "0.408.0",
+            "resolved": "https://registry.npmjs.org/lucide-static/-/lucide-static-0.408.0.tgz",
+            "integrity": "sha512-XJioz3vKagiyA6qMDWkYqU1RUS/bMjqio0/TCOItievnV/C4wwgJZGAbk6eVDe6Wv+d0e9NbhS7Y8yMEpGkElQ=="
+        },
         "node_modules/lucide-svelte": {
             "version": "0.395.0",
             "resolved": "https://registry.npmjs.org/lucide-svelte/-/lucide-svelte-0.395.0.tgz",

website/package.json

@@ -56,6 +56,7 @@
         "dexie": "^4.0.7",
         "gpx": "file:../gpx",
         "immer": "^10.1.1",
+        "lucide-static": "^0.408.0",
         "lucide-svelte": "^0.395.0",
         "mapbox-gl": "^3.4.0",
         "mapillary-js": "^4.1.2",

website/src/lib/assets/layers.ts

@@ -1,4 +1,5 @@
 import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
+import { TramFront } from 'lucide-static';
 import { type AnySourceData, type Style } from 'mapbox-gl';
 
 export const basemaps: { [key: string]: string | Style; } = {
@@ -540,6 +541,15 @@ export const overlayTree: LayerTreeType = {
     },
 }
 
+// Hierachy containing all Overpass layers
+export const overpassTree: LayerTreeType = {
+    points_of_interest: {
+        transport: {
+            tram: true,
+        },
+    },
+};
+
 // Default basemap used
 export const defaultBasemap = 'mapboxOutdoors';
 
@@ -585,6 +595,15 @@ export const defaultOverlays = {
     },
 };
 
+// Default Overpass queries used (none)
+export const defaultOverpassQueries: LayerTreeType = {
+    points_of_interest: {
+        transport: {
+            tram: false,
+        },
+    },
+};
+
 // Default basemaps shown in the layer menu
 export const defaultBasemapTree: LayerTreeType = {
     basemaps: {
@@ -680,6 +699,15 @@ export const defaultOverlayTree: LayerTreeType = {
     }
 }
 
+// Default Overpass queries shown in the layer menu
+export const defaultOverpassTree: LayerTreeType = {
+    points_of_interest: {
+        transport: {
+            tram: true,
+        },
+    },
+};
+
 export type CustomLayer = {
     id: string,
     name: string,
@@ -690,6 +718,21 @@ export type CustomLayer = {
     value: string | {},
 };
 
+type OverpassQuery = Record<string, string | undefined>;
+
+export const overpassQueries: Record<string, OverpassQuery> = {
+    tram: {
+        railway: 'tram_stop',
+    },
+};
+
+export const overpassIcons: Record<string, { svg: string, color: string }> = {
+    tram: {
+        svg: TramFront,
+        color: '#000000',
+    }
+};
+
 export const stravaHeatmapServers = ['https://heatmap-external-a.strava.com/tiles-auth', 'https://heatmap-external-b.strava.com/tiles-auth', 'https://heatmap-external-c.strava.com/tiles-auth'];
 export const stravaHeatmapActivityIds: { [key: string]: string } = {
     stravaHeatmapRun: 'sport_Run',

website/src/lib/components/layer-control/LayerControl.svelte

@@ -21,8 +21,10 @@
 		currentBasemap,
 		previousBasemap,
 		currentOverlays,
+		currentOverpassQueries,
 		selectedBasemapTree,
 		selectedOverlayTree,
+		selectedOverpassTree,
 		customLayers,
 		opacities
 	} = settings;
@@ -167,6 +169,17 @@
 							/>
 						{/if}
 					</div>
+					<Separator class="w-full" />
+					<div class="p-2">
+						{#if $currentOverpassQueries}
+							<LayerTree
+								layerTree={$selectedOverpassTree}
+								name="overpass"
+								multiple={true}
+								bind:checked={$currentOverpassQueries}
+							/>
+						{/if}
+					</div>
 				</div>
 			</ScrollArea>
 		</div>

website/src/lib/components/layer-control/LayerControlSettings.svelte

@@ -9,7 +9,7 @@
 	import * as Select from '$lib/components/ui/select';
 	import { Slider } from '$lib/components/ui/slider';
 
-	import { basemapTree, overlays, overlayTree } from '$lib/assets/layers';
+	import { basemapTree, overlays, overlayTree, overpassTree } from '$lib/assets/layers';
 	import { isSelected } from '$lib/components/layer-control/utils';
 	import { settings } from '$lib/db';
 
@@ -22,6 +22,7 @@
 	const {
 		selectedBasemapTree,
 		selectedOverlayTree,
+		selectedOverpassTree,
 		stravaHeatmapColor,
 		currentOverlays,
 		customLayers,
@@ -29,6 +30,7 @@
 	} = settings;
 
 	export let open: boolean;
+	let accordionValue = 'layer-selection';
 
 	let selectedOverlay = writable(undefined);
 	let overlayOpacity = writable([1]);
@@ -113,30 +115,40 @@
 	<Sheet.Content>
 		<Sheet.Header class="h-full">
 			<Sheet.Title>{$_('layers.settings')}</Sheet.Title>
+			<ScrollArea class="w-[105%] pr-4">
 				<Sheet.Description>
 					{$_('layers.settings_help')}
 				</Sheet.Description>
-			<Accordion.Root class="flex flex-col overflow-hidden" value="layer-selection">
+				<Accordion.Root class="flex flex-col" bind:value={accordionValue}>
-				<Accordion.Item value="layer-selection" class="flex flex-col overflow-hidden">
+					<Accordion.Item value="layer-selection" class="flex flex-col">
 						<Accordion.Trigger>{$_('layers.selection')}</Accordion.Trigger>
 						<Accordion.Content class="grow flex flex-col border rounded">
-						<ScrollArea class="py-2 pl-1 pr-2 min-h-9">
+							<div class="py-2 pl-1 pr-2">
 								<LayerTree
 									layerTree={basemapTree}
 									name="basemapSettings"
 									multiple={true}
 									bind:checked={$selectedBasemapTree}
 								/>
-						</ScrollArea>
+							</div>
 							<Separator />
-						<ScrollArea class="py-2 pl-1 pr-2 min-h-9">
+							<div class="py-2 pl-1 pr-2">
 								<LayerTree
 									layerTree={overlayTree}
 									name="overlaySettings"
 									multiple={true}
 									bind:checked={$selectedOverlayTree}
 								/>
-						</ScrollArea>
+							</div>
+							<Separator />
+							<div class="py-2 pl-1 pr-2">
+								<LayerTree
+									layerTree={overpassTree}
+									name="overpassSettings"
+									multiple={true}
+									bind:checked={$selectedOverpassTree}
+								/>
+							</div>
 						</Accordion.Content>
 					</Accordion.Item>
 					<Accordion.Item value="overlay-opacity">
@@ -222,6 +234,7 @@
 						</Accordion.Content>
 					</Accordion.Item>
 				</Accordion.Root>
+			</ScrollArea>
 		</Sheet.Header>
 	</Sheet.Content>
 </Sheet.Root>

website/src/lib/components/layer-control/OverpassLayer.ts

@@ -1,24 +1,14 @@
-import { type LayerTreeType } from "$lib/assets/layers";
 import SphericalMercator from "@mapbox/sphericalmercator";
 import { getLayers } from "./utils";
 import mapboxgl from "mapbox-gl";
 import { get, writable } from "svelte/store";
 import { liveQuery } from "dexie";
-import { db } from "$lib/db";
+import { db, settings } from "$lib/db";
+import { overpassIcons, overpassQueries } from "$lib/assets/layers";
 
-const poiSelection: LayerTreeType = {
+const {
-    transport: {
+    currentOverpassQueries
-        tram: true,
+} = settings;
-    },
-};
-
-type PoiQuery = Record<string, string | undefined>;
-
-const poiQueries: Record<string, PoiQuery> = {
-    tram: {
-        railway: 'tram_stop',
-    },
-};
 
 const mercator = new SphericalMercator({
     size: 256,
@@ -31,9 +21,9 @@ liveQuery(() => db.overpassdata.toArray()).subscribe((pois) => {
 });
 
 export class OverpassLayer {
-    overpassUrl = 'https://overpass-api.de/api/interpreter';
+    overpassUrl = 'https://overpass.private.coffee/api/interpreter';
     minZoom = 12;
-    queryZoom = 14;
+    queryZoom = 12;
     map: mapboxgl.Map;
 
     currentQueries: Set<string> = new Set();
@@ -50,6 +40,10 @@ export class OverpassLayer {
         this.map.on('moveend', this.queryIfNeededBinded);
         this.map.on('style.load', this.updateBinded);
         this.unsubscribes.push(data.subscribe(this.updateBinded));
+        this.unsubscribes.push(currentOverpassQueries.subscribe(() => {
+            this.updateBinded();
+            this.queryIfNeededBinded();
+        }));
 
         this.map.showTileBoundaries = true;
 
@@ -64,6 +58,8 @@ export class OverpassLayer {
     }
 
     update() {
+        this.loadIcons();
+
         let d = get(data);
 
         try {
@@ -83,14 +79,13 @@ export class OverpassLayer {
                     type: 'symbol',
                     source: 'overpass',
                     layout: {
-                        'text-field': ['get', 'name'],
+                        'icon-image': ['get', 'query'],
-                        'text-allow-overlap': true,
+                        'icon-size': 0.25,
                     },
-                    paint: {
-                        'text-color': 'black',
-                    }
                 });
             }
+
+            this.map.setFilter('overpass', ['in', 'query', ...getCurrentQueries()]);
         } catch (e) {
             // No reliable way to check if the map is ready to add sources and layers
         }
@@ -111,7 +106,11 @@ export class OverpassLayer {
     }
 
     query(bbox: [number, number, number, number]) {
-        let layers = getLayers(poiSelection);
+        let queries = getCurrentQueries();
+        if (queries.length === 0) {
+            return;
+        }
+
         let tileLimits = mercator.xyz(bbox, this.queryZoom);
 
         for (let x = tileLimits.minX; x <= tileLimits.maxX; x++) {
@@ -120,34 +119,34 @@ export class OverpassLayer {
                     continue;
                 }
 
-                db.overpasslayertiles.where('[x+y]').equals([x, y]).toArray().then((layertiles) => {
+                db.overpassquerytiles.where('[x+y]').equals([x, y]).toArray().then((querytiles) => {
-                    let missingLayers = Object.keys(layers).filter((layer) => !layertiles.some((layertile) => layertile.layer === layer));
+                    let missingQueries = queries.filter((query) => !querytiles.some((querytile) => querytile.query === query));
-                    if (missingLayers.length > 0) {
+                    if (missingQueries.length > 0) {
-                        this.queryTileForLayers(x, y, missingLayers);
+                        this.queryTile(x, y, missingQueries);
                     }
                 });
             }
         }
     }
 
-    queryTileForLayers(x: number, y: number, layers: string[]) {
+    queryTile(x: number, y: number, queries: string[]) {
         this.currentQueries.add(`${x},${y}`);
 
         const bounds = mercator.bbox(x, y, this.queryZoom);
-        fetch(`${this.overpassUrl}?data=${getQueryForBoundsAndLayers(bounds, layers)}`)
+        fetch(`${this.overpassUrl}?data=${getQueryForBounds(bounds, queries)}`)
             .then((response) => response.json())
-            .then((data) => this.storeOverpassData(x, y, layers, data));
+            .then((data) => this.storeOverpassData(x, y, queries, data));
     }
 
-    storeOverpassData(x: number, y: number, layers: string[], data: any) {
+    storeOverpassData(x: number, y: number, queries: string[], data: any) {
-        let layerTiles = layers.map((layer) => ({ x, y, layer }));
+        let queryTiles = queries.map((query) => ({ x, y, query }));
-        let pois: { layer: string, id: number, poi: GeoJSON.Feature }[] = [];
+        let pois: { query: string, id: number, poi: GeoJSON.Feature }[] = [];
 
         for (let element of data.elements) {
-            for (let layer of layers) {
+            for (let query of queries) {
-                if (belongsToLayer(element, layer)) {
+                if (belongsToQuery(element, query)) {
                     pois.push({
-                        layer,
+                        query,
                         id: element.id,
                         poi: {
                             type: 'Feature',
@@ -155,7 +154,7 @@ export class OverpassLayer {
                                 type: 'Point',
                                 coordinates: [element.lon, element.lat],
                             },
-                            properties: { ...element.tags, layer }
+                            properties: { query, tags: element.tags },
                         }
                     });
 
@@ -164,30 +163,60 @@ export class OverpassLayer {
             }
         }
 
-        db.transaction('rw', db.overpasslayertiles, db.overpassdata, async () => {
+        db.transaction('rw', db.overpassquerytiles, db.overpassdata, async () => {
-            await db.overpasslayertiles.bulkPut(layerTiles);
+            await db.overpassquerytiles.bulkPut(queryTiles);
             await db.overpassdata.bulkPut(pois);
         });
 
         this.currentQueries.delete(`${x},${y}`);
     }
+
+    loadIcons() {
+        let currentQueries = getCurrentQueries();
+        currentQueries.forEach((query) => {
+            if (!this.map.hasImage(query)) {
+                let icon = new Image(100, 100);
+                icon.onload = () => this.map.addImage(query, icon);
+
+                // Lucide icons are SVG files with a 24x24 viewBox
+                // Create a new SVG with a 32x32 viewBox and center the icon in a circle
+                icon.src = 'data:image/svg+xml,' + encodeURIComponent(`
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+                    <circle cx="20" cy="20" r="20" fill="${overpassIcons[query].color}" />
+                    <g transform="translate(8 8)">
+                    ${overpassIcons[query].svg.replace('stroke="currentColor"', 'stroke="white"')}
+                    </g>
+                </svg>
+            `);
+            }
+        });
+    }
 }
 
-function getQueryForBoundsAndLayers(bounds: [number, number, number, number], layers: string[]) {
+function getQueryForBounds(bounds: [number, number, number, number], queries: string[]) {
-    return `[bbox:${bounds[1]},${bounds[0]},${bounds[3]},${bounds[2]}][out:json];(${getQueryForLayers(layers)});out;`;
+    return `[bbox:${bounds[1]},${bounds[0]},${bounds[3]},${bounds[2]}][out:json];(${getQueries(queries)});out;`;
 }
 
-function getQueryForLayers(layers: string[]) {
+function getQueries(queries: string[]) {
-    return layers.map((layer) => `node${getQueryForLayer(layer)};`).join('');
+    return queries.map((query) => `node${getQuery(query)};`).join('');
 }
 
-function getQueryForLayer(layer: string) {
+function getQuery(query: string) {
-    return Object.entries(poiQueries[layer])
+    return Object.entries(overpassQueries[query])
         .map(([tag, value]) => value ? `[${tag}=${value}]` : `[${tag}]`)
         .join('');
 }
 
-function belongsToLayer(element: any, layer: string) {
+function belongsToQuery(element: any, query: string) {
-    return Object.entries(poiQueries[layer])
+    return Object.entries(overpassQueries[query])
         .every(([tag, value]) => value ? element.tags[tag] === value : element.tags[tag]);
 }
+
+function getCurrentQueries() {
+    let currentQueries = get(currentOverpassQueries);
+    if (currentQueries === undefined) {
+        return [];
+    }
+
+    return Object.entries(getLayers(currentQueries)).filter(([_, selected]) => selected).map(([query, _]) => query);
+}

website/src/lib/db.ts

@@ -3,7 +3,7 @@ import { GPXFile, GPXStatistics, Track, TrackSegment, Waypoint, TrackPoint, type
 import { enableMapSet, enablePatches, applyPatches, type Patch, type WritableDraft, freeze, produceWithPatches } from 'immer';
 import { writable, get, derived, type Readable, type Writable } from 'svelte/store';
 import { gpxStatistics, initTargetMapBounds, splitAs, updateAllHidden, updateTargetMapBounds } from './stores';
-import { defaultBasemap, defaultBasemapTree, defaultOverlayTree, defaultOverlays, type CustomLayer, defaultOpacities } from './assets/layers';
+import { defaultBasemap, defaultBasemapTree, defaultOverlayTree, defaultOverlays, type CustomLayer, defaultOpacities, defaultOverpassQueries, defaultOverpassTree } from './assets/layers';
 import { applyToOrderedItemsFromFile, applyToOrderedSelectedItemsFromFile, selection } from '$lib/components/file-list/Selection';
 import { ListFileItem, ListItem, ListTrackItem, ListLevel, ListTrackSegmentItem, ListWaypointItem, ListRootItem } from '$lib/components/file-list/FileList';
 import { updateAnchorPoints } from '$lib/components/toolbar/tools/routing/Simplify';
@@ -18,8 +18,8 @@ class Database extends Dexie {
     files!: Dexie.Table<GPXFile, string>;
     patches!: Dexie.Table<{ patch: Patch[], inversePatch: Patch[], index: number }, number>;
     settings!: Dexie.Table<any, string>;
-    overpasslayertiles!: Dexie.Table<{ layer: string, x: number, y: number }, [string, number, number]>;
+    overpassquerytiles!: Dexie.Table<{ query: string, x: number, y: number }, [string, number, number]>;
-    overpassdata!: Dexie.Table<{ layer: string, id: number, poi: GeoJSON.Feature }, [string, number]>;
+    overpassdata!: Dexie.Table<{ query: string, id: number, poi: GeoJSON.Feature }, [string, number]>;
 
     constructor() {
         super("Database", {
@@ -30,8 +30,8 @@ class Database extends Dexie {
             files: '',
             patches: ',patch',
             settings: '',
-            overpasslayertiles: '[layer+x+y],[x+y]',
+            overpassquerytiles: '[query+x+y],[x+y]',
-            overpassdata: '[layer+id]',
+            overpassdata: '[query+id]',
         });
     }
 }
@@ -86,6 +86,8 @@ export const settings = {
     currentOverlays: dexieSettingStore('currentOverlays', defaultOverlays, false),
     previousOverlays: dexieSettingStore('previousOverlays', defaultOverlays),
     selectedOverlayTree: dexieSettingStore('selectedOverlayTree', defaultOverlayTree),
+    currentOverpassQueries: dexieSettingStore('currentOverpassQueries', defaultOverpassQueries, false),
+    selectedOverpassTree: dexieSettingStore('selectedOverpassTree', defaultOverpassTree),
     opacities: dexieSettingStore('opacities', defaultOpacities),
     customLayers: dexieSettingStore<Record<string, CustomLayer>>('customLayers', {}),
     directionMarkers: dexieSettingStore('directionMarkers', false),