fuel-price/resources/js/components/LeafletMap.vue

<template>
    <div class="space-y-2">
        <button
            @click="toggleMap"
            class="flex items-center gap-2 text-sm font-bold text-accent hover:text-accent-content transition-colors"
        >
            <iconify-icon :icon="isOpen ? 'lucide:chevron-up' : 'lucide:chevron-down'"></iconify-icon>
            {{ isOpen ? 'Hide map' : 'Show map' }}
        </button>

        <template v-if="isOpen">
            <div
                ref="mapContainer"
                class="w-full h-72 rounded-2xl overflow-hidden border border-zinc-300 shadow-sm"
            ></div>

            <div class="flex flex-wrap gap-3 text-xs text-zinc-500">
                <span class="flex items-center gap-1.5">
                    <span class="inline-block size-3 rounded-full bg-green-500"></span>
                    Current (&lt;24h)
                </span>
                <span class="flex items-center gap-1.5">
                    <span class="inline-block size-3 rounded-full bg-slate-500"></span>
                    Recent (24–48h)
                </span>
                <span class="flex items-center gap-1.5">
                    <span class="inline-block size-3 rounded-full bg-amber-500"></span>
                    Stale (2–5 days)
                </span>
                <span class="flex items-center gap-1.5">
                    <span class="inline-block size-3 rounded-full bg-red-500"></span>
                    Outdated (5+ days)
                </span>
            </div>
        </template>
    </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

const CLASSIFICATION_COLOURS = {
    current:  '#22c55e',
    recent:   '#64748b',
    stale:    '#f59e0b',
    outdated: '#ef4444',
}

const CLASSIFICATION_BORDER_COLOURS = {
    current:  '#16a34a',
    recent:   '#475569',
    stale:    '#d97706',
    outdated: '#dc2626',
}

function buildMarkerHtml(station, index, colour, borderColour) {
    const isFirst = index === 0
    const w = isFirst ? 63 : 59
    const h = isFirst ? 58 : 51
    const bw = isFirst ? 56 : 52
    const bh = isFirst ? 43 : 38
    const br = isFirst ? 17 : 15
    const tailTop = isFirst ? 45 : 40
    const tailW = isFirst ? 9 : 7
    const tailH = isFirst ? 11 : 9
    const badgeSize = isFirst ? 18 : 16
    const badgeFontSize = isFirst ? 10 : 8
    const priceFontSize = isFirst ? 12 : 11

    const initial = escHtml((station.brand || station.name || '?')[0].toUpperCase())

    const badge = isFirst
        ? `<div style="position:absolute;top:-4px;right:-4px;width:${badgeSize}px;height:${badgeSize}px;background:#facc15;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid white;box-shadow:0 2px 4px rgba(0,0,0,0.2);z-index:30;"><span style="font-size:${badgeFontSize}px;color:#713f12;">★</span></div>`
        : `<div style="position:absolute;top:-3px;right:-3px;width:${badgeSize}px;height:${badgeSize}px;background:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid white;box-shadow:0 1px 3px rgba(0,0,0,0.2);z-index:30;"><span style="font-size:${badgeFontSize}px;font-weight:bold;color:white;">${index + 1}</span></div>`

    return `<div style="position:relative;width:${w}px;height:${h}px;">
        ${badge}
        <div style="position:absolute;top:6px;left:50%;transform:translateX(-50%);width:${bw}px;height:${bh}px;background:${colour};border-radius:${br}px;border:3px solid ${borderColour};box-shadow:0 2px 6px rgba(0,0,0,0.24),inset 0 1px 0 rgba(255,255,255,0.22);overflow:hidden;z-index:10;">
            <div style="position:absolute;top:0;left:0;right:0;height:11px;background:rgba(15,23,42,0.20);border-bottom:1px solid rgba(255,255,255,0.24);display:flex;align-items:center;justify-content:center;">
                <span style="font-size:9px;font-weight:700;letter-spacing:-0.05px;color:rgba(255,255,255,0.84);text-transform:uppercase;line-height:1;">${initial}</span>
            </div>
            <div style="position:absolute;left:3px;right:3px;top:12px;bottom:2px;display:flex;align-items:center;justify-content:center;text-align:center;">
                <span style="display:inline-block;max-width:${bw - 13}px;color:#ffffff;font-size:${priceFontSize}px;font-weight:800;letter-spacing:-0.1px;line-height:1.12;white-space:nowrap;text-shadow:0 1px 1px rgba(0,0,0,0.42);">${Number(station.price).toFixed(1)}p</span>
            </div>
        </div>
        <div style="position:absolute;top:${tailTop}px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:${tailW}px solid transparent;border-right:${tailW}px solid transparent;border-top:${tailH}px solid ${colour};z-index:5;"></div>
    </div>`
}

function escHtml(str) {
    return String(str ?? '')
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
}

const props = defineProps({
    stations: { type: Array, required: true },
    defaultOpen: { type: Boolean, default: false },
})

const mapContainer = ref(null)
const isOpen = ref(false)
let mapInstance = null
let markersLayer = null

function initMap() {
    if (mapInstance || !mapContainer.value) return

    mapInstance = L.map(mapContainer.value)

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors',
    }).addTo(mapInstance)

    markersLayer = L.layerGroup().addTo(mapInstance)
}

function renderMarkers() {
    if (!mapInstance || !markersLayer) return

    markersLayer.clearLayers()

    if (!props.stations.length) return

    const bounds = []

    props.stations.forEach((station, index) => {
        const colour = CLASSIFICATION_COLOURS[station.price_classification] ?? '#64748b'
        const borderColour = CLASSIFICATION_BORDER_COLOURS[station.price_classification] ?? '#475569'
        const miles = ((station.distance_km ?? 0) * 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">${escHtml(station.name)}</strong>${supermarketTag}<br>
                <span style="font-size:20px;font-weight:700;color:${escHtml(colour)}">${Number(station.price).toFixed(1)}p</span><br>
                <span style="font-size:12px;color:#6b7280">${escHtml(miles)} miles away</span><br>
                <span style="font-size:11px;color:#9ca3af">${escHtml(station.address)}, ${escHtml(station.postcode)}</span>
            </div>
        `

        const isFirst = index === 0
        const w = isFirst ? 63 : 59
        const h = isFirst ? 58 : 51

        const icon = L.divIcon({
            className: '',
            iconSize: [w, h],
            iconAnchor: [w / 2, h],
            html: buildMarkerHtml(station, index, colour, borderColour),
        })

        const marker = L.marker([station.lat, station.lng], { icon }).bindPopup(popup)

        markersLayer.addLayer(marker)
        bounds.push([station.lat, station.lng])
    })

    if (bounds.length === 1) {
        mapInstance.setView(bounds[0], 14)
    } else {
        mapInstance.fitBounds(bounds, { padding: [40, 40], maxZoom: 14 })
    }
}

async function toggleMap() {
    isOpen.value = !isOpen.value

    if (isOpen.value) {
        await nextTick()
        initMap()
        mapInstance.invalidateSize()
        renderMarkers()
    }
}

onMounted(async () => {
    if (props.defaultOpen) {
        isOpen.value = true
        await nextTick()
        initMap()
        mapInstance.invalidateSize()
        renderMarkers()
    }
})

watch(() => props.stations, () => {
    if (isOpen.value) {
        renderMarkers()
    }
})

onUnmounted(() => {
    if (mapInstance) {
        mapInstance.remove()
        mapInstance = null
    }
})
</script>