Skip to content

map: invert vector map in dark mode #451

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
maurerle wants to merge 1 commit into
base: main
Choose a base branch
from
Open

map: invert vector map in dark mode #451

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion CONFIGURATION.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,13 +56,14 @@ Defines a List of Maps that are used as a background.
"url": "https://sgx.geodatenzentrum.de/gdz_basemapworld_vektor/styles/bm_web_wld_col.json",
"type": "vector",
"config": {
"invertInDarkMode": true,
"attribution": "&copy; basemap.de / <a href='https://www.bkg.bund.de'>BKG</a> (2025) <a href='https://creativecommons.org/licenses/by/4.0/'>CC BY 4.0</a>; Datenquellen: &copy; GeoBasis-DE / <a href='https://www.bkg.bund.de'>BKG</a> (2025) <a href='https://creativecommons.org/licenses/by/4.0/'>CC BY 4.0</a>; außerhalb Deutschlands: &copy; <a href='https://www.openstreetmap.org/copyright'>Open Street Map Mitwirkende ODbL v. 1.0</a> ; © <a href='https://openmaptiles.org/'>OpenMapTiles</a>"
}
}
],
```

The `invertInDarkMode` boolean allows you to automatically invert standard map tiles (like light OpenStreetMap) via CSS when the app switches to dark mode, matching the dark aesthetic without needing a dedicated dark tile server. Note that this property is ignored for vector map layers.
The `invertInDarkMode` boolean allows you to automatically invert standard map tiles (like light OpenStreetMap) via CSS when the app switches to dark mode, matching the dark aesthetic without needing a dedicated dark tile server. It works for raster tile layers as well as for vector layers, where the filter is applied to the rendered WebGL canvas.

`fixedCenter` defines the default area that is visible when opening the map.

Expand Down
1 change: 1 addition & 0 deletions config.example.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
{
"name": "BaseMap.de (Vektor)",
"url": "https://sgx.geodatenzentrum.de/gdz_basemapworld_vektor/styles/bm_web_wld_col.json",
"invertInDarkMode": true,
"type": "vector",
"config": {
"attribution": "&copy; basemap.de / <a href='https://www.bkg.bund.de'>BKG</a> (2025) <a href='https://creativecommons.org/licenses/by/4.0/'>CC BY 4.0</a>; Datenquellen: &copy; GeoBasis-DE / <a href='https://www.bkg.bund.de'>BKG</a> (2025) <a href='https://creativecommons.org/licenses/by/4.0/'>CC BY 4.0</a>; außerhalb Deutschlands: &copy; <a href='https://www.openstreetmap.org/copyright'>Open Street Map Mitwirkende ODbL v. 1.0</a> ; © <a href='https://openmaptiles.org/'>OpenMapTiles</a>"
Expand Down
9 changes: 9 additions & 0 deletions dev-fixtures/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,15 @@
"start": 30,
"attribution": "&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> | Map Data &copy; <a href=\"http://arcgis.com/about/\" target=\"_blank\">ArcGIS Sattelite</a>"
}
},
{
"name": "BaseMap.de (Vektor)",
"url": "https://sgx.geodatenzentrum.de/gdz_basemapworld_vektor/styles/bm_web_wld_col.json",
"type": "vector",
"config": {
"invertInDarkMode": true,
"attribution": "&copy; basemap.de / <a href='https://www.bkg.bund.de'>BKG</a> (2025) <a href='https://creativecommons.org/licenses/by/4.0/'>CC BY 4.0</a>; Datenquellen: &copy; GeoBasis-DE / <a href='https://www.bkg.bund.de'>BKG</a> (2025) <a href='https://creativecommons.org/licenses/by/4.0/'>CC BY 4.0</a>; außerhalb Deutschlands: &copy; <a href='https://www.openstreetmap.org/copyright'>Open Street Map Mitwirkende ODbL v. 1.0</a> ; © <a href='https://openmaptiles.org/'>OpenMapTiles</a>"
}
}
]
}
3 changes: 2 additions & 1 deletion lib/map.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,8 @@ export const Map = function (linkScale: (t: any) => any, sidebar: ReturnType<typ
style: layer.url,
attributionControl: { customAttribution: layerConfig.attribution },
maxZoom: layerConfig.maxZoom,
})
className: layerConfig.className,
} as L.LeafletMaplibreGLOptions)
: L.tileLayer(
layer.url.replace(
"{format}",
Expand Down