Switch to vector maps (MapLibre GL JS + PMTiles) and add RainViewer radar
Replace Leaflet/raster tiles with MapLibre GL JS: an online OpenFreeMap style and an offline style built from a local PMTiles archive via pmtiles.js and protomaps-themes-base (no glyphs/labels offline by design, see docs/architecture.adoc). Frontend libraries are vendored locally rather than loaded from a CDN so the app keeps working with no internet access. Also add an animated RainViewer precipitation radar overlay (toggle, play/pause, scrub slider), matching the default time window of the weather-radar-card Home Assistant integration.
This commit is contained in:
1 parent
7329497e95
commit
5afb130c45
19 files changed
+1378
-14
No files matched your search
@@ -7,3 +7,72 @@ html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layer-toggle {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.layer-toggle button {
|
||||
/* Override maplibregl-ctrl-group's 29x29px square icon-button sizing —
|
||||
these are text buttons. */
|
||||
width: auto;
|
||||
height: auto;
|
||||
border: none;
|
||||
background: #fff;
|
||||
padding: 6px 10px;
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layer-toggle button.active {
|
||||
background: #dbe9ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.radar-control {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 6px 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.radar-control__toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.radar-control__playback {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.radar-control__playback[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.radar-control__play {
|
||||
/* Override maplibregl-ctrl-group's 29x29px square icon-button sizing. */
|
||||
width: auto;
|
||||
height: auto;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 2px 4px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radar-control__scrub {
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.radar-control__time {
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
Reference in new issue
Block a user