mirror of
https://github.com/gpxstudio/gpx.studio.git
synced 2025-08-31 15:43:25 +00:00
working overpass layer, and selection
This commit is contained in:
vcoppe
6
website/package-lock.json
generated
6
website/package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,115 +115,126 @@
|
||||
<Sheet.Content>
|
||||
<Sheet.Header class="h-full">
|
||||
<Sheet.Title>{$_('layers.settings')}</Sheet.Title>
|
||||
<Sheet.Description>
|
||||
{$_('layers.settings_help')}
|
||||
</Sheet.Description>
|
||||
<Accordion.Root class="flex flex-col overflow-hidden" value="layer-selection">
|
||||
<Accordion.Item value="layer-selection" class="flex flex-col overflow-hidden">
|
||||
<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">
|
||||
<LayerTree
|
||||
layerTree={basemapTree}
|
||||
name="basemapSettings"
|
||||
multiple={true}
|
||||
bind:checked={$selectedBasemapTree}
|
||||
/>
|
||||
</ScrollArea>
|
||||
<Separator />
|
||||
<ScrollArea class="py-2 pl-1 pr-2 min-h-9">
|
||||
<LayerTree
|
||||
layerTree={overlayTree}
|
||||
name="overlaySettings"
|
||||
multiple={true}
|
||||
bind:checked={$selectedOverlayTree}
|
||||
/>
|
||||
</ScrollArea>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item value="overlay-opacity">
|
||||
<Accordion.Trigger>{$_('layers.opacity')}</Accordion.Trigger>
|
||||
<Accordion.Content class="flex flex-col gap-3 overflow-visible">
|
||||
<div class="flex flex-row gap-6 items-center">
|
||||
<Label>
|
||||
{$_('layers.custom_layers.overlay')}
|
||||
</Label>
|
||||
<Select.Root bind:selected={$selectedOverlay}>
|
||||
<Select.Trigger class="h-8 mr-1">
|
||||
<Select.Value />
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{#each Object.keys(overlays) as id}
|
||||
{#if isSelected($selectedOverlayTree, id)}
|
||||
<Select.Item value={id}>{$_(`layers.label.${id}`)}</Select.Item>
|
||||
{/if}
|
||||
{/each}
|
||||
{#each Object.entries($customLayers) as [id, layer]}
|
||||
{#if layer.layerType === 'overlay'}
|
||||
<Select.Item value={id}>{layer.name}</Select.Item>
|
||||
{/if}
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</div>
|
||||
<Label class="flex flex-row gap-6 items-center">
|
||||
{$_('menu.style.opacity')}
|
||||
<div class="p-2 pr-3 grow">
|
||||
<Slider
|
||||
bind:value={$overlayOpacity}
|
||||
min={0.1}
|
||||
max={1}
|
||||
step={0.1}
|
||||
disabled={$selectedOverlay === undefined}
|
||||
onValueChange={() => {
|
||||
if ($selectedOverlay) {
|
||||
$opacities[$selectedOverlay.value] = $overlayOpacity[0];
|
||||
if ($map) {
|
||||
if ($map.getLayer($selectedOverlay.value)) {
|
||||
$map.removeLayer($selectedOverlay.value);
|
||||
$currentOverlays = $currentOverlays;
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
<ScrollArea class="w-[105%] pr-4">
|
||||
<Sheet.Description>
|
||||
{$_('layers.settings_help')}
|
||||
</Sheet.Description>
|
||||
<Accordion.Root class="flex flex-col" bind:value={accordionValue}>
|
||||
<Accordion.Item value="layer-selection" class="flex flex-col">
|
||||
<Accordion.Trigger>{$_('layers.selection')}</Accordion.Trigger>
|
||||
<Accordion.Content class="grow flex flex-col border rounded">
|
||||
<div class="py-2 pl-1 pr-2">
|
||||
<LayerTree
|
||||
layerTree={basemapTree}
|
||||
name="basemapSettings"
|
||||
multiple={true}
|
||||
bind:checked={$selectedBasemapTree}
|
||||
/>
|
||||
</div>
|
||||
</Label>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item value="custom-layers">
|
||||
<Accordion.Trigger>{$_('layers.custom_layers.title')}</Accordion.Trigger>
|
||||
<Accordion.Content>
|
||||
<ScrollArea>
|
||||
<CustomLayers />
|
||||
</ScrollArea>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item value="pois" class="hidden">
|
||||
<Accordion.Trigger>{$_('layers.pois')}</Accordion.Trigger>
|
||||
<Accordion.Content></Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item value="heatmap-color" class="hidden">
|
||||
<Accordion.Trigger>{$_('layers.heatmap')}</Accordion.Trigger>
|
||||
<Accordion.Content class="overflow-visible">
|
||||
<div class="flex flex-row items-center justify-between gap-6">
|
||||
<Label>
|
||||
{$_('menu.style.color')}
|
||||
<Separator />
|
||||
<div class="py-2 pl-1 pr-2">
|
||||
<LayerTree
|
||||
layerTree={overlayTree}
|
||||
name="overlaySettings"
|
||||
multiple={true}
|
||||
bind:checked={$selectedOverlayTree}
|
||||
/>
|
||||
</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">
|
||||
<Accordion.Trigger>{$_('layers.opacity')}</Accordion.Trigger>
|
||||
<Accordion.Content class="flex flex-col gap-3 overflow-visible">
|
||||
<div class="flex flex-row gap-6 items-center">
|
||||
<Label>
|
||||
{$_('layers.custom_layers.overlay')}
|
||||
</Label>
|
||||
<Select.Root bind:selected={$selectedOverlay}>
|
||||
<Select.Trigger class="h-8 mr-1">
|
||||
<Select.Value />
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{#each Object.keys(overlays) as id}
|
||||
{#if isSelected($selectedOverlayTree, id)}
|
||||
<Select.Item value={id}>{$_(`layers.label.${id}`)}</Select.Item>
|
||||
{/if}
|
||||
{/each}
|
||||
{#each Object.entries($customLayers) as [id, layer]}
|
||||
{#if layer.layerType === 'overlay'}
|
||||
<Select.Item value={id}>{layer.name}</Select.Item>
|
||||
{/if}
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</div>
|
||||
<Label class="flex flex-row gap-6 items-center">
|
||||
{$_('menu.style.opacity')}
|
||||
<div class="p-2 pr-3 grow">
|
||||
<Slider
|
||||
bind:value={$overlayOpacity}
|
||||
min={0.1}
|
||||
max={1}
|
||||
step={0.1}
|
||||
disabled={$selectedOverlay === undefined}
|
||||
onValueChange={() => {
|
||||
if ($selectedOverlay) {
|
||||
$opacities[$selectedOverlay.value] = $overlayOpacity[0];
|
||||
if ($map) {
|
||||
if ($map.getLayer($selectedOverlay.value)) {
|
||||
$map.removeLayer($selectedOverlay.value);
|
||||
$currentOverlays = $currentOverlays;
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Label>
|
||||
<Select.Root bind:selected={$selectedHeatmapColor}>
|
||||
<Select.Trigger class="h-8 mr-1">
|
||||
<Select.Value />
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{#each heatmapColors as { value, label }}
|
||||
<Select.Item {value}>{label}</Select.Item>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</div>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion.Root>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item value="custom-layers">
|
||||
<Accordion.Trigger>{$_('layers.custom_layers.title')}</Accordion.Trigger>
|
||||
<Accordion.Content>
|
||||
<ScrollArea>
|
||||
<CustomLayers />
|
||||
</ScrollArea>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item value="pois" class="hidden">
|
||||
<Accordion.Trigger>{$_('layers.pois')}</Accordion.Trigger>
|
||||
<Accordion.Content></Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item value="heatmap-color" class="hidden">
|
||||
<Accordion.Trigger>{$_('layers.heatmap')}</Accordion.Trigger>
|
||||
<Accordion.Content class="overflow-visible">
|
||||
<div class="flex flex-row items-center justify-between gap-6">
|
||||
<Label>
|
||||
{$_('menu.style.color')}
|
||||
</Label>
|
||||
<Select.Root bind:selected={$selectedHeatmapColor}>
|
||||
<Select.Trigger class="h-8 mr-1">
|
||||
<Select.Value />
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{#each heatmapColors as { value, label }}
|
||||
<Select.Item {value}>{label}</Select.Item>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</div>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion.Root>
|
||||
</ScrollArea>
|
||||
</Sheet.Header>
|
||||
</Sheet.Content>
|
||||
</Sheet.Root>
|
||||
|
||||
@@ -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 = {
|
||||
transport: {
|
||||
tram: true,
|
||||
},
|
||||
};
|
||||
|
||||
type PoiQuery = Record<string, string | undefined>;
|
||||
|
||||
const poiQueries: Record<string, PoiQuery> = {
|
||||
tram: {
|
||||
railway: 'tram_stop',
|
||||
},
|
||||
};
|
||||
const {
|
||||
currentOverpassQueries
|
||||
} = settings;
|
||||
|
||||
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'],
|
||||
'text-allow-overlap': true,
|
||||
'icon-image': ['get', 'query'],
|
||||
'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) => {
|
||||
let missingLayers = Object.keys(layers).filter((layer) => !layertiles.some((layertile) => layertile.layer === layer));
|
||||
if (missingLayers.length > 0) {
|
||||
this.queryTileForLayers(x, y, missingLayers);
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
let layerTiles = layers.map((layer) => ({ x, y, layer }));
|
||||
let pois: { layer: string, id: number, poi: GeoJSON.Feature }[] = [];
|
||||
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 }[] = [];
|
||||
|
||||
for (let element of data.elements) {
|
||||
for (let layer of layers) {
|
||||
if (belongsToLayer(element, layer)) {
|
||||
for (let query of queries) {
|
||||
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 () => {
|
||||
await db.overpasslayertiles.bulkPut(layerTiles);
|
||||
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(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[]) {
|
||||
return `[bbox:${bounds[1]},${bounds[0]},${bounds[3]},${bounds[2]}][out:json];(${getQueryForLayers(layers)});out;`;
|
||||
function getQueryForBounds(bounds: [number, number, number, number], queries: string[]) {
|
||||
return `[bbox:${bounds[1]},${bounds[0]},${bounds[3]},${bounds[2]}][out:json];(${getQueries(queries)});out;`;
|
||||
}
|
||||
|
||||
function getQueryForLayers(layers: string[]) {
|
||||
return layers.map((layer) => `node${getQueryForLayer(layer)};`).join('');
|
||||
function getQueries(queries: string[]) {
|
||||
return queries.map((query) => `node${getQuery(query)};`).join('');
|
||||
}
|
||||
|
||||
function getQueryForLayer(layer: string) {
|
||||
return Object.entries(poiQueries[layer])
|
||||
function getQuery(query: string) {
|
||||
return Object.entries(overpassQueries[query])
|
||||
.map(([tag, value]) => value ? `[${tag}=${value}]` : `[${tag}]`)
|
||||
.join('');
|
||||
}
|
||||
|
||||
function belongsToLayer(element: any, layer: string) {
|
||||
return Object.entries(poiQueries[layer])
|
||||
function belongsToQuery(element: any, query: string) {
|
||||
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);
|
||||
}
|
||||
@@ -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]>;
|
||||
overpassdata!: Dexie.Table<{ layer: string, id: number, poi: GeoJSON.Feature }, [string, number]>;
|
||||
overpassquerytiles!: Dexie.Table<{ query: string, x: number, y: number }, [string, number, 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]',
|
||||
overpassdata: '[layer+id]',
|
||||
overpassquerytiles: '[query+x+y],[x+y]',
|
||||
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),
|
||||
|
||||
Reference in New Issue
Block a user