Improve style selection
This commit is contained in:
parent
b3a4ce6fdc
commit
1c481ca4f2
|
|
@ -96,6 +96,9 @@
|
|||
width: 100%;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
details.custom-control > .button-container button.active {
|
||||
pointer-events: none;
|
||||
}
|
||||
.maplibregl-ctrl button {
|
||||
color: black;
|
||||
font-size: 0.8rem;
|
||||
|
|
@ -292,28 +295,36 @@
|
|||
|
||||
map.once("style.load", async () => {
|
||||
const data = await dataP
|
||||
|
||||
let curDate, curVariant, curColormap
|
||||
// remove empty keys and sort colormaps alphabetically
|
||||
for (const date in data) {
|
||||
for (const variant in data[date]) {
|
||||
if (data[date][variant].length === 0)
|
||||
delete data[date][variant]
|
||||
else
|
||||
data[date][variant] = data[date][variant].sort()
|
||||
}
|
||||
if (Object.keys(data[date]).length === 0)
|
||||
delete data[date]
|
||||
}
|
||||
const dates = Object.keys(data).sort()
|
||||
curDate = dates.find(date => {
|
||||
const variantEntries = Object.entries(data[date])
|
||||
if (variantEntries.length === 0) return false
|
||||
const variantEntry = variantEntries.find(([variant, colormaps]) => variant === defaultVariant && colormaps.length > 0) ??
|
||||
variantEntries.sort(([a], [b]) => a.localeCompare(b)).find(([_, colormaps]) => colormaps.length > 0)
|
||||
if (!variantEntry) return false
|
||||
const [variant, colormaps] = variantEntry
|
||||
curVariant = variant
|
||||
curColormap = colormaps.find(colormap => colormap === defaultColormap) ?? colormaps.sort()[0]
|
||||
return true
|
||||
})
|
||||
if (!curDate) {
|
||||
if (dates.length === 0) {
|
||||
console.error("no data found")
|
||||
return
|
||||
}
|
||||
|
||||
let curDate, curVariant, curColormap
|
||||
const resetDate = () => curDate = dates[dates.length - 1]
|
||||
const resetVariant = () => curVariant = defaultVariant in data[curDate] ? defaultVariant : Object.keys(data[curDate]).sort()[0]
|
||||
const resetColormap = () => curColormap = data[curDate][curVariant].includes(defaultColormap) ? defaultColormap : data[curDate][curVariant][0]
|
||||
resetDate()
|
||||
resetVariant()
|
||||
resetColormap()
|
||||
|
||||
const getTileUrl = () => `${tilesDir}/${curDate}/${curVariant}/${curColormap}/{z}/{y}/{x}.png`
|
||||
|
||||
map.addSource(tilesId, {
|
||||
type: "raster",
|
||||
tiles: [`${tilesDir}/${curDate}/${curVariant}/${curColormap}/{z}/{y}/{x}.png`],
|
||||
tiles: [getTileUrl()],
|
||||
tileSize,
|
||||
minzoom: 0,
|
||||
maxzoom: 8,
|
||||
|
|
@ -388,17 +399,7 @@
|
|||
source: subnetsId,
|
||||
})
|
||||
|
||||
const setStyle = (date, variant, colormap) => {
|
||||
if (date === curDate && variant === curVariant && colormap === curColormap || !data[date]?.[variant]?.includes(colormap))
|
||||
return false
|
||||
const source = map.getSource(tilesId)
|
||||
if (!source) return false
|
||||
source.setTiles([`${tilesDir}/${date}/${variant}/${colormap}/{z}/{y}/{x}.png`])
|
||||
curDate = date
|
||||
curVariant = variant
|
||||
curColormap = colormap
|
||||
return true
|
||||
}
|
||||
const updateTileUrl = () => map.getSource(tilesId).setTiles([getTileUrl()])
|
||||
|
||||
const addControl = (elem, side) => map.addControl({
|
||||
onAdd: () => elem,
|
||||
|
|
@ -433,11 +434,13 @@
|
|||
return { date, button }
|
||||
})
|
||||
dateButtons.forEach(({ date, button }) => button.addEventListener("click", () => {
|
||||
if (setStyle(date, curVariant, curColormap)) {
|
||||
dateButtons.forEach(({ button }) => button.className = "")
|
||||
button.className = "active"
|
||||
renderControls()
|
||||
}
|
||||
curDate = date
|
||||
if (!(curVariant in data[curDate])) resetVariant()
|
||||
if (!data[curDate][curVariant].includes(curColormap)) resetColormap()
|
||||
updateTileUrl()
|
||||
dateButtons.forEach(({ button }) => button.className = "")
|
||||
button.className = "active"
|
||||
renderControls()
|
||||
}))
|
||||
dateControl.setButtons(dateButtons)
|
||||
|
||||
|
|
@ -450,11 +453,14 @@
|
|||
return { variant, button }
|
||||
})
|
||||
variantButtons.forEach(({ variant, button }) => button.addEventListener("click", () => {
|
||||
if (setStyle(curDate, variant, curColormap)) renderControls()
|
||||
curVariant = variant
|
||||
if (!data[curDate][curVariant].includes(curColormap)) resetColormap()
|
||||
updateTileUrl()
|
||||
renderControls()
|
||||
}))
|
||||
variantControl.setButtons(variantButtons)
|
||||
|
||||
const colormaps = data[curDate][curVariant].sort()
|
||||
const colormaps = data[curDate][curVariant]
|
||||
const colormapButtons = colormaps.map(colormap => {
|
||||
const button = document.createElement("button")
|
||||
button.textContent = colormap
|
||||
|
|
@ -462,10 +468,10 @@
|
|||
return { colormap, button }
|
||||
})
|
||||
colormapButtons.forEach(({ colormap, button }) => button.addEventListener("click", () => {
|
||||
if (setStyle(curDate, curVariant, colormap)) {
|
||||
colormapButtons.forEach(({ button }) => button.className = "")
|
||||
button.className = "active"
|
||||
}
|
||||
curColormap = colormap
|
||||
updateTileUrl()
|
||||
colormapButtons.forEach(({ button }) => button.className = "")
|
||||
button.className = "active"
|
||||
}))
|
||||
colormapControl.setButtons(colormapButtons)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue