feat: create station-map Alpine/Leaflet component

2026-04-06 09:41:05 +01:00
parent 21aea84797
commit 9d591a1d5a
1 changed files with 92 additions and 0 deletions
--- a/resources/js/maps/station-map.js
+++ b/resources/js/maps/station-map.js
@@ -0,0 +1,92 @@
+import L from 'leaflet';
+import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png';
+import markerIcon from 'leaflet/dist/images/marker-icon.png';
+import markerShadow from 'leaflet/dist/images/marker-shadow.png';
+
+delete L.Icon.Default.prototype._getIconUrl;
+L.Icon.Default.mergeOptions({
+    iconUrl: markerIcon,
+    iconRetinaUrl: markerIcon2x,
+    shadowUrl: markerShadow,
+});
+
+const CLASSIFICATION_COLOURS = {
+    current: '#22c55e',
+    recent: '#64748b',
+    stale: '#f59e0b',
+    outdated: '#ef4444',
+};
+
+const UK_CENTRE = [54.0, -2.0];
+const UK_ZOOM = 6;
+
+export function stationMap(results, meta) {
+    return {
+        results,
+        meta,
+        _map: null,
+        _markers: [],
+
+        init() {
+            this._map = L.map(this.$el, { zoomControl: true }).setView(UK_CENTRE, UK_ZOOM);
+
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+                maxZoom: 19,
+            }).addTo(this._map);
+
+            if (this.results && this.results.length > 0) {
+                this._plotMarkers();
+            }
+
+            this.$watch('results', () => this._plotMarkers());
+        },
+
+        _clearMarkers() {
+            this._markers.forEach((m) => m.remove());
+            this._markers = [];
+        },
+
+        _plotMarkers() {
+            this._clearMarkers();
+
+            if (!this.results || this.results.length === 0) {
+                return;
+            }
+
+            const bounds = [];
+
+            this.results.forEach((station) => {
+                const colour = CLASSIFICATION_COLOURS[station.price_classification] ?? '#64748b';
+                const miles = (station.distance_km * 0.621371).toFixed(1);
+                const supermarketTag = station.is_supermarket
+                    ? '<span style="display:inline-block;background:#84cc16;color:#fff;font-size:10px;padding:1px 5px;border-radius:3px;margin-left:4px;">Supermarket</span>'
+                    : '';
+
+                const popup = `
+                    <div style="min-width:160px">
+                        <strong style="font-size:13px">${station.name}</strong>${supermarketTag}<br>
+                        <span style="font-size:20px;font-weight:700;color:${colour}">${Number(station.price).toFixed(1)}p</span><br>
+                        <span style="font-size:12px;color:#6b7280">${miles} miles away</span><br>
+                        <span style="font-size:11px;color:#9ca3af">${station.address}, ${station.postcode}</span>
+                    </div>
+                `;
+
+                const marker = L.circleMarker([station.lat, station.lng], {
+                    radius: 9,
+                    fillColor: colour,
+                    color: '#ffffff',
+                    weight: 2,
+                    opacity: 1,
+                    fillOpacity: 0.85,
+                }).bindPopup(popup);
+
+                marker.addTo(this._map);
+                this._markers.push(marker);
+                bounds.push([station.lat, station.lng]);
+            });
+
+            this._map.fitBounds(bounds, { padding: [40, 40], maxZoom: 14 });
+        },
+    };
+}