Increase grid to 0.125 degrees with smooth canvas overlay
Replace circle markers with a canvas tile layer that renders smooth, flowing colored regions using bilinear interpolation between grid points. Colors interpolate between tiers for gradients. ~95k grid points at 0.125 degree resolution with wgrib2 extraction.
This commit is contained in:
parent
becdf89978
commit
66639e3717
3 changed files with 126 additions and 44 deletions
|
|
@ -1,6 +1,5 @@
|
|||
export const PropagationMap = {
|
||||
mounted() {
|
||||
// Center on DFW airport, ~500 mile radius
|
||||
this.map = L.map(this.el, {
|
||||
center: [32.897, -97.038],
|
||||
zoom: 7,
|
||||
|
|
@ -13,14 +12,15 @@ export const PropagationMap = {
|
|||
maxZoom: 19
|
||||
}).addTo(this.map)
|
||||
|
||||
this.scoreLayer = L.layerGroup().addTo(this.map)
|
||||
this.scoreOverlay = null
|
||||
this.scores = []
|
||||
|
||||
this.colorScale = [
|
||||
{ min: 80, color: "#00ffa3" },
|
||||
{ min: 65, color: "#7dffd4" },
|
||||
{ min: 50, color: "#ffe566" },
|
||||
{ min: 33, color: "#ff9044" },
|
||||
{ min: 0, color: "#ff4f4f" }
|
||||
{ min: 80, r: 0, g: 255, b: 163 }, // EXCELLENT - green
|
||||
{ min: 65, r: 125, g: 255, b: 212 }, // GOOD - light green
|
||||
{ min: 50, r: 255, g: 229, b: 102 }, // MARGINAL - yellow
|
||||
{ min: 33, r: 255, g: 144, b: 68 }, // POOR - orange
|
||||
{ min: 0, r: 255, g: 79, b: 79 } // NEGLIGIBLE - red
|
||||
]
|
||||
|
||||
const initialScores = JSON.parse(this.el.dataset.scores || "[]")
|
||||
|
|
@ -30,6 +30,7 @@ export const PropagationMap = {
|
|||
this.renderScores(scores)
|
||||
})
|
||||
|
||||
// Legend
|
||||
const legend = L.control({ position: "bottomright" })
|
||||
legend.onAdd = () => {
|
||||
const div = L.DomUtil.create("div")
|
||||
|
|
@ -51,37 +52,118 @@ export const PropagationMap = {
|
|||
},
|
||||
|
||||
renderScores(scores) {
|
||||
this.scoreLayer.clearLayers()
|
||||
scores.forEach(({ lat, lon, score }) => {
|
||||
const color = this.scoreColor(score)
|
||||
const circle = L.circleMarker([lat, lon], {
|
||||
radius: 6,
|
||||
fillColor: color,
|
||||
fillOpacity: 0.7,
|
||||
color: color,
|
||||
weight: 0
|
||||
})
|
||||
circle.bindPopup(
|
||||
`<strong>Score: ${score}/100</strong><br>${this.scoreTier(score)}<br>` +
|
||||
`<small>${lat.toFixed(3)}\u00b0N, ${Math.abs(lon).toFixed(3)}\u00b0W</small>`
|
||||
)
|
||||
this.scoreLayer.addLayer(circle)
|
||||
})
|
||||
},
|
||||
|
||||
scoreColor(score) {
|
||||
for (const tier of this.colorScale) {
|
||||
if (score >= tier.min) return tier.color
|
||||
this.scores = scores
|
||||
if (this.scoreOverlay) {
|
||||
this.map.removeLayer(this.scoreOverlay)
|
||||
}
|
||||
return "#ff4f4f"
|
||||
if (scores.length === 0) return
|
||||
|
||||
// Build a lookup grid for interpolation
|
||||
this.gridLookup = new Map()
|
||||
scores.forEach(({ lat, lon, score }) => {
|
||||
this.gridLookup.set(`${lat.toFixed(3)},${lon.toFixed(3)}`, score)
|
||||
})
|
||||
|
||||
// Create a custom canvas overlay
|
||||
const self = this
|
||||
this.scoreOverlay = L.GridLayer.extend({
|
||||
createTile(coords) {
|
||||
const tile = document.createElement("canvas")
|
||||
const size = this.getTileSize()
|
||||
tile.width = size.x
|
||||
tile.height = size.y
|
||||
const ctx = tile.getContext("2d")
|
||||
|
||||
const step = 0.125
|
||||
const nwPoint = coords.scaleBy(size)
|
||||
const sePoint = nwPoint.add(size)
|
||||
const nw = this._map.unproject(nwPoint, coords.z)
|
||||
const se = this._map.unproject(sePoint, coords.z)
|
||||
|
||||
// Pixel size in degrees
|
||||
const latPerPx = (nw.lat - se.lat) / size.y
|
||||
const lonPerPx = (se.lng - nw.lng) / size.x
|
||||
|
||||
// Draw cells - each pixel block maps to a grid point
|
||||
const cellPxX = Math.max(1, Math.ceil(step / lonPerPx))
|
||||
const cellPxY = Math.max(1, Math.ceil(step / Math.abs(latPerPx)))
|
||||
|
||||
for (let py = 0; py < size.y; py += cellPxY) {
|
||||
for (let px = 0; px < size.x; px += cellPxX) {
|
||||
const lat = nw.lat - py * Math.abs(latPerPx)
|
||||
const lon = nw.lng + px * lonPerPx
|
||||
|
||||
const score = self.interpolateScore(lat, lon, step)
|
||||
if (score !== null) {
|
||||
const color = self.scoreColorRGB(score)
|
||||
ctx.fillStyle = `rgba(${color.r},${color.g},${color.b},0.55)`
|
||||
ctx.fillRect(px, py, cellPxX, cellPxY)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return tile
|
||||
}
|
||||
})
|
||||
|
||||
this.scoreOverlay = new (this.scoreOverlay)({ opacity: 1.0 })
|
||||
this.scoreOverlay.addTo(this.map)
|
||||
},
|
||||
|
||||
scoreTier(score) {
|
||||
if (score >= 80) return "EXCELLENT"
|
||||
if (score >= 65) return "GOOD"
|
||||
if (score >= 50) return "MARGINAL"
|
||||
if (score >= 33) return "POOR"
|
||||
return "NEGLIGIBLE"
|
||||
interpolateScore(lat, lon, step) {
|
||||
// Snap to nearest grid point
|
||||
const rlat = (Math.round(lat / step) * step).toFixed(3)
|
||||
const rlon = (Math.round(lon / step) * step).toFixed(3)
|
||||
const key = `${rlat},${rlon}`
|
||||
if (this.gridLookup.has(key)) return this.gridLookup.get(key)
|
||||
|
||||
// Try bilinear interpolation from 4 surrounding points
|
||||
const lat0 = Math.floor(lat / step) * step
|
||||
const lat1 = lat0 + step
|
||||
const lon0 = Math.floor(lon / step) * step
|
||||
const lon1 = lon0 + step
|
||||
|
||||
const s00 = this.gridLookup.get(`${lat0.toFixed(3)},${lon0.toFixed(3)}`)
|
||||
const s10 = this.gridLookup.get(`${lat1.toFixed(3)},${lon0.toFixed(3)}`)
|
||||
const s01 = this.gridLookup.get(`${lat0.toFixed(3)},${lon1.toFixed(3)}`)
|
||||
const s11 = this.gridLookup.get(`${lat1.toFixed(3)},${lon1.toFixed(3)}`)
|
||||
|
||||
// Need at least 2 corners to interpolate
|
||||
const corners = [s00, s10, s01, s11].filter(s => s !== undefined)
|
||||
if (corners.length < 2) return null
|
||||
|
||||
if (corners.length === 4) {
|
||||
const tLat = (lat - lat0) / step
|
||||
const tLon = (lon - lon0) / step
|
||||
return Math.round(
|
||||
s00 * (1 - tLat) * (1 - tLon) +
|
||||
s10 * tLat * (1 - tLon) +
|
||||
s01 * (1 - tLat) * tLon +
|
||||
s11 * tLat * tLon
|
||||
)
|
||||
}
|
||||
|
||||
// Fallback: average available corners
|
||||
return Math.round(corners.reduce((a, b) => a + b, 0) / corners.length)
|
||||
},
|
||||
|
||||
scoreColorRGB(score) {
|
||||
// Interpolate between tier colors for smooth gradients
|
||||
for (let i = 0; i < this.colorScale.length - 1; i++) {
|
||||
const upper = this.colorScale[i]
|
||||
const lower = this.colorScale[i + 1]
|
||||
if (score >= lower.min) {
|
||||
const range = upper.min - lower.min
|
||||
const t = Math.min(1, (score - lower.min) / range)
|
||||
return {
|
||||
r: Math.round(lower.r + (upper.r - lower.r) * t),
|
||||
g: Math.round(lower.g + (upper.g - lower.g) * t),
|
||||
b: Math.round(lower.b + (upper.b - lower.b) * t)
|
||||
}
|
||||
}
|
||||
}
|
||||
const last = this.colorScale[this.colorScale.length - 1]
|
||||
return { r: last.r, g: last.g, b: last.b }
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
defmodule Microwaveprop.Propagation.Grid do
|
||||
@moduledoc "CONUS grid definition for propagation scoring. 0.5 degree resolution (~55 km)."
|
||||
@moduledoc "CONUS grid definition for propagation scoring. 0.125 degree resolution (~14 km)."
|
||||
|
||||
@lat_min 25.0
|
||||
@lat_max 50.0
|
||||
@lon_min -125.0
|
||||
@lon_max -66.0
|
||||
@step 0.5
|
||||
@step 0.125
|
||||
|
||||
@doc "Returns all grid points as `{lat, lon}` tuples covering CONUS at 0.5 degree spacing."
|
||||
@doc "Returns all grid points as `{lat, lon}` tuples covering CONUS at 0.125 degree spacing."
|
||||
def conus_points do
|
||||
for lat <- float_range(@lat_min, @lat_max, @step),
|
||||
lon <- float_range(@lon_min, @lon_max, @step) do
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ defmodule Microwaveprop.Propagation.GridTest do
|
|||
alias Microwaveprop.Propagation.Grid
|
||||
|
||||
describe "conus_points/0" do
|
||||
test "generates grid at 0.5 degree resolution" do
|
||||
test "generates grid at 0.125 degree resolution" do
|
||||
points = Grid.conus_points()
|
||||
assert length(points) > 5000
|
||||
assert length(points) < 100_000
|
||||
|
|
@ -17,10 +17,10 @@ defmodule Microwaveprop.Propagation.GridTest do
|
|||
end)
|
||||
end
|
||||
|
||||
test "points are on 0.5 degree grid" do
|
||||
test "points are on 0.125 degree grid" do
|
||||
Enum.each(Grid.conus_points(), fn {lat, lon} ->
|
||||
assert Float.round(lat * 2, 0) == lat * 2
|
||||
assert Float.round(lon * 2, 0) == lon * 2
|
||||
assert Float.round(lat * 8, 0) == lat * 8
|
||||
assert Float.round(lon * 8, 0) == lon * 8
|
||||
end)
|
||||
end
|
||||
|
||||
|
|
@ -39,8 +39,8 @@ defmodule Microwaveprop.Propagation.GridTest do
|
|||
end
|
||||
|
||||
describe "step/0" do
|
||||
test "returns 0.5" do
|
||||
assert Grid.step() == 0.5
|
||||
test "returns 0.125" do
|
||||
assert Grid.step() == 0.125
|
||||
end
|
||||
end
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue