feat(aep): carte AEP — push Gitea 2026-04-28
This commit is contained in:
Jules Neny
241
components/NavMap.vue
Normal file
241
components/NavMap.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<div class="relative w-full h-full">
|
||||
<div ref="mapContainer" class="w-full h-full rounded-none" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Map, Marker, DivIcon } from 'leaflet'
|
||||
|
||||
interface Org {
|
||||
Id: number
|
||||
nom: string
|
||||
latitude?: number | null
|
||||
longitude?: number | null
|
||||
echelle?: string
|
||||
tags_fonction?: string
|
||||
territoire?: string
|
||||
localisation_ville?: string
|
||||
url?: string
|
||||
prioritaire?: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
orgs: Org[]
|
||||
selectedId?: number | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'select-org': [id: number]
|
||||
}>()
|
||||
|
||||
const mapContainer = ref<HTMLElement | null>(null)
|
||||
let mapInstance: Map | null = null
|
||||
let clusterGroup: any = null
|
||||
const markers = new Map<number, Marker>()
|
||||
let tileLayerInstance: any = null
|
||||
|
||||
// Créer une DivIcon pour les pins personnalisés
|
||||
function createPinIcon(isPrioritaire: boolean, isSelected = false): DivIcon {
|
||||
const L = (window as any).L
|
||||
const bg = isPrioritaire ? '#f5b342' : 'rgba(26, 34, 56, 0.6)'
|
||||
const border = isPrioritaire ? '#1a2238' : '#ffffff'
|
||||
const size = isSelected ? 18 : 14
|
||||
const shadow = isSelected ? '0 0 0 4px rgba(245,179,66,0.5)' : 'none'
|
||||
|
||||
return L.divIcon({
|
||||
className: '',
|
||||
html: `<div style="
|
||||
width: ${size}px;
|
||||
height: ${size}px;
|
||||
border-radius: 50%;
|
||||
background: ${bg};
|
||||
border: 2px solid ${border};
|
||||
box-shadow: ${shadow};
|
||||
transition: all 0.2s;
|
||||
"></div>`,
|
||||
iconSize: [size, size],
|
||||
iconAnchor: [size / 2, size / 2],
|
||||
popupAnchor: [0, -(size / 2 + 4)],
|
||||
})
|
||||
}
|
||||
|
||||
async function initMap() {
|
||||
if (!mapContainer.value) return
|
||||
|
||||
const Lmod = await import('leaflet')
|
||||
const L: any = (Lmod as any).default || Lmod
|
||||
await import('leaflet/dist/leaflet.css')
|
||||
// @ts-ignore
|
||||
await import('leaflet.markercluster/dist/MarkerCluster.css')
|
||||
// @ts-ignore
|
||||
await import('leaflet.markercluster/dist/MarkerCluster.Default.css')
|
||||
|
||||
// Installer L globalement AVANT le plugin (markercluster lit window.L au load)
|
||||
;(window as any).L = L
|
||||
// @ts-ignore — étend L.MarkerClusterGroup en side effect
|
||||
await import('leaflet.markercluster')
|
||||
const MarkerClusterGroup = L.MarkerClusterGroup
|
||||
|
||||
mapInstance = L.map(mapContainer.value, {
|
||||
center: [46.6, 2.3],
|
||||
zoom: 6,
|
||||
zoomControl: true,
|
||||
attributionControl: true,
|
||||
maxBounds: [[41.0, -5.5], [51.5, 10.0]],
|
||||
maxBoundsViscosity: 1.0,
|
||||
minZoom: 5,
|
||||
maxZoom: 18,
|
||||
})
|
||||
|
||||
// Fond de carte CartoDB Positron (light ou dark selon theme)
|
||||
const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
|
||||
const tileUrl = isDark
|
||||
? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
|
||||
: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
|
||||
|
||||
tileLayerInstance = L.tileLayer(tileUrl, {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
|
||||
maxZoom: 19,
|
||||
})
|
||||
tileLayerInstance.addTo(mapInstance!)
|
||||
|
||||
// Cluster dès 15+ pins
|
||||
clusterGroup = new MarkerClusterGroup({
|
||||
disableClusteringAtZoom: 14,
|
||||
maxClusterRadius: 50,
|
||||
showCoverageOnHover: false,
|
||||
iconCreateFunction: (cluster: any) => {
|
||||
const count = cluster.getChildCount()
|
||||
return L.divIcon({
|
||||
html: `<div style="
|
||||
width: 36px; height: 36px; border-radius: 50%;
|
||||
background: var(--nav-primary);
|
||||
color: var(--nav-text-on-primary);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-weight: 700; font-size: 13px;
|
||||
border: 2px solid white;
|
||||
font-family: var(--nav-font);
|
||||
">${count}</div>`,
|
||||
className: '',
|
||||
iconSize: [36, 36],
|
||||
iconAnchor: [18, 18],
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
mapInstance.addLayer(clusterGroup)
|
||||
updateMarkers(L)
|
||||
}
|
||||
|
||||
function updateMarkers(L?: any) {
|
||||
if (!mapInstance || !clusterGroup) return
|
||||
const leaflet = L || (window as any).L
|
||||
if (!leaflet) return
|
||||
|
||||
// Clear existing
|
||||
clusterGroup.clearLayers()
|
||||
markers.clear()
|
||||
|
||||
const orgsWithCoords = props.orgs.filter(
|
||||
(o) => o.latitude != null && o.longitude != null
|
||||
)
|
||||
|
||||
orgsWithCoords.forEach((org) => {
|
||||
const isSelected = org.Id === props.selectedId
|
||||
const icon = createPinIcon(!!org.prioritaire, isSelected)
|
||||
|
||||
const marker = leaflet.marker([org.latitude!, org.longitude!], { icon })
|
||||
|
||||
const fonctions = org.tags_fonction
|
||||
? org.tags_fonction.split(',').map((f: string) => f.trim()).filter(Boolean).slice(0, 2).join(', ')
|
||||
: ''
|
||||
|
||||
marker.bindPopup(`
|
||||
<div style="font-family: var(--nav-font); min-width: 180px; padding: 4px 0;">
|
||||
<div style="font-weight: 700; color: var(--nav-text); margin-bottom: 4px;">${org.nom}</div>
|
||||
${org.echelle ? `<div style="font-size: 11px; color: var(--nav-text-muted);">${org.echelle}${org.localisation_ville ? ' · ' + org.localisation_ville : ''}</div>` : ''}
|
||||
${fonctions ? `<div style="font-size: 11px; color: var(--nav-text-muted); margin-top: 2px;">${fonctions}</div>` : ''}
|
||||
<a href="/fiche/${org.Id}" style="
|
||||
display: inline-block; margin-top: 8px; font-size: 12px;
|
||||
color: var(--nav-primary-solid); text-decoration: underline;
|
||||
">Voir la fiche →</a>
|
||||
</div>
|
||||
`, { maxWidth: 240 })
|
||||
|
||||
marker.on('click', () => emit('select-org', org.Id))
|
||||
|
||||
markers.set(org.Id, marker)
|
||||
clusterGroup.addLayer(marker)
|
||||
})
|
||||
}
|
||||
|
||||
// Réagir aux changements de filtres (liste d'orgs)
|
||||
watch(
|
||||
() => props.orgs,
|
||||
() => updateMarkers(),
|
||||
{ deep: false }
|
||||
)
|
||||
|
||||
// Réagir à la sélection
|
||||
watch(
|
||||
() => props.selectedId,
|
||||
(newId, oldId) => {
|
||||
if (!mapInstance) return
|
||||
const leaflet = (window as any).L
|
||||
if (!leaflet) return
|
||||
|
||||
// Remettre l'ancien marker à la normale
|
||||
if (oldId != null) {
|
||||
const oldMarker = markers.get(oldId)
|
||||
const oldOrg = props.orgs.find(o => o.Id === oldId)
|
||||
if (oldMarker && oldOrg) {
|
||||
oldMarker.setIcon(createPinIcon(!!oldOrg.prioritaire, false))
|
||||
}
|
||||
}
|
||||
// Mettre en avant le nouveau marker
|
||||
if (newId != null) {
|
||||
const newMarker = markers.get(newId)
|
||||
const newOrg = props.orgs.find(o => o.Id === newId)
|
||||
if (newMarker && newOrg) {
|
||||
newMarker.setIcon(createPinIcon(!!newOrg.prioritaire, true))
|
||||
// Centrer si visible
|
||||
const latLng = newMarker.getLatLng()
|
||||
mapInstance.panTo(latLng, { animate: true })
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// Watcher dark mode — switch tuile CartoDB light_all ↔ dark_all
|
||||
function updateTileTheme(dark: boolean) {
|
||||
if (!mapInstance || !tileLayerInstance) return
|
||||
const L = (window as any).L
|
||||
if (!L) return
|
||||
const url = dark
|
||||
? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
|
||||
: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
|
||||
tileLayerInstance.setUrl(url)
|
||||
}
|
||||
|
||||
let themeObserver: MutationObserver | null = null
|
||||
|
||||
onMounted(() => {
|
||||
initMap()
|
||||
|
||||
// Observer les changements de classe dark sur <html>
|
||||
themeObserver = new MutationObserver(() => {
|
||||
const dark = document.documentElement.classList.contains('dark')
|
||||
updateTileTheme(dark)
|
||||
})
|
||||
themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
themeObserver?.disconnect()
|
||||
if (mapInstance) {
|
||||
mapInstance.remove()
|
||||
mapInstance = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user