From dd7b56037196b57f64f352f92c753af5530e902e Mon Sep 17 00:00:00 2001 From: vcoppe Date: Fri, 7 Jun 2024 15:54:40 +0200 Subject: [PATCH] improve distance and direction markers --- website/src/lib/assets/layers.ts | 7 ++++++- .../components/gpx-layer/DistanceMarkers.ts | 18 +++++++++--------- .../src/lib/components/gpx-layer/GPXLayer.ts | 12 +++++++----- 3 files changed, 22 insertions(+), 15 deletions(-) diff --git a/website/src/lib/assets/layers.ts b/website/src/lib/assets/layers.ts index 7ff33d60..3ce6587f 100644 --- a/website/src/lib/assets/layers.ts +++ b/website/src/lib/assets/layers.ts @@ -73,9 +73,9 @@ export const basemaps: { [key: string]: string | Style; } = { source: 'cyclOSM', }], }, - linz: 'https://basemaps.linz.govt.nz/v1/tiles/topographic/EPSG:3857/style/topographic.json?api=d01fbtg0ar23gctac5m0jgyy2ds', swisstopo: 'https://vectortiles.geo.admin.ch/styles/ch.swisstopo.basemap.vt/style.json', swisstopoSatellite: 'https://vectortiles.geo.admin.ch/styles/ch.swisstopo.imagerybasemap.vt/style.json', + linz: 'https://basemaps.linz.govt.nz/v1/tiles/topographic/EPSG:3857/style/topographic.json?api=d01fbtg0ar23gctac5m0jgyy2ds', linzTopo: { version: 8, sources: { @@ -256,6 +256,11 @@ Object.values(basemaps).forEach((basemap) => { } }); +export const font: { [key: string]: string; } = { + swisstopo: 'Frutiger Neue Condensed Regular', + swisstopoSatellite: 'Frutiger Neue Condensed Regular', +}; + export const overlays: { [key: string]: AnySourceData; } = { cyclOSMlite: { type: 'raster', diff --git a/website/src/lib/components/gpx-layer/DistanceMarkers.ts b/website/src/lib/components/gpx-layer/DistanceMarkers.ts index 2a350ea1..a517121e 100644 --- a/website/src/lib/components/gpx-layer/DistanceMarkers.ts +++ b/website/src/lib/components/gpx-layer/DistanceMarkers.ts @@ -1,9 +1,10 @@ +import { font } from "$lib/assets/layers"; import { settings } from "$lib/db"; import { gpxStatistics } from "$lib/stores"; import { get } from "svelte/store"; -const { distanceMarkers, distanceUnits } = settings; +const { distanceMarkers, distanceUnits, currentBasemap } = settings; export class DistanceMarkers { map: mapboxgl.Map; @@ -15,6 +16,7 @@ export class DistanceMarkers { gpxStatistics.subscribe(this.updateBinded); distanceMarkers.subscribe(this.updateBinded); distanceUnits.subscribe(this.updateBinded); + this.map.on('style.load', this.updateBinded); } update() { @@ -36,15 +38,14 @@ export class DistanceMarkers { source: 'distance-markers', layout: { 'text-field': ['get', 'distance'], - 'text-size': 12, - 'text-font': ['Open Sans Regular'], - 'icon-image': ['get', 'icon'], - 'icon-padding': 50, - 'icon-allow-overlap': true, + 'text-size': 14, + 'text-font': [font[get(currentBasemap)] ?? 'Open Sans Bold'], + 'text-padding': 20, }, paint: { - 'text-halo-width': 0.1, - 'text-halo-color': 'black' + 'text-color': 'black', + 'text-halo-width': 2, + 'text-halo-color': 'white', } }); } else { @@ -76,7 +77,6 @@ export class DistanceMarkers { }, properties: { distance, - icon: distance.length < 3 ? 'circle-white-2' : 'circle-white-3' } } as GeoJSON.Feature); currentTargetDistance += 1; diff --git a/website/src/lib/components/gpx-layer/GPXLayer.ts b/website/src/lib/components/gpx-layer/GPXLayer.ts index 0cad0cc0..004ba898 100644 --- a/website/src/lib/components/gpx-layer/GPXLayer.ts +++ b/website/src/lib/components/gpx-layer/GPXLayer.ts @@ -1,13 +1,14 @@ -import { map, currentTool, Tool } from "$lib/stores"; +import { currentTool, Tool } from "$lib/stores"; import { settings, type GPXFileWithStatistics, dbUtils } from "$lib/db"; import { get, type Readable } from "svelte/store"; import mapboxgl from "mapbox-gl"; import { currentWaypoint, waypointPopup } from "./WaypointPopup"; import { addSelectItem, selectItem, selection } from "$lib/components/file-list/Selection"; -import { ListTrackSegmentItem, type ListItem, ListWaypointItem, ListWaypointsItem, ListTrackItem, ListFileItem, ListRootItem } from "$lib/components/file-list/FileList"; +import { ListTrackSegmentItem, ListWaypointItem, ListWaypointsItem, ListTrackItem, ListFileItem, ListRootItem } from "$lib/components/file-list/FileList"; import type { Waypoint } from "gpx"; import { produce } from "immer"; import { resetCursor, setGrabbingCursor, setPointerCursor } from "$lib/utils"; +import { font } from "$lib/assets/layers"; let defaultWeight = 5; let defaultOpacity = 0.6; @@ -42,7 +43,7 @@ function decrementColor(color: string) { colorCount[color]--; } -const { directionMarkers, verticalFileView } = settings; +const { directionMarkers, verticalFileView, currentBasemap } = settings; export class GPXLayer { map: mapboxgl.Map; @@ -137,6 +138,7 @@ export class GPXLayer { 'text-keep-upright': false, 'text-max-angle': 361, 'text-allow-overlap': true, + 'text-font': [font[get(currentBasemap)] ?? 'Open Sans Bold'], 'symbol-placement': 'line', 'symbol-spacing': 25, }, @@ -145,7 +147,7 @@ export class GPXLayer { 'text-halo-width': 0.5, 'text-halo-color': 'white' } - }); + }, this.map.getLayer('distance-markers') ? 'distance-markers' : undefined); } } else { if (this.map.getLayer(this.fileId + '-direction')) { @@ -258,7 +260,7 @@ export class GPXLayer { this.map.moveLayer(this.fileId); } if (this.map.getLayer(this.fileId + '-direction')) { - this.map.moveLayer(this.fileId + '-direction'); + this.map.moveLayer(this.fileId + '-direction', this.map.getLayer('distance-markers') ? 'distance-markers' : undefined); } }