up emojis

extractors/osm_cal.py

@@ -639,10 +639,15 @@ def submit_event(event):
             
             if event_id:
                 logger.success(f"Event created with ID: {event_id}")
+                logger.info(f" https://api.openeventdatabase.org/event/{event_id}")
                 return True
             else:
                 logger.warning(f"Event created but no ID returned in response")
                 return True
+        elif response.status_code == 409:
+            # 409 Conflict - L'événement existe déjà, considéré comme un succès
+            logger.success(f"Event already exists in database: {properties.get('label')} (HTTP 409)")
+            return True
         else:
             logger.warning(f"Failed to create event: {properties.get('label')}. Status code: {response.status_code}")
             logger.warning(f"Response: {response.text}")
@@ -739,6 +744,12 @@ def main(max_events=1, offset=0):
     success_count = 0
     for event_link in events_to_process:
         try:
+            # Vérifier si l'événement est déjà en succès (sécurité supplémentaire)
+            if event_cache.get(event_link, {}).get('status') == 'success':
+                logger.info(f"Événement déjà en succès, passage au suivant : {event_link}")
+                success_count += 1  # Compter comme succès puisqu'il est déjà traité
+                continue
+
             event_cache[event_link]['attempts'] += 1
             event_cache[event_link]['last_attempt'] = datetime.now().isoformat()
 
@@ -775,7 +786,36 @@ def main(max_events=1, offset=0):
     # Sauvegarder le cache mis à jour
     save_event_cache(event_cache)
 
+    # Calculer les statistiques finales du cache
+    cache_stats = {
+        'success': 0,
+        'pending': 0,
+        'failed': 0,
+        'error': 0,
+        'total': len(event_cache)
+    }
+
+    for link, data in event_cache.items():
+        status = data.get('status', 'pending')
+        if status in cache_stats:
+            cache_stats[status] += 1
+
+    # Événements en attente d'insertion (tous sauf success)
+    events_awaiting_insertion = cache_stats['pending'] + cache_stats['failed'] + cache_stats['error']
+
     logger.success(f"Traitement terminé : {success_count} événements insérés avec succès sur {len(events_to_process)} traités")
