Add elevation-tinted terrain (hypsometric color-relief layer)
Reuses the same raster-dem source the hillshade toggle already added — a color-relief layer tints by elevation band (green valleys through brown mid-slopes to pale grey peaks, in this app's own palette) under the hillshade layer, so one toggle gives the combined shaded-relief look instead of two separate layers.
This commit is contained in:
1 parent
77a4c96b1c
commit
707e71caf1
2 files changed
+28
-1
No files matched your search
@@ -26,7 +26,7 @@ independence from connectivity.
|
|||||||
** [x] Filter panel as a "Unigrid Matrix" — an icon grid to toggle categories on/off, styled like the legend on an official NPS paper map, instead of plain dropdowns
|
** [x] Filter panel as a "Unigrid Matrix" — an icon grid to toggle categories on/off, styled like the legend on an official NPS paper map, instead of plain dropdowns
|
||||||
* [ ] Custom vector style (MVT/MapLibre) using the NPS color palette — muted natural tones for forests, water, and contours — so POIs and routes stand out at high zoom
|
* [ ] Custom vector style (MVT/MapLibre) using the NPS color palette — muted natural tones for forests, water, and contours — so POIs and routes stand out at high zoom
|
||||||
** [ ] Landuse & protections: distinct styling for national parks, nature reserves (translucent green/gray-green), military zones, and private land (important for wild camping)
|
** [ ] Landuse & protections: distinct styling for national parks, nature reserves (translucent green/gray-green), military zones, and private land (important for wild camping)
|
||||||
** [ ] Elevation-tinted terrain (color by height band, not just shading — see the hillshade toggle above)
|
** [x] Elevation-tinted terrain — a `color-relief` layer (hypsometric tint, this app's own green→brown→gray palette) under the hillshade layer, same "Terrain shading" toggle
|
||||||
** [x] Road hierarchy: clearly distinguish paved roads from unpaved/gravel/track — critical for knowing if the camper can get there
|
** [x] Road hierarchy: clearly distinguish paved roads from unpaved/gravel/track — critical for knowing if the camper can get there
|
||||||
|
|
||||||
== Main menu reorganization (4 modules)
|
== Main menu reorganization (4 modules)
|
||||||
|
|||||||
@@ -306,6 +306,22 @@ class LayerToggleControl {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const HILLSHADE_ID = "hillshade-dem";
|
const HILLSHADE_ID = "hillshade-dem";
|
||||||
|
const COLOR_RELIEF_ID = "elevation-tint";
|
||||||
|
// Hypsometric tint reusing this app's own palette (wood_a's green at
|
||||||
|
// valley floor, the road casing brown through the mid-slopes) rather than
|
||||||
|
// a generic rainbow ramp, so it reads as part of the same map rather than
|
||||||
|
// a bolted-on overlay. Stops picked for Central European terrain — the
|
||||||
|
// Tatras top out around 2600m — not a general-purpose world ramp.
|
||||||
|
const ELEVATION_COLOR_RAMP = [
|
||||||
|
"interpolate",
|
||||||
|
["linear"],
|
||||||
|
["raster-value"],
|
||||||
|
0, "#c3e8ab",
|
||||||
|
400, "#dcd08f",
|
||||||
|
900, "#c9a66b",
|
||||||
|
1600, "#a89a86",
|
||||||
|
2600, "#f9f6ef",
|
||||||
|
];
|
||||||
// Public, unauthenticated, no API key — the same open (SRTM/ArcticDEM-derived)
|
// Public, unauthenticated, no API key — the same open (SRTM/ArcticDEM-derived)
|
||||||
// elevation tiles OpenStreetMap's own hillshade layer and many other free
|
// elevation tiles OpenStreetMap's own hillshade layer and many other free
|
||||||
// tools use. Only reachable online; while the offline basemap is active this
|
// tools use. Only reachable online; while the offline basemap is active this
|
||||||
@@ -363,11 +379,22 @@ class HillshadeControl {
|
|||||||
attribution: "Terrain tiles: Mapzen, SRTM, ArcticDEM",
|
attribution: "Terrain tiles: Mapzen, SRTM, ArcticDEM",
|
||||||
};
|
};
|
||||||
this._map.addSource(HILLSHADE_ID, source);
|
this._map.addSource(HILLSHADE_ID, source);
|
||||||
|
// Elevation tint under, hillshade on top: the tint sets the base color
|
||||||
|
// per elevation band, hillshade multiplies slope-shading over it — the
|
||||||
|
// combined "characteristic relief look" the TODO asked for, not two
|
||||||
|
// independent layers.
|
||||||
|
this._map.addLayer({
|
||||||
|
id: COLOR_RELIEF_ID,
|
||||||
|
type: "color-relief",
|
||||||
|
source: HILLSHADE_ID,
|
||||||
|
paint: { "color-relief-color": ELEVATION_COLOR_RAMP, "color-relief-opacity": 0.7 },
|
||||||
|
});
|
||||||
this._map.addLayer({ id: HILLSHADE_ID, type: "hillshade", source: HILLSHADE_ID, paint: { "hillshade-exaggeration": 0.4 } });
|
this._map.addLayer({ id: HILLSHADE_ID, type: "hillshade", source: HILLSHADE_ID, paint: { "hillshade-exaggeration": 0.4 } });
|
||||||
}
|
}
|
||||||
|
|
||||||
_removeLayer() {
|
_removeLayer() {
|
||||||
if (this._map.getLayer(HILLSHADE_ID)) this._map.removeLayer(HILLSHADE_ID);
|
if (this._map.getLayer(HILLSHADE_ID)) this._map.removeLayer(HILLSHADE_ID);
|
||||||
|
if (this._map.getLayer(COLOR_RELIEF_ID)) this._map.removeLayer(COLOR_RELIEF_ID);
|
||||||
if (this._map.getSource(HILLSHADE_ID)) this._map.removeSource(HILLSHADE_ID);
|
if (this._map.getSource(HILLSHADE_ID)) this._map.removeSource(HILLSHADE_ID);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in new issue
Block a user