graham/prop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix legend readability with explicit text color

Browse source
This commit is contained in:
Graham McIntire 2026-03-30 17:30:58 -05:00
parent 8cbce9565d
commit 86e01748ef
No known key found for this signature in database
GPG key ID: F4ABF488E6029E59
1 changed files with 13 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
assets/js/propagation_map_hook.js
View file

@ -31,17 +31,19 @@ export const PropagationMap = {
const legend = L.control({ position: "bottomright" })
legend.onAdd = () => {
const div = L.DomUtil.create("div", "leaflet-legend")
div.innerHTML = `
<div style="background:white;padding:8px 12px;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,0.3);font-size:12px;line-height:1.8;">
<strong>Propagation</strong><br>
<span style="background:#00ffa3;width:12px;height:12px;display:inline-block;border-radius:50%;vertical-align:middle;margin-right:4px;"></span> Excellent (80-100)<br>
<span style="background:#7dffd4;width:12px;height:12px;display:inline-block;border-radius:50%;vertical-align:middle;margin-right:4px;"></span> Good (65-79)<br>
<span style="background:#ffe566;width:12px;height:12px;display:inline-block;border-radius:50%;vertical-align:middle;margin-right:4px;"></span> Marginal (50-64)<br>
<span style="background:#ff9044;width:12px;height:12px;display:inline-block;border-radius:50%;vertical-align:middle;margin-right:4px;"></span> Poor (33-49)<br>
<span style="background:#ff4f4f;width:12px;height:12px;display:inline-block;border-radius:50%;vertical-align:middle;margin-right:4px;"></span> Negligible (0-32)
</div>
`
const div = L.DomUtil.create("div")
div.style.cssText = "background:#fff;color:#333;padding:10px 14px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.3);font-size:13px;line-height:2;"
const rows = [
["#00ffa3", "Excellent (80-100)"],
["#7dffd4", "Good (65-79)"],
["#ffe566", "Marginal (50-64)"],
["#ff9044", "Poor (33-49)"],
["#ff4f4f", "Negligible (0-32)"]
]
div.innerHTML = "<strong style='color:#333;'>Propagation</strong><br>" +
rows.map(([c, label]) =>
`<span style="background:${c};width:14px;height:14px;display:inline-block;border-radius:50%;vertical-align:middle;margin-right:6px;border:1px solid rgba(0,0,0,0.15);"></span><span style="color:#333;">${label}</span>`
).join("<br>")
return div
}
legend.addTo(this.map)