lily
/
ipmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve style selection

This commit is contained in:
LilyRose2798 2024-04-09 20:50:05 +10:00
parent b3a4ce6fdc
commit 1c481ca4f2
1 changed files with 43 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
public/index.html
View File

@ -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)) {
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)) {
curColormap = colormap
updateTileUrl()
colormapButtons.forEach(({ button }) => button.className = "")
button.className = "active"
}
}))
colormapControl.setButtons(colormapButtons)
}