diff --git a/static/index.html b/static/index.html
index f21d665..979b162 100644
--- a/static/index.html
+++ b/static/index.html
@@ -169,28 +169,32 @@
document.getElementById('slider-label').textContent = Math.ceil(maxPrice) + 'ยข/L';
// Build heatmap layer
+ // Each point gets an intensity based on its price.
+ // We set a floor of 0.25 so cheap stations are still clearly visible,
+ // and use a high 'max' so overlapping stations don't oversaturate to red.
const heatData = stations
.filter(s => s.regular > 0)
.map(s => {
- const intensity = (s.regular - minPrice) / (maxPrice - minPrice);
+ const t = (s.regular - minPrice) / (maxPrice - minPrice);
+ const intensity = 0.25 + t * 0.75; // range [0.25 .. 1.0]
return [s.lat, s.lng, intensity];
});
heatLayer = L.heatLayer(heatData, {
- radius: 25,
- blur: 20,
- maxZoom: 12,
- max: 1.0,
+ radius: 22,
+ blur: 25,
+ maxZoom: 13,
+ max: 3.0,
+ minOpacity: 0.35,
gradient: {
0.0: '#313695',
- 0.1: '#4575b4',
- 0.2: '#74add1',
- 0.3: '#abd9e9',
- 0.4: '#e0f3f8',
- 0.5: '#fee090',
- 0.6: '#fdae61',
- 0.7: '#f46d43',
- 0.8: '#d73027',
+ 0.15: '#4575b4',
+ 0.3: '#74add1',
+ 0.45: '#abd9e9',
+ 0.55: '#fee090',
+ 0.7: '#fdae61',
+ 0.8: '#f46d43',
+ 0.9: '#d73027',
1.0: '#a50026',
}
});