Add interactive map to visualize candidates provenance using Leaflet

2026-04-22 16:29:08 +02:00
parent 6f00da6d10
commit d076fd7d7a
6 changed files with 151 additions and 0 deletions
--- a/resources/js/Pages/Admin/Candidates/Map.vue
+++ b/resources/js/Pages/Admin/Candidates/Map.vue
@@ -0,0 +1,114 @@
+<script setup>
+import AdminLayout from '@/Layouts/AdminLayout.vue';
+import { Head } from '@inertiajs/vue3';
+import { onMounted, ref } from 'vue';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+
+// Fix for Leaflet default icons
+import icon from 'leaflet/dist/images/marker-icon.png';
+const DefaultIcon = L.icon({
+    iconUrl: icon,
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+    popupAnchor: [1, -34],
+    shadowSize: [41, 41]
+});
+L.Marker.prototype.options.icon = DefaultIcon;
+
+const props = defineProps({
+    candidates: Array
+});
+
+const mapContainer = ref(null);
+const isLoading = ref(true);
+const geocodedCount = ref(0);
+
+onMounted(async () => {
+    const map = L.map(mapContainer.value).setView([46.603354, 1.888334], 6); // Centered on France
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map);
+
+    const markers = [];
+
+    for (const candidate of props.candidates) {
+        if (!candidate.city) continue;
+
+        try {
+            // Rate limited geocoding (Nominatim allows 1 request/sec ideally)
+            const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(candidate.city)}&limit=1`);
+            const data = await response.json();
+
+            if (data && data.length > 0) {
+                const { lat, lon } = data[0];
+                const marker = L.marker([lat, lon]).addTo(map);
+                marker.bindPopup(`
+                    <div class="p-1">
+                        <p class="font-bold text-primary">${candidate.name}</p>
+                        <p class="text-xs text-slate-500">${candidate.city}</p>
+                        <p class="text-xs font-semibold mt-1">${candidate.job || 'Pas de poste'}</p>
+                        <p class="text-[10px] bg-indigo-50 text-indigo-600 px-1.5 py-0.5 rounded mt-1 inline-block">Score: ${candidate.score}/20</p>
+                    </div>
+                `);
+                markers.push(marker);
+                geocodedCount.value++;
+            }
+            
+            // Artificial delay to avoid being blocked by Nominatim
+            await new Promise(resolve => setTimeout(resolve, 800));
+        } catch (error) {
+            console.error(`Geocoding failed for ${candidate.city}:`, error);
+        }
+    }
+
+    if (markers.length > 0) {
+        const group = new L.featureGroup(markers);
+        map.fitBounds(group.getBounds().pad(0.1));
+    }
+    
+    isLoading.value = false;
+});
+</script>
+
+<template>
+    <Head title="Provenance des Candidats" />
+
+    <AdminLayout>
+        <template #header>
+            Carte de Provenance
+        </template>
+
+        <div class="mb-6 flex justify-between items-center">
+            <div>
+                <h3 class="text-2xl font-bold">Localisation des Candidats</h3>
+                <p class="text-sm text-slate-500 mt-1">
+                    Visualisez d'où viennent vos candidats sur la carte.
+                </p>
+            </div>
+            <div v-if="isLoading" class="flex items-center gap-2 text-indigo-600 font-bold text-sm bg-indigo-50 px-4 py-2 rounded-xl">
+                <svg class="animate-spin h-4 w-4" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                Geocodage en cours ({{ geocodedCount }}/{{ candidates.length }})...
+            </div>
+        </div>
+
+        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden">
+            <div ref="mapContainer" class="w-full h-[600px] z-10"></div>
+        </div>
+    </AdminLayout>
+</template>
+
+<style>
+/* Leaflet popup customization */
+.leaflet-popup-content-wrapper {
+    border-radius: 12px;
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+}
+.leaflet-popup-tip {
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+}
+</style>