4aiman/baldav
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Dark map: give the roads overlay the same invert/hue/brightness filter as tiles

Browse source 
Road colours were tuned for light tiles and blended into the inverted dark
tiles. Filter the roads pane identically: add the CSS rule for
.leaflet-roadsPane (record screen roads already use that pane), and on the
roads screen draw the polylines through a canvas renderer bound to a new
roadsPane so the same rule applies there too.
This commit is contained in:
4aiman 2026-10-19 19:26:20 +03:00
commit d4dda3da0c
4 changed files with 38 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/css/styles.css
View file

@ -1279,9 +1279,13 @@ select {
zoom controls. Give them slots in the right-hand stack. */
.rec-nogo-btn { right: 8px; bottom: 314px; }
.rec-reroute-btn { right: 8px; bottom: 352px; }
/* Dark map: invert ONLY the tile layer (overlays — track, route, roads, puck — keep
their colours). User-tuned filter on OSM standard tiles. Applies to every Leaflet map. */
/* Dark map: invert ONLY the tile layer (track, route, puck keep their colours).
User-tuned filter on OSM standard tiles. Applies to every Leaflet map. */
body.dark-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(1.5); }
/* Roads overlay was tuned for LIGHT tiles, so on inverted (dark) tiles it blended in.
Give the roads pane the SAME filter as the tiles so road colours shift identically and
stay contrasting. Roads live in `roadsPane` (record screen SVG + roads screen canvas). */
body.dark-map .leaflet-roadsPane { filter: invert(1) hue-rotate(180deg) brightness(1.5); }
/* Darken the map backdrop too, else the light Leaflet container (#ddd) flashes bright
between/behind tiles while zooming or where a tile is missing. */
body.dark-map .leaflet-container { background: #1b1f24; }

8
frontend/js/main.js
View file

@ -8748,11 +8748,15 @@ async function showRoadsMap() {
}
if (seg.length >= 2) segments.push({ coords: seg, atype: segType });
// Draw: bike = blue, walk = brown
// Draw: bike = blue, walk = brown. Roads go in their own pane with a dedicated canvas
// renderer so the dark-map CSS filter (body.dark-map .leaflet-roadsPane) can invert/shift
// road colours the same way it does the tiles — keeps them visible on the dark map.
if (!map.getPane("roadsPane")) { map.createPane("roadsPane"); map.getPane("roadsPane").style.zIndex = 240; }
let roadsRenderer = L.canvas({ pane: "roadsPane" });
let allCoords = [];
for (let s of segments) {
let color = roadColor(s.atype);
L.polyline(s.coords, { color, weight: 4, opacity: 1, smoothFactor: 2.5 }).addTo(map); // px-space simplify: fewer points zoomed out
L.polyline(s.coords, { color, weight: 4, opacity: 1, smoothFactor: 2.5, renderer: roadsRenderer }).addTo(map); // px-space simplify: fewer points zoomed out
allCoords.push(...s.coords);
}