mirror of
https://github.com/gpxstudio/gpx.studio.git
synced 2025-08-31 23:53:25 +00:00
304 lines
10 KiB
TypeScript
304 lines
10 KiB
TypeScript
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, settings } from "$lib/db";
|
|
import { overpassQueryData } from "$lib/assets/layers";
|
|
|
|
const {
|
|
currentOverpassQueries
|
|
} = settings;
|
|
|
|
const mercator = new SphericalMercator({
|
|
size: 256,
|
|
});
|
|
|
|
export const overpassPopupPOI = writable<Record<string, any> | null>(null);
|
|
|
|
export const overpassPopup = new mapboxgl.Popup({
|
|
closeButton: false,
|
|
maxWidth: undefined,
|
|
offset: 15,
|
|
});
|
|
|
|
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.private.coffee/api/interpreter';
|
|
minZoom = 12;
|
|
queryZoom = 12;
|
|
map: mapboxgl.Map;
|
|
|
|
currentQueries: Set<string> = new Set();
|
|
nextQueries: Map<string, { x: number, y: number, queries: string[] }> = new Map();
|
|
|
|
unsubscribes: (() => void)[] = [];
|
|
queryIfNeededBinded = this.queryIfNeeded.bind(this);
|
|
updateBinded = this.update.bind(this);
|
|
onHoverBinded = this.onHover.bind(this);
|
|
maybeHidePopupBinded = this.maybeHidePopup.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.unsubscribes.push(currentOverpassQueries.subscribe(() => {
|
|
this.updateBinded();
|
|
this.queryIfNeededBinded();
|
|
}));
|
|
|
|
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() {
|
|
this.loadIcons();
|
|
|
|
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: {
|
|
'icon-image': ['get', 'icon'],
|
|
'icon-size': 0.25,
|
|
'icon-padding': 0,
|
|
'icon-allow-overlap': ['step', ['zoom'], false, 14, true],
|
|
},
|
|
});
|
|
|
|
this.map.on('mouseenter', 'overpass', this.onHoverBinded);
|
|
this.map.on('click', 'overpass', this.onHoverBinded);
|
|
}
|
|
|
|
this.map.setFilter('overpass', ['in', 'query', ...getCurrentQueries()]);
|
|
} 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');
|
|
}
|
|
}
|
|
|
|
onHover(e: any) {
|
|
overpassPopupPOI.set(e.features[0].properties);
|
|
overpassPopup.setLngLat(e.features[0].geometry.coordinates);
|
|
overpassPopup.addTo(this.map);
|
|
this.map.on('mousemove', this.maybeHidePopupBinded);
|
|
}
|
|
|
|
maybeHidePopup(e: any) {
|
|
let poi = get(overpassPopupPOI);
|
|
if (poi && this.map.project([poi.lon, poi.lat]).dist(this.map.project(e.lngLat)) > 100) {
|
|
this.hideWaypointPopup();
|
|
}
|
|
}
|
|
|
|
hideWaypointPopup() {
|
|
overpassPopupPOI.set(null);
|
|
overpassPopup.remove();
|
|
|
|
this.map.off('mousemove', this.maybeHidePopupBinded);
|
|
}
|
|
|
|
query(bbox: [number, number, number, number]) {
|
|
let queries = getCurrentQueries();
|
|
if (queries.length === 0) {
|
|
return;
|
|
}
|
|
|
|
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.overpassquerytiles.where('[x+y]').equals([x, y]).toArray().then((querytiles) => {
|
|
let missingQueries = queries.filter((query) => !querytiles.some((querytile) => querytile.query === query));
|
|
if (missingQueries.length > 0) {
|
|
this.queryTile(x, y, missingQueries);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
queryTile(x: number, y: number, queries: string[]) {
|
|
if (this.currentQueries.size > 5) {
|
|
return;
|
|
}
|
|
|
|
this.currentQueries.add(`${x},${y}`);
|
|
|
|
const bounds = mercator.bbox(x, y, this.queryZoom);
|
|
fetch(`${this.overpassUrl}?data=${getQueryForBounds(bounds, queries)}`)
|
|
.then((response) => {
|
|
if (response.ok) {
|
|
return response.json();
|
|
}
|
|
this.currentQueries.delete(`${x},${y}`);
|
|
return Promise.reject();
|
|
}, () => (this.currentQueries.delete(`${x},${y}`)))
|
|
.then((data) => this.storeOverpassData(x, y, queries, data))
|
|
.catch(() => this.currentQueries.delete(`${x},${y}`));
|
|
}
|
|
|
|
storeOverpassData(x: number, y: number, queries: string[], data: any) {
|
|
let queryTiles = queries.map((query) => ({ x, y, query }));
|
|
let pois: { query: string, id: number, poi: GeoJSON.Feature }[] = [];
|
|
|
|
if (data.elements === undefined) {
|
|
return;
|
|
}
|
|
|
|
for (let element of data.elements) {
|
|
for (let query of queries) {
|
|
if (belongsToQuery(element, query)) {
|
|
pois.push({
|
|
query,
|
|
id: element.id,
|
|
poi: {
|
|
type: 'Feature',
|
|
geometry: {
|
|
type: 'Point',
|
|
coordinates: element.center ? [element.center.lon, element.center.lat] : [element.lon, element.lat],
|
|
},
|
|
properties: {
|
|
id: element.id,
|
|
lat: element.center ? element.center.lat : element.lat,
|
|
lon: element.center ? element.center.lon : element.lon,
|
|
query: query,
|
|
icon: `overpass-${query}`,
|
|
tags: element.tags
|
|
},
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
db.transaction('rw', db.overpassquerytiles, db.overpassdata, async () => {
|
|
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(`overpass-${query}`)) {
|
|
let icon = new Image(100, 100);
|
|
icon.onload = () => {
|
|
if (!this.map.hasImage(`overpass-${query}`)) {
|
|
this.map.addImage(`overpass-${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="${overpassQueryData[query].icon.color}" />
|
|
<g transform="translate(8 8)">
|
|
${overpassQueryData[query].icon.svg.replace('stroke="currentColor"', 'stroke="white"')}
|
|
</g>
|
|
</svg>
|
|
`);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function getQueryForBounds(bounds: [number, number, number, number], queries: string[]) {
|
|
return `[bbox:${bounds[1]},${bounds[0]},${bounds[3]},${bounds[2]}][out:json];(${getQueries(queries)});out center;`;
|
|
}
|
|
|
|
function getQueries(queries: string[]) {
|
|
return queries.map((query) => getQuery(query)).join('');
|
|
}
|
|
|
|
function getQuery(query: string) {
|
|
if (Array.isArray(overpassQueryData[query].tags)) {
|
|
return overpassQueryData[query].tags.map((tags) => getQueryItem(tags)).join('');
|
|
} else {
|
|
return getQueryItem(overpassQueryData[query].tags);
|
|
}
|
|
}
|
|
|
|
function getQueryItem(tags: Record<string, string | boolean | string[]>) {
|
|
let arrayEntry = Object.entries(tags).find(([_, value]) => Array.isArray(value));
|
|
if (arrayEntry !== undefined) {
|
|
return arrayEntry[1].map((val) => `nwr${Object.entries(tags)
|
|
.map(([tag, value]) => `[${tag}=${tag === arrayEntry[0] ? val : value}]`)
|
|
.join('')};`).join('');
|
|
} else {
|
|
return `nwr${Object.entries(tags)
|
|
.map(([tag, value]) => `[${tag}=${value}]`)
|
|
.join('')};`;
|
|
}
|
|
}
|
|
|
|
function belongsToQuery(element: any, query: string) {
|
|
if (Array.isArray(overpassQueryData[query].tags)) {
|
|
return overpassQueryData[query].tags.some((tags) => belongsToQueryItem(element, tags));
|
|
} else {
|
|
return belongsToQueryItem(element, overpassQueryData[query].tags);
|
|
}
|
|
}
|
|
|
|
function belongsToQueryItem(element: any, tags: Record<string, string | boolean | string[]>) {
|
|
return Object.entries(tags)
|
|
.every(([tag, value]) => Array.isArray(value) ? value.includes(element.tags[tag]) : element.tags[tag] === value);
|
|
}
|
|
|
|
function getCurrentQueries() {
|
|
let currentQueries = get(currentOverpassQueries);
|
|
if (currentQueries === undefined) {
|
|
return [];
|
|
}
|
|
|
|
return Object.entries(getLayers(currentQueries)).filter(([_, selected]) => selected).map(([query, _]) => query);
|
|
} |