diff --git a/static/index.html b/static/index.html
index 927c42a..3218e73 100644
--- a/static/index.html
+++ b/static/index.html
@@ -63,6 +63,11 @@
}
.legend-labels { display: flex; justify-content: space-between; font-size: 11px; color: #666; }
#stats { margin-top: 8px; font-size: 11px; color: #888; }
+
+ /* Colored pin markers */
+ .pin-icon {
+ filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35));
+ }
@@ -220,7 +225,16 @@
if (s.regular <= 0 || s.regular > priceMax) return;
count++;
- const marker = L.marker([s.lat, s.lng]);
+ const color = priceColor(s.regular, minPrice, maxPrice);
+ const icon = L.divIcon({
+ html: pinSvg(color),
+ className: '',
+ iconSize: [25, 41],
+ iconAnchor: [12, 41],
+ popupAnchor: [1, -34],
+ });
+
+ const marker = L.marker([s.lat, s.lng], { icon });
let popup = `${s.name}
`;
popup += `${s.brand}
`;
@@ -235,6 +249,36 @@
document.getElementById('visible-count').textContent = count + ' / ' + allStations.length + ' stations';
}
+
+ function pinSvg(fill) {
+ return ``;
+ }
+
+ function priceColor(price, min, max) {
+ const t = Math.max(0, Math.min(1, (price - min) / (max - min)));
+ const colors = [
+ [49, 54, 149],
+ [69, 117, 180],
+ [116, 173, 209],
+ [171, 217, 233],
+ [254, 224, 144],
+ [253, 174, 97],
+ [244, 109, 67],
+ [215, 48, 39],
+ [165, 0, 38],
+ ];
+ const idx = Math.min(Math.floor(t * (colors.length - 1)), colors.length - 2);
+ const frac = t * (colors.length - 1) - idx;
+ const c0 = colors[idx], c1 = colors[idx + 1];
+ const r = Math.round(c0[0] + (c1[0] - c0[0]) * frac);
+ const g = Math.round(c0[1] + (c1[1] - c0[1]) * frac);
+ const b = Math.round(c0[2] + (c1[2] - c0[2]) * frac);
+ return `rgb(${r},${g},${b})`;
+ }