better heatmap

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