+    logger.info("=== STATISTIQUES GLOBALES DU CACHE ===")
+    logger.info(f"Total d'événements dans le cache : {cache_stats['total']}")
+    logger.info(f"Événements traités avec succès : {cache_stats['success']}")
+    logger.info(f"Événements en attente d'insertion : {events_awaiting_insertion}")
+    logger.info(f"  - Statut 'pending' : {cache_stats['pending']}")
+    logger.info(f"  - Statut 'failed' : {cache_stats['failed']}")
+    logger.info(f"  - Statut 'error' : {cache_stats['error']}")
+
+    if events_awaiting_insertion > 0:
+        logger.info(f"🔄 Il reste {events_awaiting_insertion} événements à traiter lors de la prochaine exécution")
+    else:
+        logger.success("✅ Tous les événements découverts ont été traités avec succès")
 
 def create_event_from_link(event_link):
     """

extractors/osmcal_debug.html

@@ -689,10 +689,10 @@
 				</span>
 			</a></li>
 			
-			<li class="event-list-entry"><a href="/event/4074/" class="event-list-entry-box">
+			<li class="event-list-entry"><a href="/event/3786/" class="event-list-entry-box">
 				<div class="event-entry-main">
-					<p class="event-entry-name">Mapathon Bliesgau, Saarpfalz-Kreis</p>
+					<p class="event-entry-name">OpenStreetMap Midwest Meetup</p>
-					<p class="event-entry-location">Homburg, Saarland, Germany</p>
+					<p class="event-entry-location">Ohio, United States</p>
 				</div>
 				<span class="event-entry-date">
 					
@@ -705,10 +705,10 @@
 				</span>
 			</a></li>
 			
-			<li class="event-list-entry"><a href="/event/3786/" class="event-list-entry-box">
+			<li class="event-list-entry"><a href="/event/4074/" class="event-list-entry-box">
 				<div class="event-entry-main">
-					<p class="event-entry-name">OpenStreetMap Midwest Meetup</p>
+					<p class="event-entry-name">Mapathon Bliesgau, Saarpfalz-Kreis</p>
-					<p class="event-entry-location">Ohio, United States</p>
+					<p class="event-entry-location">Homburg, Saarland, Germany</p>
 				</div>
 				<span class="event-entry-date">
 					
@@ -897,10 +897,10 @@
 				</span>
 			</a></li>
 			
-			<li class="event-list-entry"><a href="/event/4053/" class="event-list-entry-box">
+			<li class="event-list-entry"><a href="/event/3864/" class="event-list-entry-box">
 				<div class="event-entry-main">
-					<p class="event-entry-name">Open Transport Community Conference</p>
+					<p class="event-entry-name">Open Transport Community Conference (ÖBB)</p>
-					<p class="event-entry-location">Vienna, Austria</p>
+					
 				</div>
 				<span class="event-entry-date">
 					
@@ -913,10 +913,10 @@
 				</span>
 			</a></li>
 			
-			<li class="event-list-entry"><a href="/event/3864/" class="event-list-entry-box">
+			<li class="event-list-entry"><a href="/event/4053/" class="event-list-entry-box">
 				<div class="event-entry-main">
-					<p class="event-entry-name">Open Transport Community Conference (ÖBB)</p>
+					<p class="event-entry-name">Open Transport Community Conference</p>
-					
+					<p class="event-entry-location">Vienna, Austria</p>
 				</div>
 				<span class="event-entry-date">
 					
@@ -1057,7 +1057,7 @@
 				</span>
 			</a></li>
 			
-			<li class="event-list-entry"><a href="/event/3634/" class="event-list-entry-box">
+			<li class="event-list-entry"><a href="/event/3635/" class="event-list-entry-box">
 				<div class="event-entry-main">
 					<p class="event-entry-name">OSM-Stammtisch Hannover</p>
 					<p class="event-entry-location">Hanover, Lower Saxony, Germany</p>
@@ -1102,22 +1102,6 @@
 
 
 
-				</span>
-			</a></li>
-			
-			<li class="event-list-entry event-list-entry-cancelled"><a href="/event/3635/" class="event-list-entry-box">
-				<div class="event-entry-main">
-					<p class="event-entry-name">OSM-Stammtisch Hannover</p>
-					<p class="event-entry-location">Hanover, Lower Saxony, Germany</p>
-				</div>
-				<span class="event-entry-date">
-					
-
-	25th October
-
-
-
-
 				</span>
 			</a></li>
 			
@@ -1224,10 +1208,10 @@
 				</span>
 			</a></li>
 			
-			<li class="event-list-entry"><a href="/event/3738/" class="event-list-entry-box">
+			<li class="event-list-entry"><a href="/event/3991/" class="event-list-entry-box">
 				<div class="event-entry-main">
-					<p class="event-entry-name">Missing Maps London: (Online) Mapathon [eng]</p>
+					<p class="event-entry-name">East Midlands pub meet-up</p>
-					
+					<p class="event-entry-location">Derby, England, United Kingdom</p>
 				</div>
 				<span class="event-entry-date">
 					
@@ -1240,10 +1224,10 @@
 				</span>
 			</a></li>
 			
-			<li class="event-list-entry"><a href="/event/3991/" class="event-list-entry-box">
+			<li class="event-list-entry"><a href="/event/3738/" class="event-list-entry-box">
 				<div class="event-entry-main">
-					<p class="event-entry-name">East Midlands pub meet-up</p>
+					<p class="event-entry-name">Missing Maps London: (Online) Mapathon [eng]</p>
-					<p class="event-entry-location">Derby, England, United Kingdom</p>
+					
 				</div>
 				<span class="event-entry-date">
 					
@@ -1679,10 +1663,10 @@
 				</span>
 			</a></li>
 			
-			<li class="event-list-entry"><a href="/event/3789/" class="event-list-entry-box">
+			<li class="event-list-entry"><a href="/event/4026/" class="event-list-entry-box">
 				<div class="event-entry-main">
-					<p class="event-entry-name">OpenStreetMap Midwest Meetup</p>
+					<p class="event-entry-name">Münchner OSM-Treffen</p>
-					<p class="event-entry-location">Ohio, United States</p>
+					<p class="event-entry-location">Munich, Bavaria, Germany</p>
 				</div>
 				<span class="event-entry-date">
 					
@@ -1695,10 +1679,10 @@
 				</span>
 			</a></li>
 			
-			<li class="event-list-entry"><a href="/event/4026/" class="event-list-entry-box">
+			<li class="event-list-entry"><a href="/event/3789/" class="event-list-entry-box">
 				<div class="event-entry-main">
-					<p class="event-entry-name">Münchner OSM-Treffen</p>
+					<p class="event-entry-name">OpenStreetMap Midwest Meetup</p>
-					<p class="event-entry-location">Munich, Bavaria, Germany</p>
+					<p class="event-entry-location">Ohio, United States</p>
 				</div>
 				<span class="event-entry-date">
 					

oedb/resources/demo/demo_main.py

@@ -221,6 +221,51 @@ class DemoMainResource:
                         background-color: #0056b3;
                         text-decoration: none;
                     }
+
+                    /* Styles pour les marqueurs personnalisés avec forme de goutte */
+                    .custom-marker {
+                        cursor: pointer;
+                        user-select: none;
+                    }
+
+                    .marker-drop {
+                        width: 36px;
+                        height: 46px;
+                        position: relative;
+                        background: #fff;
+                        border-radius: 50% 50% 50% 0;
+                        transform: rotate(-45deg);
+                        filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                    }
+
+                    .marker-drop:after {
+                        content: '';
+                        width: 8px;
+                        height: 8px;
+                        position: absolute;
+                        background: white;
+                        border-radius: 50%;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                        z-index: 1;
+                    }
+
+                    .marker-emoji {
+                        font-size: 18px;
+                        transform: rotate(45deg);
+                        z-index: 2;
+                        position: relative;
+                        line-height: 1;
+                    }
+
+                    .custom-marker:hover .marker-drop {
+                        transform: rotate(-45deg) scale(1.1);
+                        transition: transform 0.2s ease;
+                    }
                 </style>
             </head>
             <body>
@@ -287,6 +332,63 @@ class DemoMainResource:
                 </div>
                 
                 <script>
+                    // Configuration des critères d'emojis pour les marqueurs de carte
+                    window.EMOJI_CRITERIA = {
+                        // Emoji mammouth pour les événements contenant "mammouth"
+                        mammoth: {
+                            emoji: '🦣',
+                            criteria: (name, description, what) => {
+                                const text = (name + ' ' + description).toLowerCase();
+                                return text.includes('mammouth');
+                            }
+                        },
+                        // Emoji notes de musique pour orchestres, concerts, fanfares ou types musicaux
+                        music: {
+                            emoji: '🎵',
+                            criteria: (name, description, what) => {
+                                const text = (name + ' ' + description + ' ' + what).toLowerCase();
+                                return text.includes('orchestr') || text.includes('concert') || 
+                                       text.includes('fanfare') || text.includes('music');
+                            }
+                        },
+                        // Emoji éclair pour les types contenant "power"
+                        power: {
+                            emoji: '⚡',
+                            criteria: (name, description, what) => {
+                                return (what || '').toLowerCase().includes('power');
+                            }
+                        },
+                        // Emoji vélo pour les types contenant "bike"
+                        bike: {
+                            emoji: '🚴',
+                            criteria: (name, description, what) => {
+                                return (what || '').toLowerCase().includes('bike');
+                            }
+                        }
+                    };
+
+                    // Fonction pour déterminer l'emoji approprié pour un événement
+                    function getEventEmoji(properties) {
+                        const name = properties.name || properties.label || '';
+                        const description = properties.description || '';
+                        const what = properties.what || '';
+
+                        // Parcourir les critères dans l'ordre de priorité
+                        for (const [key, config] of Object.entries(window.EMOJI_CRITERIA)) {
+                            if (config.criteria(name, description, what)) {
+                                return config.emoji;
+                            }
+                        }
+
+                        // Emoji par défaut selon le type d'événement
+                        if (what.includes('traffic')) return '🚗';
+                        if (what.includes('weather')) return '🌤️';
+                        if (what.includes('gathering')) return '👥';
+                        if (what.includes('incident')) return '⚠️';
+
+                        return '📍'; // Emoji par défaut
+                    }
+
                     // Fonction pour gérer les listes dépliantes et sections collapsibles
                     document.addEventListener('DOMContentLoaded', function() {
                         const filtersPanel = document.getElementById('filters_panel');
@@ -327,27 +429,16 @@ class DemoMainResource:
                         if (!geojsonData || !geojsonData.features) return;
 
                         geojsonData.features.forEach(feature => {
-                            // Créer un élément HTML pour le marqueur
+                            // Créer un élément HTML pour le marqueur avec emoji et forme de goutte
                             const el = document.createElement('div');
-                            el.className = 'event-marker';
+                            el.className = 'custom-marker';
-                            el.style.width = '20px';
-                            el.style.height = '20px';
-                            el.style.borderRadius = '50%';
 
-                            // Déterminer la couleur selon le type d'événement
+                            // Créer la forme de goutte en arrière-plan
-                            let color = '#0078ff';
+                            el.innerHTML = `
-                            const eventType = feature.properties.what;
+                                <div class="marker-drop">
-                            if (eventType) {
+                                    <div class="marker-emoji">${getEventEmoji(feature.properties)}</div>
-                                if (eventType.includes('traffic')) color = '#F44336';
+                                </div>
-                                else if (eventType.includes('weather')) color = '#4CAF50';
+                            `;
-                                else if (eventType.includes('gathering')) color = '#FF9800';
-                                else if (eventType.includes('incident')) color = '#9C27B0';
-                            }
-
-                            el.style.backgroundColor = color;
-                            el.style.border = '2px solid white';
-                            el.style.boxShadow = '0 0 5px rgba(0,0,0,0.3)';
-                            el.style.cursor = 'pointer';
 
                             // Créer le contenu de la popup
                             const popupContent = createEventPopupContent(feature);
@@ -399,6 +490,29 @@ class DemoMainResource:
                         }
                     }
 
+                    // Fonction pour lire les paramètres de requête
+                    function getUrlParams() {
+                        const params = new URLSearchParams(window.location.search);
+                        return {
+                            lat: params.get('lat'),
+                            lon: params.get('lon'),
+                            zoom: params.get('zoom')
+                        };
+                    }
+
+                    // Fonction pour mettre à jour l'URL avec les paramètres de position de la carte
+                    function updateUrlParams(lat, lon, zoom) {
+                        const url = new URL(window.location);
+                        url.searchParams.set('lat', lat.toFixed(6));
+                        url.searchParams.set('lon', lon.toFixed(6));
+                        url.searchParams.set('zoom', zoom.toFixed(2));
+                        window.history.replaceState(null, '', url);
+                    }
+
+                    // Vérifier si des paramètres de position sont présents dans l'URL
+                    const urlParams = getUrlParams();
+                    const hasPositionParams = urlParams.lat && urlParams.lon && urlParams.zoom;
+
                     // Map style URLs
                     const mapStyles = {
                         default: 'https://tiles.openfreemap.org/styles/liberty',
@@ -427,12 +541,22 @@ class DemoMainResource:
                         }
                     };
                     
+                    // Déterminer le centre et le zoom initial
+                    let initialCenter = [2.3522, 48.8566]; // Default center (Paris)
+                    let initialZoom = 4;
+
+                    if (hasPositionParams) {
+                        initialCenter = [parseFloat(urlParams.lon), parseFloat(urlParams.lat)];
+                        initialZoom = parseFloat(urlParams.zoom);
+                        console.log(`📍 Position depuis l'URL: lat=${urlParams.lat}, lon=${urlParams.lon}, zoom=${urlParams.zoom}`);
+                    }
+
                     // Initialize the map with default style
                     const map = new maplibregl.Map({
                         container: 'map',
                         style: mapStyles.default,
-                        center: [2.3522, 48.8566], // Default center (Paris)
+                        center: initialCenter,
-                        zoom: 4
+                        zoom: initialZoom
                     });
                     
                     // Add navigation controls
@@ -451,6 +575,18 @@ class DemoMainResource:
                     map.addControl(new maplibregl.AttributionControl({
                         customAttribution: '© <a href="https://www.openstreetmap.org/copyright" >OpenStreetMap</a> contributors'
                     }));
+
+                    // Ajouter un listener pour mettre à jour l'URL quand la carte bouge
+                    let updateUrlTimeout;
+                    map.on('moveend', function() {
+                        // Utiliser un timeout pour éviter de trop nombreuses mises à jour
+                        clearTimeout(updateUrlTimeout);
+                        updateUrlTimeout = setTimeout(() => {
+                            const center = map.getCenter();
+                            const zoom = map.getZoom();
+                            updateUrlParams(center.lat, center.lng, zoom);
+                        }, 300); // Attendre 300ms après la fin du mouvement
+                    });
                     
                     // Style switcher functionality
                     let currentStyle = 'default';
@@ -743,12 +879,16 @@ class DemoMainResource:
                                 iconColor = '#23d160'; // Green
                             }
                             
-                            // Create custom HTML element for marker
+                            // Create custom HTML element for marker with emoji and drop shape
                             const el = document.createElement('div');
-                            el.className = 'marker';
+                            el.className = 'custom-marker';
-                            el.innerHTML = `<span class="icon" style="background-color: white; border-radius: 50%; padding: 8px; box-shadow: 0 0 5px rgba(0,0,0,0.3);">
+
-                                <i class="fas fa-${iconClass}" style="color: ${iconColor}; font-size: 16px;"></i>
+                            // Créer la forme de goutte en arrière-plan avec emoji
-                            </span>`;
+                            el.innerHTML = `
+                                <div class="marker-drop">
+                                    <div class="marker-emoji">${getEventEmoji(properties)}</div>
+                                </div>
+                            `;
                             
                             // Add marker with popup and store reference
                             const marker = new maplibregl.Marker(el)

oedb/resources/demo/static/demo_styles.css

@@ -517,9 +517,9 @@ button:hover {
 }
 
 #report_issue_button{
-    position: fixed;
+    /*position: fixed;*/
-    bottom: 0.5rem;
+    /*bottom: 0.5rem;*/
-    right: 0.5rem;
+    /*right: 0.5rem;*/
     padding: 2rem 1rem;
 }
 
@@ -634,4 +634,8 @@ button{
 
 .maplibregl-ctrl-attrib + .maplibregl-ctrl-attrib {
     display: none;
+}
+
+.icon{
+    /*background-color: white; border-radius: 50%; padding: 8px; box-shadow: 0 0 5px rgba(0,0,0,0.3);*/
 }

oedb/resources/demo/static/edit.js

@@ -1,3 +1,7 @@
+
+// Variable globale pour les données de l'événement
+let eventData = null
+
 // Initialize the map
 const map = new maplibregl.Map({
     container: 'map',
@@ -18,9 +22,7 @@ map.addControl(new maplibregl.AttributionControl({
 let marker = new maplibregl.Marker({
     draggable: true
 });
-
+;
-// Variable globale pour les données de l'événement
-let eventData = null;
 
 // Function to populate form with event data
 function populateForm() {

oedb/resources/demo/templates/traffic_new.html

@@ -247,12 +247,12 @@
         </div>
     </div>
     
-    <div class="form-group">
+<!--    <div class="form-group">-->
-        <label for="photo">Photos</label>
+<!--        <label for="photo">Photos</label>-->
-        <input type="file" id="photo" name="photo" accept="image/*" multiple>
+<!--        <input type="file" id="photo" name="photo" accept="image/*" multiple>-->
-        <div class="note">Vous pouvez ajouter plusieurs photos (optionnel)</div>
+<!--        <div class="note">Vous pouvez ajouter plusieurs photos (optionnel)</div>-->
-        <div id="photoPreview" class="photo-preview-container"></div>
+<!--        <div id="photoPreview" class="photo-preview-container"></div>-->
-    </div>
+<!--    </div>-->
     
     <div class="form-group">
         <label class="required">Localisation</label>

static/map_by_what.css

@@ -0,0 +1,148 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+}
+
+#map {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+}
+
+.map-overlay {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background: rgba(255, 255, 255, 0.9);
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    max-width: 300px;
+    z-index: 1;
+}
+
+.filter-overlay {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: rgba(255, 255, 255, 0.95);
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    max-width: 250px;
+    max-height: 80vh;
+    overflow-y: auto;
+    z-index: 1;
+}
+
+.filter-overlay h3 {
+    margin-top: 0;
+    color: #0078ff;
+}
+
+.filter-overlay button {
+    margin: 5px 5px 10px 0;
+    padding: 5px 10px;
+    background: #0078ff;
+    color: white;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 12px;
+}
+
+.filter-overlay button:hover {
+    background: #0056b3;
+}
+
+.filter-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.filter-list li {
+    margin-bottom: 8px;
+}
+
+.filter-list input[type="checkbox"] {
+    margin-right: 8px;
+}
+
+.filter-list label {
+    cursor: pointer;
+    font-size: 14px;
+}
+
+/* Styles pour les marqueurs personnalisés avec forme de goutte */
+.custom-marker {
+    cursor: pointer;
+    user-select: none;
+}
+
+.marker-drop {
+    width: 36px;
+    height: 46px;
+    position: relative;
+    background: #0078ff;
+    border-radius: 50% 50% 50% 0;
+    transform: rotate(-45deg);
+    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.marker-drop:after {
+    content: '';
+    width: 8px;
+    height: 8px;
+    position: absolute;
+    background: white;
+    border-radius: 50%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+}
+
+.marker-emoji {
+    font-size: 18px;
+    transform: rotate(45deg);
+    z-index: 2;
+    position: relative;
+    line-height: 1;
+}
+
+.custom-marker:hover .marker-drop {
+    transform: rotate(-45deg) scale(1.1);
+    transition: transform 0.2s ease;
+}
+
+.event-popup {
+    max-width: 300px;
+}
+
+.event-popup h3 {
+    margin-top: 0;
+    color: #0078ff;
+}
+
+.event-popup p {
+    margin: 8px 0;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .map-overlay, .filter-overlay {
+        position: static;
+        max-width: none;
+        margin-bottom: 10px;
+    }
+
+    .filter-overlay {
+        max-height: 200px;
+    }
+}

static/map_by_what.js

@@ -0,0 +1,260 @@
+// Configuration des critères d'emojis pour les marqueurs de carte
+window.EMOJI_CRITERIA = {
+    // Emoji mammouth pour les événements contenant "mammouth"
+    mammoth: {
+        emoji: '🦣',
+        criteria: (name, description, what) => {
+            const text = (name + ' ' + description).toLowerCase();
+            return text.includes('mammouth');
+        }
+    },
+    // Emoji notes de musique pour orchestres, concerts, fanfares ou types musicaux
+    music: {
+        emoji: '🎵',
+        criteria: (name, description, what) => {
+            const text = (name + ' ' + description + ' ' + what).toLowerCase();
+            return text.includes('orchestr') || text.includes('concert') || 
+                   text.includes('fanfare') || text.includes('music');
+        }
+    },
+    // Emoji éclair pour les types contenant "power"
+    power: {
+        emoji: '⚡',
+        criteria: (name, description, what) => {
+            return (what || '').toLowerCase().includes('power');
+        }
+    },
+    // Emoji vélo pour les types contenant "bike"
+    bike: {
+        emoji: '🚴',
+        criteria: (name, description, what) => {
+            return (what || '').toLowerCase().includes('bike');
+        }
+    }
+};
+
+// Fonction pour déterminer l'emoji approprié pour un événement
+function getEventEmoji(properties) {
+    const name = properties.name || properties.label || '';
+    const description = properties.description || '';
+    const what = properties.what || '';
+
+    // Parcourir les critères dans l'ordre de priorité
+    for (const [key, config] of Object.entries(window.EMOJI_CRITERIA)) {
+        if (config.criteria(name, description, what)) {
+            return config.emoji;
+        }
+    }
+
+    // Emoji par défaut selon le type d'événement
+    if (what.includes('traffic')) return '🚗';
+    if (what.includes('weather')) return '🌤️';
+    if (what.includes('gathering')) return '👥';
+    if (what.includes('incident')) return '⚠️';
+
+    return ' '; // Emoji par défaut
+}
+
+// Variables globales
+let map;
+let eventMarkers = [];
+let eventTypeCounts = {};
+let allEvents = [];
+
+// Initialisation de la carte
+document.addEventListener('DOMContentLoaded', function() {
+    initMap();
+    loadEvents();
+});
+
+function initMap() {
+    // Initialiser la carte MapLibre
+    map = new maplibregl.Map({
+        container: 'map',
+        style: 'https://tiles.openfreemap.org/styles/liberty',
+        center: [2.3522, 48.8566], // Paris par défaut
+        zoom: 4
+    });
+
+    // Ajouter les contrôles de navigation
+    map.addControl(new maplibregl.NavigationControl());
+
+    // Ajouter le contrôle de géolocalisation
+    map.addControl(new maplibregl.GeolocateControl({
+        positionOptions: {
+            enableHighAccuracy: true
+        },
+        trackUserLocation: true,
+        showUserHeading: true
+    }));
+}
+
+function loadEvents() {
+    fetch('https://api.openeventdatabase.org/event?')
+        .then(response => response.json())
+        .then(data => {
+            if (data.features && data.features.length > 0) {
+                allEvents = data.features;
+                processEvents();
+                createEventTypeFilters();
+                addEventsToMap();
+                updateEventInfo();
+            } else {
+                document.getElementById('event-info').innerHTML = '<p>No events found</p>';
+            }
+        })
+        .catch(error => {
+            console.error('Error loading events:', error);
+            document.getElementById('event-info').innerHTML = '<p>Error loading events</p>';
+        });
+}
+
+function processEvents() {
+    eventTypeCounts = {};
+    allEvents.forEach(event => {
+        const eventType = event.properties.what || 'unknown';
+        eventTypeCounts[eventType] = (eventTypeCounts[eventType] || 0) + 1;
+    });
+}
+
+function createEventTypeFilters() {
+    const filterList = document.getElementById('filter-list');
+    filterList.innerHTML = '';
+
+    const sortedTypes = Object.keys(eventTypeCounts).sort();
+
+    sortedTypes.forEach(eventType => {
+        const count = eventTypeCounts[eventType];
+        const li = document.createElement('li');
+
+        const checkbox = document.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.id = `filter-${eventType}`;
+        checkbox.checked = true;
+        checkbox.addEventListener('change', filterEvents);
+
+        const label = document.createElement('label');
+        label.htmlFor = `filter-${eventType}`;
+        label.textContent = `${eventType} (${count})`;
+
+        li.appendChild(checkbox);
+        li.appendChild(label);
+        filterList.appendChild(li);
+    });
+
+    // Boutons de sélection
+    document.getElementById('select-all').addEventListener('click', () => {
+        document.querySelectorAll('#filter-list input[type="checkbox"]').forEach(cb => {
+            cb.checked = true;
+        });
+        filterEvents();
+    });
+
+    document.getElementById('deselect-all').addEventListener('click', () => {
+        document.querySelectorAll('#filter-list input[type="checkbox"]').forEach(cb => {
+            cb.checked = false;
+        });
+        filterEvents();
+    });
+}
+
+function addEventsToMap() {
+    // Supprimer les marqueurs existants
+    eventMarkers.forEach(marker => marker.remove());
+    eventMarkers = [];
+
+    // Ajouter les nouveaux marqueurs avec emojis
+    allEvents.forEach(event => {
+        const coordinates = event.geometry.coordinates;
+        const properties = event.properties;
+
+        // Créer l'élément marqueur avec emoji et forme de goutte
+        const el = document.createElement('div');
+        el.className = 'custom-marker';
+
+        // Créer la forme de goutte en arrière-plan avec emoji
+        el.innerHTML = `
+            <div class="marker-drop">
+                <div class="marker-emoji">${getEventEmoji(properties)}</div>
+            </div>
+        `;
+
+        // Créer le contenu de la popup
+        const popupContent = createPopupContent(properties);
+
+        // Créer la popup
+        const popup = new maplibregl.Popup({
+            closeButton: true,
+            closeOnClick: true
+        }).setHTML(popupContent);
+
+        // Créer et ajouter le marqueur
+        const marker = new maplibregl.Marker(el)
+            .setLngLat(coordinates)
+            .setPopup(popup)
+            .addTo(map);
+
+        eventMarkers.push({
+            marker: marker,
+            eventType: properties.what || 'unknown',
+            element: el
+        });
+    });
+
+    // Ajuster la vue pour inclure tous les événements
+    if (allEvents.length > 0) {
+        const bounds = new maplibregl.LngLatBounds();
+        allEvents.forEach(event => {
+            bounds.extend(event.geometry.coordinates);
+        });
+        map.fitBounds(bounds, { padding: 50, maxZoom: 12 });
+    }
+}
+
+function createPopupContent(properties) {
+    const title = properties.label || properties.name || 'Événement';
+    const what = properties.what || 'Non spécifié';
+    const description = properties.description || 'Aucune description disponible';
+
+    return `
+        <div class="event-popup">
+            <h3 style="margin-top: 0; color: #0078ff;">${title}</h3>
+            <p><strong>Type:</strong> ${what}</p>
+            <p><strong>Description:</strong> ${description}</p>
+            ${properties.id ? `<p><a href="/demo/edit/${properties.id}" style="color: #0078ff; font-weight: bold;">Modifier</a></p>` : ''}
+        </div>
+    `;
+}
+
+function filterEvents() {
+    const checkedTypes = Array.from(
+        document.querySelectorAll('#filter-list input[type="checkbox"]:checked')
+    ).map(cb => cb.id.replace('filter-', ''));
+
+    eventMarkers.forEach(({ marker, eventType, element }) => {
+        if (checkedTypes.includes(eventType)) {
+            element.style.display = 'block';
+        } else {
+            element.style.display = 'none';
+        }
+    });
+
+    updateEventInfo();
+}
+
+function updateEventInfo() {
+    const checkedTypes = Array.from(
+        document.querySelectorAll('#filter-list input[type="checkbox"]:checked')
+    ).map(cb => cb.id.replace('filter-', ''));
+
+    const visibleCount = checkedTypes.reduce((sum, type) => {
+        return sum + (eventTypeCounts[type] || 0);
+    }, 0);
+
+    const totalCount = allEvents.length;
+
+    document.getElementById('event-info').innerHTML = `
+        <p>Showing ${visibleCount} of ${totalCount} events</p>
+        <p>Event types: ${checkedTypes.length} selected</p>
+    `;
+}