overpass layer progress

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

@@ -12,8 +12,10 @@
 	import { map } from '$lib/stores';
 	import { get, writable } from 'svelte/store';
 	import { getLayers } from './utils';
+	import { OverpassLayer } from './OverpassLayer';
 
 	let container: HTMLDivElement;
+	let overpassLayer: OverpassLayer;
 
 	const {
 		currentBasemap,
@@ -54,6 +56,14 @@
 		});
 	}
 
+	$: if ($map) {
+		if (overpassLayer) {
+			overpassLayer.remove();
+		}
+		overpassLayer = new OverpassLayer($map);
+		overpassLayer.add();
+	}
+
 	let selectedBasemap = writable(get(currentBasemap));
 	selectedBasemap.subscribe((value) => {
 		// Updates coming from radio buttons

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

@@ -0,0 +1,193 @@
+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";
+
+const poiSelection: LayerTreeType = {
+    transport: {
+        tram: true,
+    },
+};
+
+type PoiQuery = Record<string, string | undefined>;
+
+const poiQueries: Record<string, PoiQuery> = {
+    tram: {
+        railway: 'tram_stop',
+    },
+};
+
+const mercator = new SphericalMercator({
+    size: 256,
+});
+
+let data = writable<GeoJSON.FeatureCollection>({ type: 'FeatureCollection', features: [] });
+
+liveQuery(() => db.overpassdata.toArray()).subscribe((pois) => {
+    data.set({ type: 'FeatureCollection', features: pois.map((poi) => poi.poi) });
+});
+
+export class OverpassLayer {
+    overpassUrl = 'https://overpass-api.de/api/interpreter';
+    minZoom = 12;
+    queryZoom = 14;
+    map: mapboxgl.Map;
+
+    currentQueries: Set<string> = new Set();
+
+    unsubscribes: (() => void)[] = [];
+    queryIfNeededBinded = this.queryIfNeeded.bind(this);
+    updateBinded = this.update.bind(this);
+
+    constructor(map: mapboxgl.Map) {
+        this.map = map;
+    }
+
+    add() {
+        this.map.on('moveend', this.queryIfNeededBinded);
+        this.map.on('style.load', this.updateBinded);
+        this.unsubscribes.push(data.subscribe(this.updateBinded));
+
+        this.map.showTileBoundaries = true;
+
+        this.update();
+    }
+
+    queryIfNeeded() {
+        if (this.map.getZoom() >= this.minZoom) {
+            const bounds = this.map.getBounds().toArray();
+            this.query([bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]]);
+        }
+    }
+
+    update() {
+        let d = get(data);
+
+        try {
+            let source = this.map.getSource('overpass');
+            if (source) {
+                source.setData(d);
+            } else {
+                this.map.addSource('overpass', {
+                    type: 'geojson',
+                    data: d,
+                });
+            }
+
+            if (!this.map.getLayer('overpass')) {
+                this.map.addLayer({
+                    id: 'overpass',
+                    type: 'symbol',
+                    source: 'overpass',
+                    layout: {
+                        'text-field': ['get', 'name'],
+                        'text-allow-overlap': true,
+                    },
+                    paint: {
+                        'text-color': 'black',
+                    }
+                });
+            }
+        } catch (e) {
+            // No reliable way to check if the map is ready to add sources and layers
+        }
+    }
+
+    remove() {
+        this.map.off('moveend', this.queryIfNeededBinded);
+        this.map.off('style.load', this.updateBinded);
+        this.unsubscribes.forEach((unsubscribe) => unsubscribe());
+
+        if (this.map.getLayer('overpass')) {
+            this.map.removeLayer('overpass');
+        }
+
+        if (this.map.getSource('overpass')) {
+            this.map.removeSource('overpass');
+        }
+    }
+
+    query(bbox: [number, number, number, number]) {
+        let layers = getLayers(poiSelection);
+        let tileLimits = mercator.xyz(bbox, this.queryZoom);
+
+        for (let x = tileLimits.minX; x <= tileLimits.maxX; x++) {
+            for (let y = tileLimits.minY; y <= tileLimits.maxY; y++) {
+                if (this.currentQueries.has(`${x},${y}`)) {
+                    continue;
+                }
+
+                db.overpasslayertiles.where('[x+y]').equals([x, y]).toArray().then((layertiles) => {
+                    let missingLayers = Object.keys(layers).filter((layer) => !layertiles.some((layertile) => layertile.layer === layer));
+                    if (missingLayers.length > 0) {
+                        this.queryTileForLayers(x, y, missingLayers);
+                    }
+                });
+            }
+        }
+    }
+
+    queryTileForLayers(x: number, y: number, layers: string[]) {
+        this.currentQueries.add(`${x},${y}`);
+
+        const bounds = mercator.bbox(x, y, this.queryZoom);
+        fetch(`${this.overpassUrl}?data=${getQueryForBoundsAndLayers(bounds, layers)}`)
+            .then((response) => response.json())
+            .then((data) => this.storeOverpassData(x, y, layers, data));
+    }
+
+    storeOverpassData(x: number, y: number, layers: string[], data: any) {
+        let layerTiles = layers.map((layer) => ({ x, y, layer }));
+        let pois: { layer: string, id: number, poi: GeoJSON.Feature }[] = [];
+
+        for (let element of data.elements) {
+            for (let layer of layers) {
+                if (belongsToLayer(element, layer)) {
+                    pois.push({
+                        layer,
+                        id: element.id,
+                        poi: {
+                            type: 'Feature',
+                            geometry: {
+                                type: 'Point',
+                                coordinates: [element.lon, element.lat],
+                            },
+                            properties: { ...element.tags, layer }
+                        }
+                    });
+
+                    break;
+                }
+            }
+        }
+
+        db.transaction('rw', db.overpasslayertiles, db.overpassdata, async () => {
+            await db.overpasslayertiles.bulkPut(layerTiles);
+            await db.overpassdata.bulkPut(pois);
+        });
+
+        this.currentQueries.delete(`${x},${y}`);
+    }
+}
+
+function getQueryForBoundsAndLayers(bounds: [number, number, number, number], layers: string[]) {
+    return `[bbox:${bounds[1]},${bounds[0]},${bounds[3]},${bounds[2]}][out:json];(${getQueryForLayers(layers)});out;`;
+}
+
+function getQueryForLayers(layers: string[]) {
+    return layers.map((layer) => `node${getQueryForLayer(layer)};`).join('');
+}
+
+function getQueryForLayer(layer: string) {
+    return Object.entries(poiQueries[layer])
+        .map(([tag, value]) => value ? `[${tag}=${value}]` : `[${tag}]`)
+        .join('');
+}
+
+function belongsToLayer(element: any, layer: string) {
+    return Object.entries(poiQueries[layer])
+        .every(([tag, value]) => value ? element.tags[tag] === value : element.tags[tag]);
+}