nav-carte/components/NavMapV2.vue

<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'
import type { StructureV2 } from '~/types/structure-v2'

// Couleurs par famille (synchronisées avec v2-bifurcation.css)
const FAMILLE_COLORS: Record<number, string> = {
  1: '#a85d3e',
  2: '#c4a472',
  3: '#d4a017',
  4: '#5a7a4a',
  5: '#3d6a8c',
}

const props = defineProps<{
  structures: StructureV2[]
  selectedId?: string | null
}>()

const emit = defineEmits<{
  'select-structure': [id: string]
}>()

const mapContainer = ref<HTMLElement | null>(null)
let mapInstance: Map | null = null
let clusterGroup: any = null
const markers = new Map<string, Marker>()
let tileLayerInstance: any = null

function getFamilleColor(famille: number): string {
  return FAMILLE_COLORS[famille] ?? '#888888'
}

function createPinIcon(famille: number, isSelected = false): DivIcon {
  const L = (window as any).L
  const bg = getFamilleColor(famille)
  const size = isSelected ? 20 : 14
  const border = isSelected ? 'white' : 'rgba(255,255,255,0.7)'
  const shadow = isSelected ? `0 0 0 4px ${bg}55` : '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
  ;(window as any).L = L
  // @ts-ignore
  await import('leaflet.markercluster')
  const MarkerClusterGroup = L.MarkerClusterGroup

  mapInstance = L.map(mapContainer.value, {
    center: [46.6, 2.3],
    zoom: 5,
    zoomControl: true,
    attributionControl: true,
    minZoom: 2,
    maxZoom: 18,
  })

  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!)

  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

  clusterGroup.clearLayers()
  markers.clear()

  const structuresWithCoords = props.structures.filter(
    (s) => s.latitude != null && s.longitude != null
  )

  structuresWithCoords.forEach((structure) => {
    const isSelected = structure.id === props.selectedId
    const icon = createPinIcon(structure.famille_principale, isSelected)

    const marker = leaflet.marker([structure.latitude!, structure.longitude!], { icon })

    const hashtagsHtml = structure.hashtags.slice(0, 2)
      .map(h => `<span style="font-size:10px;color:var(--nav-text-muted);">${h}</span>`)
      .join(' ')

    marker.bindPopup(`
      <div style="font-family: var(--nav-font); min-width: 190px; padding: 4px 0;">
        <div style="font-weight: 700; color: var(--nav-text); margin-bottom: 2px; font-size: 0.9rem;">${structure.nom}</div>
        <div style="font-size: 11px; color: var(--nav-text-muted); margin-bottom: 4px;">${structure.type_principal} · ${structure.ville}, ${structure.pays}</div>
        ${hashtagsHtml ? `<div style="margin-bottom: 6px;">${hashtagsHtml}</div>` : ''}
        <div style="font-size: 11px; color: var(--nav-text); line-height: 1.4; margin-bottom: 8px;">${structure.description_courte.slice(0, 100)}…</div>
        <button onclick="document.dispatchEvent(new CustomEvent('nav-v2-select', {detail:'${structure.id}'}))" style="
          font-size: 12px;
          color: var(--nav-primary-solid);
          text-decoration: underline;
          background: none;
          border: none;
          cursor: pointer;
          padding: 0;
          font-family: var(--nav-font);
        ">Voir la fiche →</button>
      </div>
    `, { maxWidth: 260 })

    marker.on('click', () => emit('select-structure', structure.id))

    markers.set(structure.id, marker)
    clusterGroup.addLayer(marker)
  })
}

// Ecouter l'event custom depuis les popups Leaflet
function onNavV2Select(e: CustomEvent) {
  emit('select-structure', e.detail)
}

watch(
  () => props.structures,
  () => updateMarkers(),
  { deep: false }
)

watch(
  () => props.selectedId,
  (newId, oldId) => {
    if (!mapInstance) return
    const leaflet = (window as any).L
    if (!leaflet) return

    if (oldId != null) {
      const oldMarker = markers.get(oldId)
      const oldStructure = props.structures.find(s => s.id === oldId)
      if (oldMarker && oldStructure) {
        oldMarker.setIcon(createPinIcon(oldStructure.famille_principale, false))
      }
    }
    if (newId != null) {
      const newMarker = markers.get(newId)
      const newStructure = props.structures.find(s => s.id === newId)
      if (newMarker && newStructure) {
        newMarker.setIcon(createPinIcon(newStructure.famille_principale, true))
        const latLng = newMarker.getLatLng()
        mapInstance.panTo(latLng, { animate: true })
      }
    }
  }
)

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()
  document.addEventListener('nav-v2-select', onNavV2Select as EventListener)

  themeObserver = new MutationObserver(() => {
    const dark = document.documentElement.classList.contains('dark')
    updateTileTheme(dark)
  })
  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
})

onUnmounted(() => {
  document.removeEventListener('nav-v2-select', onNavV2Select as EventListener)
  themeObserver?.disconnect()
  if (mapInstance) {
    mapInstance.remove()
    mapInstance = null
  }
})
</script>