diff --git a/website/src/lib/assets/custom/topo.json b/website/src/lib/assets/custom/topo.json index f56e79dfd..631bcf380 100644 --- a/website/src/lib/assets/custom/topo.json +++ b/website/src/lib/assets/custom/topo.json @@ -16,6 +16,12 @@ "tiles": ["http://localhost:8080/contours_m/{z}/{x}/{y}.mvt"], "minzoom": 4, "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", @@ -117,48 +123,82 @@ } }, { - "id": "hillshading", - "type": "fill", - "source": "hillshading", - "source-layer": "hillshading", - "paint": { - "fill-color": "#bdbdbd", - "fill-opacity": 0.2 - } + "id": "hillshading", + "type": "fill", + "source": "hillshading", + "source-layer": "hillshading", + "paint": { + "fill-color": "#bdbdbd", + "fill-opacity": 0.2 + } }, { - "id": "contours_index_m", - "type": "line", - "source": "contours_m", - "source-layer": "contours_m", - "filter": [ - "any", - ["all", ["<=", ["zoom"], 11], ["==", ["%", ["get", "ele"], 500], 0]], - ["all", ["==", ["zoom"], 12], ["==", ["%", ["get", "ele"], 250], 0]], - ["all", [">=", ["zoom"], 13], ["==", ["%", ["get", "ele"], 100], 0]] - ], - "paint": { - "line-color": "rgb(124, 122, 121)", - "line-opacity": 0.1, - "line-width": 1.0 - } + "id": "contours_index_m", + "type": "line", + "source": "contours_m", + "source-layer": "contours_m", + "filter": [ + "any", + ["all", ["<=", ["zoom"], 11], ["==", ["%", ["get", "ele"], 500], 0]], + ["all", ["==", ["zoom"], 12], ["==", ["%", ["get", "ele"], 250], 0]], + ["all", [">=", ["zoom"], 13], ["==", ["%", ["get", "ele"], 100], 0]] + ], + "paint": { + "line-color": "rgb(124, 122, 121)", + "line-opacity": 0.1, + "line-width": 1.0 + } }, { - "id": "contours_m", - "type": "line", - "source": "contours_m", - "source-layer": "contours_m", - "filter": [ - "any", - ["all", ["<=", ["zoom"], 11], ["==", ["%", ["get", "ele"], 100], 0]], - ["all", ["==", ["zoom"], 12], ["==", ["%", ["get", "ele"], 50], 0]], - ["all", [">=", ["zoom"], 13], ["==", ["%", ["get", "ele"], 25], 0]] - ], - "paint": { - "line-color": "rgb(126, 124, 121)", - "line-opacity": 0.3, - "line-width": 0.5 - } + "id": "contours_m", + "type": "line", + "source": "contours_m", + "source-layer": "contours_m", + "filter": [ + "any", + ["all", ["<=", ["zoom"], 11], ["==", ["%", ["get", "ele"], 100], 0]], + ["all", ["==", ["zoom"], 12], ["==", ["%", ["get", "ele"], 50], 0]], + ["all", [">=", ["zoom"], 13], ["==", ["%", ["get", "ele"], 25], 0]] + ], + "paint": { + "line-color": "rgb(126, 124, 121)", + "line-opacity": 0.3, + "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", @@ -2243,32 +2283,60 @@ } }, { - "id": "contours_label_m", - "type": "symbol", - "source": "contours_m", - "source-layer": "contours_m", - "filter": [ - "any", - ["all", ["<=", ["zoom"], 11], ["==", ["%", ["get", "ele"], 500], 0]], - ["all", ["==", ["zoom"], 12], ["==", ["%", ["get", "ele"], 250], 0]], - ["all", ["==", ["zoom"], 13], ["==", ["%", ["get", "ele"], 100], 0]], - ["all", [">=", ["zoom"], 14], ["==", ["%", ["get", "ele"], 50], 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}m", - "text-padding": 0 - }, - "paint": { - "text-color": "#5c5c5c", - "text-halo-color": "rgba(255,255,255,0.85)", - "text-halo-width": 1.25 - } + "id": "contours_label_m", + "type": "symbol", + "source": "contours_m", + "source-layer": "contours_m", + "filter": [ + "any", + ["all", ["<=", ["zoom"], 11], ["==", ["%", ["get", "ele"], 500], 0]], + ["all", ["==", ["zoom"], 12], ["==", ["%", ["get", "ele"], 250], 0]], + ["all", ["==", ["zoom"], 13], ["==", ["%", ["get", "ele"], 100], 0]], + ["all", [">=", ["zoom"], 14], ["==", ["%", ["get", "ele"], 50], 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}m", + "text-padding": 0 + }, + "paint": { + "text-color": "#5c5c5c", + "text-halo-color": "rgba(255,255,255,0.85)", + "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", diff --git a/website/src/lib/components/map/style.ts b/website/src/lib/components/map/style.ts index a6a9961a6..7ff685666 100644 --- a/website/src/lib/components/map/style.ts +++ b/website/src/lib/components/map/style.ts @@ -10,7 +10,8 @@ import { import { getLayers } from '$lib/components/map/layer-control/utils'; 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 = { type: 'geojson', @@ -57,6 +58,9 @@ export class StyleManager { opacities.subscribe(() => this.updateOverlays()); terrainSource.subscribe(() => this.updateTerrain()); customLayers.subscribe(() => this.updateBasemap()); + distanceUnits.subscribe(() => { + if (get(currentBasemap) === 'topo') this.updateBasemap(); + }); } updateBasemap() { @@ -217,7 +221,12 @@ export class StyleManager { merge(style: maplibregl.StyleSpecification, other: maplibregl.StyleSpecification) { style.sources = { ...style.sources, ...other.sources }; + const units = get(distanceUnits); 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']) { const textField = layer.layout['text-field']; if (