steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-02 16:52:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve distance and direction markers

Browse Source
This commit is contained in:
vcoppe
2024-06-07 15:54:40 +02:00
parent 13c7574e25
commit dd7b560371
3 changed files with 22 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
website/src/lib/assets/layers.ts
View File

@@ -73,9 +73,9 @@ export const basemaps: { [key: string]: string | Style; } = {
source: 'cyclOSM', 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', 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', 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: { linzTopo: {
version: 8, version: 8,
sources: { 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; } = { export const overlays: { [key: string]: AnySourceData; } = {
cyclOSMlite: { cyclOSMlite: {
type: 'raster', type: 'raster',

18
website/src/lib/components/gpx-layer/DistanceMarkers.ts
View File

@@ -1,9 +1,10 @@
import { font } from "$lib/assets/layers";
import { settings } from "$lib/db"; import { settings } from "$lib/db";
import { gpxStatistics } from "$lib/stores"; import { gpxStatistics } from "$lib/stores";
import { get } from "svelte/store"; import { get } from "svelte/store";
const { distanceMarkers, distanceUnits } = settings; const { distanceMarkers, distanceUnits, currentBasemap } = settings;
export class DistanceMarkers { export class DistanceMarkers {
map: mapboxgl.Map; map: mapboxgl.Map;
@@ -15,6 +16,7 @@ export class DistanceMarkers {
gpxStatistics.subscribe(this.updateBinded); gpxStatistics.subscribe(this.updateBinded);
distanceMarkers.subscribe(this.updateBinded); distanceMarkers.subscribe(this.updateBinded);
distanceUnits.subscribe(this.updateBinded); distanceUnits.subscribe(this.updateBinded);
this.map.on('style.load', this.updateBinded);
} }
update() { update() {
@@ -36,15 +38,14 @@ export class DistanceMarkers {
source: 'distance-markers', source: 'distance-markers',
layout: { layout: {
'text-field': ['get', 'distance'], 'text-field': ['get', 'distance'],
'text-size': 12, 'text-size': 14,
'text-font': ['Open Sans Regular'], 'text-font': [font[get(currentBasemap)] ?? 'Open Sans Bold'],
'icon-image': ['get', 'icon'], 'text-padding': 20,
'icon-padding': 50,
'icon-allow-overlap': true,
}, },
paint: { paint: {
'text-halo-width': 0.1, 'text-color': 'black',
'text-halo-color': 'black' 'text-halo-width': 2,
'text-halo-color': 'white',
} }
}); });
} else { } else {
@@ -76,7 +77,6 @@ export class DistanceMarkers {
}, },
properties: { properties: {
distance, distance,
icon: distance.length < 3 ? 'circle-white-2' : 'circle-white-3'
} }
} as GeoJSON.Feature); } as GeoJSON.Feature);
currentTargetDistance += 1; currentTargetDistance += 1;

12
website/src/lib/components/gpx-layer/GPXLayer.ts
View File

@@ -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 { settings, type GPXFileWithStatistics, dbUtils } from "$lib/db";
import { get, type Readable } from "svelte/store"; import { get, type Readable } from "svelte/store";
import mapboxgl from "mapbox-gl"; import mapboxgl from "mapbox-gl";
import { currentWaypoint, waypointPopup } from "./WaypointPopup"; import { currentWaypoint, waypointPopup } from "./WaypointPopup";
import { addSelectItem, selectItem, selection } from "$lib/components/file-list/Selection"; 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 type { Waypoint } from "gpx";
import { produce } from "immer"; import { produce } from "immer";
import { resetCursor, setGrabbingCursor, setPointerCursor } from "$lib/utils"; import { resetCursor, setGrabbingCursor, setPointerCursor } from "$lib/utils";
import { font } from "$lib/assets/layers";
let defaultWeight = 5; let defaultWeight = 5;
let defaultOpacity = 0.6; let defaultOpacity = 0.6;
@@ -42,7 +43,7 @@ function decrementColor(color: string) {
colorCount[color]--; colorCount[color]--;
} }
const { directionMarkers, verticalFileView } = settings; const { directionMarkers, verticalFileView, currentBasemap } = settings;
export class GPXLayer { export class GPXLayer {
map: mapboxgl.Map; map: mapboxgl.Map;
@@ -137,6 +138,7 @@ export class GPXLayer {
'text-keep-upright': false, 'text-keep-upright': false,
'text-max-angle': 361, 'text-max-angle': 361,
'text-allow-overlap': true, 'text-allow-overlap': true,
'text-font': [font[get(currentBasemap)] ?? 'Open Sans Bold'],
'symbol-placement': 'line', 'symbol-placement': 'line',
'symbol-spacing': 25, 'symbol-spacing': 25,
}, },
@@ -145,7 +147,7 @@ export class GPXLayer {
'text-halo-width': 0.5, 'text-halo-width': 0.5,
'text-halo-color': 'white' 'text-halo-color': 'white'
} }
}); }, this.map.getLayer('distance-markers') ? 'distance-markers' : undefined);
} }
} else { } else {
if (this.map.getLayer(this.fileId + '-direction')) { if (this.map.getLayer(this.fileId + '-direction')) {
@@ -258,7 +260,7 @@ export class GPXLayer {
this.map.moveLayer(this.fileId); this.map.moveLayer(this.fileId);
} }
if (this.map.getLayer(this.fileId + '-direction')) { 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);
} }
} }