let pompiers: {
        lat: number
        lng: number
        nom: string
        telephone: string
    }[] = $state([])
    let pompierMarkers: L.Marker[] = []

    function firebrigadeIcon() {
        return leaflet!.divIcon({
            html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 75" width="40" height="50">
    <path d="M30 73 C18 57 6 50 6 36 A24 24 0 1 1 54 36 C54 50 42 57 30 73Z" fill="#C53030"/>
    <circle cx="30" cy="36" r="21" fill="white"/>
    <rect x="18" y="27" width="26" height="2" rx="1" fill="#9B2C2C"/>
    <line x1="24" y1="27" x2="24" y2="29" stroke="#9B2C2C" stroke-width="1.5"/>
    <line x1="31" y1="27" x2="31" y2="29" stroke="#9B2C2C" stroke-width="1.5"/>
    <line x1="38" y1="27" x2="38" y2="29" stroke="#9B2C2C" stroke-width="1.5"/>
    <rect x="18" y="29" width="26" height="13" rx="2" fill="#C53030"/>
    <rect x="11" y="31" width="10" height="11" rx="2" fill="#C53030"/>
    <rect x="13" y="33" width="6" height="6" rx="1" fill="white" opacity="0.85"/>
    <circle cx="18" cy="42" r="4" fill="#444"/>
    <circle cx="18" cy="42" r="2" fill="white" opacity="0.6"/>
    <circle cx="40" cy="42" r="4" fill="#444"/>
    <circle cx="40" cy="42" r="2" fill="white" opacity="0.6"/>
    <rect x="13" y="27" width="5" height="2.5" rx="1" fill="#FC8181"/>
  </svg>`,
            className: '',
            iconSize: [40, 50],
            iconAnchor: [20, 50],
            popupAnchor: [0, -52],
        })
    }

                            }
                        }
                    }
                })(),
                (async () => {
                    console.log('Pompier')
                    for (let marker of pompierMarkers) {
                        if (marker && map) {
                            marker.removeFrom(map)
                        }
                    }
                    pompierMarkers = []
                    pompiers = []
                    let resp = await fetch(
                        `${srv}/api/grain/pompiers?lat=${latlng.lat}&lng=${latlng.lng}&rayon=10000`,
                        {
                            credentials: 'include',
                        }
                    )
                    console.log('Pompier', resp.status)
                    if (resp.status == 200) {
                        pompiers = await resp.json()
                        if (leaflet && map) {
                            for (let p of pompiers) {
                                let marker = leaflet.marker(p, {
                                    icon: firebrigadeIcon(),
                                })
                                marker
                                    .addTo(map)
                                    .bindPopup(
                                        `<b>${p.nom}</b>${p.telephone ? `<br/>Tél: ${p.telephone}` : ''}`
                                    )
                                    .on('mouseover', function () {
                                        marker.openPopup()
                                    })
                                    .on('mouseout', function () {
                                        marker.closePopup()
                                    })
                                pompierMarkers.push(marker)