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', } });