mirror of
https://github.com/gpxstudio/gpx.studio.git
synced 2026-05-27 02:25:10 +00:00
switch contour lines based on units
This commit is contained in:
vcoppe
@@ -16,6 +16,12 @@
|
|||||||
"tiles": ["http://localhost:8080/contours_m/{z}/{x}/{y}.mvt"],
|
"tiles": ["http://localhost:8080/contours_m/{z}/{x}/{y}.mvt"],
|
||||||
"minzoom": 4,
|
"minzoom": 4,
|
||||||
"maxzoom": 12
|
"maxzoom": 12
|
||||||
|
},
|
||||||
|
"contours_ft": {
|
||||||
|
"type": "vector",
|
||||||
|
"tiles": ["http://localhost:8080/contours_ft/{z}/{x}/{y}.mvt"],
|
||||||
|
"minzoom": 4,
|
||||||
|
"maxzoom": 12
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"sprite": "https://tiles.openfreemap.org/sprites/ofm_f384/ofm",
|
"sprite": "https://tiles.openfreemap.org/sprites/ofm_f384/ofm",
|
||||||
@@ -117,48 +123,82 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "hillshading",
|
"id": "hillshading",
|
||||||
"type": "fill",
|
"type": "fill",
|
||||||
"source": "hillshading",
|
"source": "hillshading",
|
||||||
"source-layer": "hillshading",
|
"source-layer": "hillshading",
|
||||||
"paint": {
|
"paint": {
|
||||||
"fill-color": "#bdbdbd",
|
"fill-color": "#bdbdbd",
|
||||||
"fill-opacity": 0.2
|
"fill-opacity": 0.2
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "contours_index_m",
|
"id": "contours_index_m",
|
||||||
"type": "line",
|
"type": "line",
|
||||||
"source": "contours_m",
|
"source": "contours_m",
|
||||||
"source-layer": "contours_m",
|
"source-layer": "contours_m",
|
||||||
"filter": [
|
"filter": [
|
||||||
"any",
|
"any",
|
||||||
["all", ["<=", ["zoom"], 11], ["==", ["%", ["get", "ele"], 500], 0]],
|
["all", ["<=", ["zoom"], 11], ["==", ["%", ["get", "ele"], 500], 0]],
|
||||||
["all", ["==", ["zoom"], 12], ["==", ["%", ["get", "ele"], 250], 0]],
|
["all", ["==", ["zoom"], 12], ["==", ["%", ["get", "ele"], 250], 0]],
|
||||||
["all", [">=", ["zoom"], 13], ["==", ["%", ["get", "ele"], 100], 0]]
|
["all", [">=", ["zoom"], 13], ["==", ["%", ["get", "ele"], 100], 0]]
|
||||||
],
|
],
|
||||||
"paint": {
|
"paint": {
|
||||||
"line-color": "rgb(124, 122, 121)",
|
"line-color": "rgb(124, 122, 121)",
|
||||||
"line-opacity": 0.1,
|
"line-opacity": 0.1,
|
||||||
"line-width": 1.0
|
"line-width": 1.0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "contours_m",
|
"id": "contours_m",
|
||||||
"type": "line",
|
"type": "line",
|
||||||
"source": "contours_m",
|
"source": "contours_m",
|
||||||
"source-layer": "contours_m",
|
"source-layer": "contours_m",
|
||||||
"filter": [
|
"filter": [
|
||||||
"any",
|
"any",
|
||||||
["all", ["<=", ["zoom"], 11], ["==", ["%", ["get", "ele"], 100], 0]],
|
["all", ["<=", ["zoom"], 11], ["==", ["%", ["get", "ele"], 100], 0]],
|
||||||
["all", ["==", ["zoom"], 12], ["==", ["%", ["get", "ele"], 50], 0]],
|
["all", ["==", ["zoom"], 12], ["==", ["%", ["get", "ele"], 50], 0]],
|
||||||
["all", [">=", ["zoom"], 13], ["==", ["%", ["get", "ele"], 25], 0]]
|
["all", [">=", ["zoom"], 13], ["==", ["%", ["get", "ele"], 25], 0]]
|
||||||
],
|
],
|
||||||
"paint": {
|
"paint": {
|
||||||
"line-color": "rgb(126, 124, 121)",
|
"line-color": "rgb(126, 124, 121)",
|
||||||
"line-opacity": 0.3,
|
"line-opacity": 0.3,
|
||||||
"line-width": 0.5
|
"line-width": 0.5
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "contours_index_ft",
|
||||||
|
"type": "line",
|
||||||
|
"source": "contours_ft",
|
||||||
|
"source-layer": "contours_ft",
|
||||||
|
"filter": [
|
||||||
|
"any",
|
||||||
|
["all", ["<=", ["zoom"], 11], ["==", ["%", ["get", "ele"], 2000], 0]],
|
||||||
|
["all", ["==", ["zoom"], 12], ["==", ["%", ["get", "ele"], 800], 0]],
|
||||||
|
["all", [">=", ["zoom"], 13], ["==", ["%", ["get", "ele"], 400], 0]]
|
||||||
|
],
|
||||||
|
"paint": {
|
||||||
|
"line-color": "rgb(124, 122, 121)",
|
||||||
|
"line-opacity": 0.1,
|
||||||
|
"line-width": 1.0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "contours_ft",
|
||||||
|
"type": "line",
|
||||||
|
"source": "contours_ft",
|
||||||
|
"source-layer": "contours_ft",
|
||||||
|
"filter": [
|
||||||
|
"any",
|
||||||
|
["all", ["<=", ["zoom"], 11], ["==", ["%", ["get", "ele"], 400], 0]],
|
||||||
|
["all", ["==", ["zoom"], 12], ["==", ["%", ["get", "ele"], 200], 0]],
|
||||||
|
["all", [">=", ["zoom"], 13], ["==", ["%", ["get", "ele"], 100], 0]]
|
||||||
|
],
|
||||||
|
"paint": {
|
||||||
|
"line-color": "rgb(126, 124, 121)",
|
||||||
|
"line-opacity": 0.3,
|
||||||
|
"line-width": 0.5
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "landuse_pitch",
|
"id": "landuse_pitch",
|
||||||
@@ -2243,32 +2283,60 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "contours_label_m",
|
"id": "contours_label_m",
|
||||||
"type": "symbol",
|
"type": "symbol",
|
||||||
"source": "contours_m",
|
"source": "contours_m",
|
||||||
"source-layer": "contours_m",
|
"source-layer": "contours_m",
|
||||||
"filter": [
|
"filter": [
|
||||||
"any",
|
"any",
|
||||||
["all", ["<=", ["zoom"], 11], ["==", ["%", ["get", "ele"], 500], 0]],
|
["all", ["<=", ["zoom"], 11], ["==", ["%", ["get", "ele"], 500], 0]],
|
||||||
["all", ["==", ["zoom"], 12], ["==", ["%", ["get", "ele"], 250], 0]],
|
["all", ["==", ["zoom"], 12], ["==", ["%", ["get", "ele"], 250], 0]],
|
||||||
["all", ["==", ["zoom"], 13], ["==", ["%", ["get", "ele"], 100], 0]],
|
["all", ["==", ["zoom"], 13], ["==", ["%", ["get", "ele"], 100], 0]],
|
||||||
["all", [">=", ["zoom"], 14], ["==", ["%", ["get", "ele"], 50], 0]]
|
["all", [">=", ["zoom"], 14], ["==", ["%", ["get", "ele"], 50], 0]]
|
||||||
],
|
],
|
||||||
"layout": {
|
"layout": {
|
||||||
"text-size": ["interpolate", ["linear"], ["zoom"], 11, 6, 18, 10],
|
"text-size": ["interpolate", ["linear"], ["zoom"], 11, 6, 18, 10],
|
||||||
"text-allow-overlap": false,
|
"text-allow-overlap": false,
|
||||||
"symbol-avoid-edges": true,
|
"symbol-avoid-edges": true,
|
||||||
"text-ignore-placement": false,
|
"text-ignore-placement": false,
|
||||||
"symbol-placement": "line",
|
"symbol-placement": "line",
|
||||||
"text-rotation-alignment": "map",
|
"text-rotation-alignment": "map",
|
||||||
"text-field": "{ele}m",
|
"text-field": "{ele}m",
|
||||||
"text-padding": 0
|
"text-padding": 0
|
||||||
},
|
},
|
||||||
"paint": {
|
"paint": {
|
||||||
"text-color": "#5c5c5c",
|
"text-color": "#5c5c5c",
|
||||||
"text-halo-color": "rgba(255,255,255,0.85)",
|
"text-halo-color": "rgba(255,255,255,0.85)",
|
||||||
"text-halo-width": 1.25
|
"text-halo-width": 1.25
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "contours_label_ft",
|
||||||
|
"type": "symbol",
|
||||||
|
"source": "contours_ft",
|
||||||
|
"source-layer": "contours_ft",
|
||||||
|
"filter": [
|
||||||
|
"any",
|
||||||
|
["all", ["<=", ["zoom"], 11], ["==", ["%", ["get", "ele"], 2000], 0]],
|
||||||
|
["all", ["==", ["zoom"], 12], ["==", ["%", ["get", "ele"], 1000], 0]],
|
||||||
|
["all", ["==", ["zoom"], 13], ["==", ["%", ["get", "ele"], 400], 0]],
|
||||||
|
["all", [">=", ["zoom"], 14], ["==", ["%", ["get", "ele"], 200], 0]]
|
||||||
|
],
|
||||||
|
"layout": {
|
||||||
|
"text-size": ["interpolate", ["linear"], ["zoom"], 11, 6, 18, 10],
|
||||||
|
"text-allow-overlap": false,
|
||||||
|
"symbol-avoid-edges": true,
|
||||||
|
"text-ignore-placement": false,
|
||||||
|
"symbol-placement": "line",
|
||||||
|
"text-rotation-alignment": "map",
|
||||||
|
"text-field": "{ele}ft",
|
||||||
|
"text-padding": 0
|
||||||
|
},
|
||||||
|
"paint": {
|
||||||
|
"text-color": "#5c5c5c",
|
||||||
|
"text-halo-color": "rgba(255,255,255,0.85)",
|
||||||
|
"text-halo-width": 1.25
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "waterway_line_label",
|
"id": "waterway_line_label",
|
||||||
|
|||||||
@@ -10,7 +10,8 @@ import {
|
|||||||
import { getLayers } from '$lib/components/map/layer-control/utils';
|
import { getLayers } from '$lib/components/map/layer-control/utils';
|
||||||
import { i18n } from '$lib/i18n.svelte';
|
import { i18n } from '$lib/i18n.svelte';
|
||||||
|
|
||||||
const { currentBasemap, currentOverlays, customLayers, opacities, terrainSource } = settings;
|
const { currentBasemap, currentOverlays, customLayers, opacities, terrainSource, distanceUnits } =
|
||||||
|
settings;
|
||||||
|
|
||||||
const emptySource: maplibregl.GeoJSONSourceSpecification = {
|
const emptySource: maplibregl.GeoJSONSourceSpecification = {
|
||||||
type: 'geojson',
|
type: 'geojson',
|
||||||
@@ -57,6 +58,9 @@ export class StyleManager {
|
|||||||
opacities.subscribe(() => this.updateOverlays());
|
opacities.subscribe(() => this.updateOverlays());
|
||||||
terrainSource.subscribe(() => this.updateTerrain());
|
terrainSource.subscribe(() => this.updateTerrain());
|
||||||
customLayers.subscribe(() => this.updateBasemap());
|
customLayers.subscribe(() => this.updateBasemap());
|
||||||
|
distanceUnits.subscribe(() => {
|
||||||
|
if (get(currentBasemap) === 'topo') this.updateBasemap();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
updateBasemap() {
|
updateBasemap() {
|
||||||
@@ -217,7 +221,12 @@ export class StyleManager {
|
|||||||
|
|
||||||
merge(style: maplibregl.StyleSpecification, other: maplibregl.StyleSpecification) {
|
merge(style: maplibregl.StyleSpecification, other: maplibregl.StyleSpecification) {
|
||||||
style.sources = { ...style.sources, ...other.sources };
|
style.sources = { ...style.sources, ...other.sources };
|
||||||
|
const units = get(distanceUnits);
|
||||||
for (let layer of other.layers ?? []) {
|
for (let layer of other.layers ?? []) {
|
||||||
|
if ('source' in layer) {
|
||||||
|
if (layer.source == 'contours_m' && units === 'imperial') continue;
|
||||||
|
if (layer.source == 'contours_ft' && units !== 'imperial') continue;
|
||||||
|
}
|
||||||
if (layer.type === 'symbol' && layer.layout && layer.layout['text-field']) {
|
if (layer.type === 'symbol' && layer.layout && layer.layout['text-field']) {
|
||||||
const textField = layer.layout['text-field'];
|
const textField = layer.layout['text-field'];
|
||||||
if (
|
if (
|
||||||
|
|||||||
Reference in New Issue
Block a user