feat: implement internationalized map picker with user geolocation

- Add map picker modal with translations (EN/FR)
- Implement user geolocation with "Locate Me" button
- Fix HTMX form integration for proper state transitions
- Remove deprecated geocoding code and eliminate warnings
- Fix map style CORS issues and maintain midnight glass theme

i18n/en-us/forms.ftl

···
 button-back = Back
 button-add-location = Add location
 
+# Map modal
+map-modal-default-title = Location
+button-open-in-openstreetmap = Open in OpenStreetMap
+
+# Map picker modal
+map-picker-modal-title = Choose Location on Map
+map-picker-instructions = Click on the map to select a location
+button-use-location = Use This Location
+
+# Geolocation for map picker
+button-locate-me = Locate Me
+locating-user = Locating your position...
+location-error = Unable to access your location
+location-permission-denied = Location access denied
+
+
 

i18n/fr-ca/forms.ftl

···
 title-manual-location-entry = Saisie manuelle du lieu
 select-country = Sélectionner un pays
 button-back = Retour
-button-add-location = Ajouter un lieu
+button-add-location = Ajouter un lieu
+
+# Map modal
+map-modal-default-title = Lieu
+button-open-in-openstreetmap = Ouvrir dans OpenStreetMap
+
+# Map picker modal
+map-picker-modal-title = Choisir un lieu sur la carte
+map-picker-instructions = Cliquez sur la carte pour sélectionner un lieu
+button-use-location = Utiliser ce lieu
+
+# Geolocation for map picker
+button-locate-me = Me localiser
+locating-user = Localisation en cours...
+location-error = Impossible d'accéder à votre position
+location-permission-denied = Accès à la localisation refusé

static/location-map-viewer.js

···
     }
 
     openFullMap(lat, lng, venueName) {
-        // Open in external map application
-        const url = `https://maps.google.com/?q=${lat},${lng}`;
-        window.open(url, '_blank', 'noopener');
+        // Get translations from body data attributes
+        const defaultTitle = document.body.dataset.i18nMapDefaultTitle || 'Location';
+        const closeText = document.body.dataset.i18nClose || 'Close';
+        const openMapText = document.body.dataset.i18nOpenOpenstreetmap || 'Open in OpenStreetMap';
+        
+        // Create modal for full map view
+        const modal = document.createElement('div');
+        modal.className = 'modal is-active';
+        modal.innerHTML = `
+            <div class="modal-background" onclick="this.parentElement.remove()"></div>
+            <div class="modal-content">
+                <div class="box">
+                    <h3 class="title is-4">${venueName || defaultTitle}</h3>
+                    <div id="full-map-${Date.now()}" style="height: 400px; width: 100%;"></div>
+                    <div class="mt-4">
+                        <button class="button" onclick="this.closest('.modal').remove()">${closeText}</button>
+                        <a href="https://www.openstreetmap.org/?mlat=${lat}&mlon=${lng}&zoom=16" 
+                           target="_blank" class="button is-info">
+                            <span class="icon"><i class="fas fa-external-link-alt"></i></span>
+                            <span>${openMapText}</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <button class="modal-close is-large" onclick="this.parentElement.remove()"></button>
+        `;
+        
+        document.body.appendChild(modal);
+        
+        // Initialize full map
+        const mapId = modal.querySelector('[id^="full-map-"]').id;
+        setTimeout(() => {
+            if (typeof maplibregl !== 'undefined') {
+                try {
+                    const fullMap = new maplibregl.Map({
+                        container: mapId,
+                        style: {
+                            version: 8,
+                            sources: {
+                                'osm': {
+                                    type: 'raster',
+                                    tiles: [
+                                        'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
+                                        'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png',
+                                        'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png'
+                                    ],
+                                    tileSize: 256,
+                                    attribution: '© OpenStreetMap contributors'
+                                }
+                            },
+                            layers: [
+                                {
+                                    id: 'osm',
+                                    type: 'raster',
+                                    source: 'osm'
+                                }
+                            ]
+                        },
+                        center: [lng, lat],
+                        zoom: 16,
+                        attributionControl: true
+                    });
+
+                    new maplibregl.Marker({
+                        color: '#7877c6'
+                    })
+                        .setLngLat([lng, lat])
+                        .addTo(fullMap);
+
+                    // Apply midnight glass theme
+                    fullMap.on('load', () => {
+                        this.applyMidnightGlassTheme(fullMap);
+                    });
+                } catch (error) {
+                    console.error('Error creating full map:', error);
+                }
+            }
+        }, 100);
     }
 
     hideLoading() {
···
             }
         });
     }
+}
+
+// Export for global access
+window.MiniMapViewer = MiniMapViewer;
+
+// Global map picker function for location forms
+window.openMapPicker = function() {
+    // Get translations from body data attributes
+    const pickerTitle = document.body.dataset.i18nMapPickerTitle || 'Choose Location on Map';
+    const pickerInstructions = document.body.dataset.i18nMapPickerInstructions || 'Click on the map to select a location';
+    const useLocationText = document.body.dataset.i18nUseLocation || 'Use This Location';
+    const closeText = document.body.dataset.i18nClose || 'Close';
+    const locateMeText = document.body.dataset.i18nLocateMe || 'Locate Me';
+    const locatingUserText = document.body.dataset.i18nLocatingUser || 'Locating your position...';
+    const locationErrorText = document.body.dataset.i18nLocationError || 'Unable to access your location';
+    const locationPermissionDeniedText = document.body.dataset.i18nLocationPermissionDenied || 'Location access denied';
+
+    // Create modal for map picker
+    const modal = document.createElement('div');
+    modal.className = 'modal is-active';
+    modal.id = 'map-picker-modal';
+    
+    const mapId = 'map-picker-' + Date.now();
+    modal.innerHTML = `
+        <div class="modal-background" onclick="closeMapPicker()"></div>
+        <div class="modal-content">
+            <div class="box">
+                <h3 class="title is-4">${pickerTitle}</h3>
+                <p class="subtitle is-6">${pickerInstructions}</p>
+                <div class="mb-3">
+                    <button class="button is-info is-small" id="locate-me-btn" onclick="locateUser()">
+                        <span class="icon">
+                            <i class="fas fa-location-arrow"></i>
+                        </span>
+                        <span>${locateMeText}</span>
+                    </button>
+                    <div id="location-status" class="help" style="display: none;"></div>
+                </div>
+                <div id="${mapId}" style="height: 400px; width: 100%; cursor: crosshair;"></div>
+                <div class="mt-4 is-flex is-justify-content-space-between">
+                    <button class="button" onclick="closeMapPicker()">${closeText}</button>
+                    <button class="button is-primary" id="use-location-btn" onclick="useSelectedLocation()" disabled>
+                        ${useLocationText}
+                    </button>
+                </div>
+            </div>
+        </div>
+        <button class="modal-close is-large" onclick="closeMapPicker()"></button>
+    `;
+    
+    document.body.appendChild(modal);
+    
+    let selectedLocation = null;
+    let marker = null;
+    let map = null;
+    
+    // Initialize map
+    setTimeout(() => {
+        if (typeof maplibregl !== 'undefined') {
+            try {
+                map = new maplibregl.Map({
+                    container: mapId,
+                    style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
+                    center: [-73.5673, 45.5017], // Default to Montreal
+                    zoom: 10,
+                    attributionControl: true
+                });
+
+                // Apply midnight glass theme
+                map.on('load', () => {
+                    if (window.MiniMapViewer && typeof window.MiniMapViewer.prototype.applyMidnightGlassTheme === 'function') {
+                        window.MiniMapViewer.prototype.applyMidnightGlassTheme.call({ map }, map);
+                    }
+                });
+
+                // Add click handler for location selection
+                map.on('click', async (e) => {
+                    await selectLocation(e.lngLat.lng, e.lngLat.lat);
+                });
+                
+                // Store map reference for cleanup
+                window.mapPickerInstance = { 
+                    map, 
+                    marker, 
+                    selectedLocation,
+                    selectLocation,
+                    translations: {
+                        locatingUserText,
+                        locationErrorText,
+                        locationPermissionDeniedText
+                    }
+                };
+                
+            } catch (error) {
+                console.error('Error creating map picker:', error);
+                document.getElementById(mapId).innerHTML = `
+                    <div class="notification is-warning">
+                        <p>Map could not be loaded. Please enter the location manually.</p>
+                    </div>
+                `;
+            }
+        }
+    }, 100);
+
+    // Function to select a location (used by both click and geolocation)
+    async function selectLocation(lng, lat) {
+        // Remove existing marker
+        if (marker) {
+            marker.remove();
+        }
+        
+        // Add new marker
+        marker = new maplibregl.Marker({
+            color: '#7877c6'
+        })
+            .setLngLat([lng, lat])
+            .addTo(map);
+        
+        // Store selected location
+        selectedLocation = { lat, lng };
+        
+        // Enable use location button
+        document.getElementById('use-location-btn').disabled = false;
+        
+        // Try to reverse geocode for address
+        try {
+            const response = await fetch(`http://localhost:8080/reverse?format=json&lat=${lat}&lon=${lng}&zoom=16&addressdetails=1`);
+            const data = await response.json();
+            selectedLocation.address = data.display_name || '';
+            selectedLocation.components = data.address || {};
+        } catch (error) {
+            console.warn('Reverse geocoding failed:', error);
+            selectedLocation.address = `${lat.toFixed(6)}, ${lng.toFixed(6)}`;
+            selectedLocation.components = {};
+        }
+
+        // Update instance
+        if (window.mapPickerInstance) {
+            window.mapPickerInstance.selectedLocation = selectedLocation;
+            window.mapPickerInstance.marker = marker;
+        }
+    }
+};
+
+// Function to locate the user when requested
+window.locateUser = function() {
+    const statusDiv = document.getElementById('location-status');
+    const locateBtn = document.getElementById('locate-me-btn');
+    
+    if (!window.mapPickerInstance || !window.mapPickerInstance.map) {
+        return;
+    }
+
+    const { map, translations } = window.mapPickerInstance;
+    
+    // Show loading state
+    locateBtn.disabled = true;
+    locateBtn.innerHTML = `
+        <span class="icon">
+            <i class="fas fa-spinner fa-spin"></i>
+        </span>
+        <span>${translations.locatingUserText}</span>
+    `;
+    statusDiv.style.display = 'block';
+    statusDiv.textContent = translations.locatingUserText;
+    statusDiv.className = 'help has-text-info';
+
+    // Check if geolocation is supported
+    if (!navigator.geolocation) {
+        showLocationError(translations.locationErrorText);
+        return;
+    }
+
+    // Get user's location
+    navigator.geolocation.getCurrentPosition(
+        // Success callback
+        async (position) => {
+            const { latitude, longitude } = position.coords;
+            
+            // Center map on user's location
+            map.flyTo({
+                center: [longitude, latitude],
+                zoom: 15,
+                duration: 2000
+            });
+
+            // Select this location
+            await window.mapPickerInstance.selectLocation(longitude, latitude);
+            
+            // Reset button state
+            resetLocateButton();
+            statusDiv.style.display = 'none';
+        },
+        // Error callback
+        (error) => {
+            let errorMessage;
+            switch (error.code) {
+                case error.PERMISSION_DENIED:
+                    errorMessage = translations.locationPermissionDeniedText;
+                    break;
+                case error.POSITION_UNAVAILABLE:
+                case error.TIMEOUT:
+                default:
+                    errorMessage = translations.locationErrorText;
+                    break;
+            }
+            showLocationError(errorMessage);
+        },
+        // Options
+        {
+            enableHighAccuracy: true,
+            timeout: 10000,
+            maximumAge: 300000 // 5 minutes
+        }
+    );
+
+    function showLocationError(message) {
+        statusDiv.style.display = 'block';
+        statusDiv.textContent = message;
+        statusDiv.className = 'help has-text-danger';
+        resetLocateButton();
+    }
+
+    function resetLocateButton() {
+        const locateMeText = document.body.dataset.i18nLocateMe || 'Locate Me';
+        locateBtn.disabled = false;
+        locateBtn.innerHTML = `
+            <span class="icon">
+                <i class="fas fa-location-arrow"></i>
+            </span>
+            <span>${locateMeText}</span>
+        `;
+    }
+};
+
+window.closeMapPicker = function() {
+    const modal = document.getElementById('map-picker-modal');
+    if (modal) {
+        // Clean up map instance
+        if (window.mapPickerInstance && window.mapPickerInstance.map) {
+            window.mapPickerInstance.map.remove();
+        }
+        if (window.mapPickerInstance && window.mapPickerInstance.marker) {
+            window.mapPickerInstance.marker.remove();
+        }
+        window.mapPickerInstance = null;
+        
+        modal.remove();
+    }
+};
+
+window.useSelectedLocation = function() {
+    if (window.mapPickerInstance && window.mapPickerInstance.selectedLocation) {
+        const location = window.mapPickerInstance.selectedLocation;
+        
+        // Create form data for HTMX request
+        const formData = new FormData();
+        formData.append('build_state', 'Selected');
+        
+        // Add location data
+        formData.append('latitude', location.lat.toString());
+        formData.append('longitude', location.lng.toString());
+        
+        // Parse address components from reverse geocoding
+        if (location.address) {
+            formData.append('location_name', location.address.split(',')[0] || '');
+        }
+        
+        if (location.components) {
+            // Map Nominatim address components to form fields
+            if (location.components.house_number && location.components.road) {
+                formData.append('location_street', `${location.components.house_number} ${location.components.road}`);
+            } else if (location.components.road) {
+                formData.append('location_street', location.components.road);
+            }
+            
+            if (location.components.city || location.components.town || location.components.village) {
+                formData.append('location_locality', location.components.city || location.components.town || location.components.village);
+            }
+            
+            if (location.components.state || location.components.province) {
+                formData.append('location_region', location.components.state || location.components.province);
+            }
+            
+            if (location.components.postcode) {
+                formData.append('location_postal_code', location.components.postcode);
+            }
+            
+            if (location.components.country) {
+                formData.append('location_country', location.components.country);
+            }
+        }
+        
+        // Trigger HTMX request to update the form
+        if (typeof htmx !== 'undefined') {
+            htmx.ajax('POST', '/event/location', {
+                values: Object.fromEntries(formData),
+                target: '#locationGroup',
+                swap: 'outerHTML'
+            });
+        } else {
+            // Fallback: try to fill form fields directly
+            fillFormFields(location);
+        }
+        
+        // Close modal
+        closeMapPicker();
+    }
+};
+
+// Fallback function to fill form fields directly
+function fillFormFields(location) {
+    const latField = document.querySelector('input[name="latitude"]');
+    const lngField = document.querySelector('input[name="longitude"]');
+    const nameField = document.querySelector('input[name="location_name"]');
+    const streetField = document.querySelector('input[name="location_street"]');
+    const localityField = document.querySelector('input[name="location_locality"]');
+    const regionField = document.querySelector('input[name="location_region"]');
+    const postalField = document.querySelector('input[name="location_postal_code"]');
+    const countryField = document.querySelector('select[name="location_country"]');
+    
+    if (latField) latField.value = location.lat.toString();
+    if (lngField) lngField.value = location.lng.toString();
+    
+    if (location.address && nameField) {
+        nameField.value = location.address.split(',')[0] || '';
+    }
+    
+    if (location.components) {
+        if (streetField && location.components.road) {
+            if (location.components.house_number) {
+                streetField.value = `${location.components.house_number} ${location.components.road}`;
+            } else {
+                streetField.value = location.components.road;
+            }
+        }
+        
+        if (localityField && (location.components.city || location.components.town || location.components.village)) {
+            localityField.value = location.components.city || location.components.town || location.components.village;
+        }
+        
+        if (regionField && (location.components.state || location.components.province)) {
+            regionField.value = location.components.state || location.components.province;
+        }
+        
+        if (postalField && location.components.postcode) {
+            postalField.value = location.components.postcode;
+        }
+        
+        if (countryField && location.components.country) {
+            countryField.value = location.components.country;
+        }
+    }
+    
+    // Trigger events to notify form of changes
+    [latField, lngField, nameField, streetField, localityField, regionField, postalField, countryField].forEach(field => {
+        if (field) {
+            field.dispatchEvent(new Event('input', { bubbles: true }));
+            field.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+    });
 }
 
 // Initialize maps when DOM is ready

static/map-integration.js

···
-/**
- * Map Integration Component
- * Handles MapLibreGL integration for venue location picking and display
- */
-class MapIntegration {
-    constructor() {
-        this.map = null;
-        this.marker = null;
-        this.selectedLocation = null;
-        
-        this.init();
-    }
-
-    init() {
-        // Try to initialize maps when DOM is ready
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', () => {
-                this.initializeMiniMaps();
-                this.setupHTMXListener();
-            });
-        } else {
-            this.initializeMiniMaps();
-            this.setupHTMXListener();
-        }
-    }
-
-    setupHTMXListener() {
-        // Re-initialize after HTMX swaps
-        if (document.body) {
-            document.body.addEventListener('htmx:afterSwap', (e) => {
-                this.initializeMiniMaps(e.target);
-            });
-        }
-    }
-
-    initializeMiniMaps(container = document) {
-        // Initialize mini maps for event display
-        const miniMaps = container.querySelectorAll('.venue-map-preview[data-lat][data-lng]');
-        miniMaps.forEach(mapContainer => {
-            const lat = parseFloat(mapContainer.dataset.lat);
-            const lng = parseFloat(mapContainer.dataset.lng);
-            const venueName = mapContainer.dataset.venueName || 'Event Location';
-            
-            if (lat && lng && !mapContainer.querySelector('.maplibregl-map')) {
-                this.createMiniMap(mapContainer, lat, lng, venueName);
-            }
-        });
-
-        // Initialize mini maps for event listings
-        const eventMiniMaps = container.querySelectorAll('.event-mini-map[data-lat][data-lng]');
-        eventMiniMaps.forEach(mapContainer => {
-            const lat = parseFloat(mapContainer.dataset.lat);
-            const lng = parseFloat(mapContainer.dataset.lng);
-            const venueName = mapContainer.dataset.venueName || 'Event Location';
-            
-            if (lat && lng && !mapContainer.querySelector('.maplibregl-map')) {
-                this.createMiniMap(mapContainer, lat, lng, venueName);
-            }
-        });
-    }
-
-    createMiniMap(container, lat, lng, title) {
-        // Use MapLibreGL for mini maps
-        if (typeof maplibregl === 'undefined') {
-            // Fallback if MapLibreGL is not loaded
-            container.innerHTML = `
-                <div class="map-fallback">
-                    <p class="has-text-centered">
-                        <span class="icon"><i class="fas fa-map-marker-alt"></i></span><br>
-                        <strong>${title}</strong><br>
-                        <small>${lat.toFixed(4)}, ${lng.toFixed(4)}</small>
-                    </p>
-                </div>
-            `;
-            return;
-        }
-
-        try {
-            // Set container dimensions
-            container.style.height = '200px';
-            container.style.width = '100%';
-
-            // Create MapLibreGL map with midnight glass theme
-            const map = new maplibregl.Map({
-                container: container,
-                style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
-                center: [lng, lat],
-                zoom: 14,
-                interactive: false, // Disable interaction for mini maps
-                attributionControl: false
-            });
-
-            // Add marker with midnight glass theme
-            new maplibregl.Marker({
-                color: '#7877c6'
-            })
-                .setLngLat([lng, lat])
-                .setPopup(new maplibregl.Popup().setText(title))
-                .addTo(map);
-
-            // Apply midnight glass theme
-            map.on('load', () => {
-                this.applyMidnightGlassTheme(map);
-            });
-
-            // Add click handler to open full map
-            container.style.cursor = 'pointer';
-            container.addEventListener('click', () => {
-                this.showFullMap(lat, lng, title);
-            });
-
-        } catch (error) {
-            console.error('Error creating mini map:', error);
-            // Fallback to text display
-            container.innerHTML = `
-                <div class="map-fallback">
-                    <p class="has-text-centered">
-                        <span class="icon"><i class="fas fa-map-marker-alt"></i></span><br>
-                        <strong>${title}</strong><br>
-                        <small>${lat.toFixed(4)}, ${lng.toFixed(4)}</small>
-                    </p>
-                </div>
-            `;
-        }
-    }
-
-    showFullMap(lat, lng, title) {
-        // Create modal for full map view
-        const modal = document.createElement('div');
-        modal.className = 'modal is-active';
-        modal.innerHTML = `
-            <div class="modal-background" onclick="this.parentElement.remove()"></div>
-            <div class="modal-content">
-                <div class="box">
-                    <h3 class="title is-4">${title}</h3>
-                    <div id="full-map-${Date.now()}" style="height: 400px; width: 100%;"></div>
-                    <div class="mt-4">
-                        <button class="button" onclick="this.closest('.modal').remove()">Close</button>
-                        <a href="https://www.openstreetmap.org/?mlat=${lat}&mlon=${lng}&zoom=16" 
-                           target="_blank" class="button is-info">
-                            <span class="icon"><i class="fas fa-external-link-alt"></i></span>
-                            <span>Open in OpenStreetMap</span>
-                        </a>
-                        <a href="https://maps.google.com/?q=${lat},${lng}" 
-                           target="_blank" class="button is-link">
-                            <span class="icon"><i class="fas fa-external-link-alt"></i></span>
-                            <span>Open in Google Maps</span>
-                        </a>
-                    </div>
-                </div>
-            </div>
-            <button class="modal-close is-large" onclick="this.parentElement.remove()"></button>
-        `;
-        
-        document.body.appendChild(modal);
-        
-        // Initialize full map
-        const mapId = modal.querySelector('[id^="full-map-"]').id;
-        setTimeout(() => {
-            if (typeof maplibregl !== 'undefined') {
-                const fullMap = new maplibregl.Map({
-                    container: mapId,
-                    style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
-                    center: [lng, lat],
-                    zoom: 15
-                });
-
-                new maplibregl.Marker({
-                    color: '#7877c6'
-                })
-                    .setLngLat([lng, lat])
-                    .setPopup(new maplibregl.Popup().setText(title))
-                    .addTo(fullMap);
-
-                // Add navigation controls (zoom buttons)
-                fullMap.addControl(new maplibregl.NavigationControl(), 'top-right');
-
-                // Apply midnight glass theme
-                fullMap.on('load', () => {
-                    window.mapIntegration.applyMidnightGlassTheme(fullMap);
-                });
-            } else {
-                // Fallback for when MapLibreGL is not available
-                document.getElementById(mapId).innerHTML = `
-                    <div class="map-fallback" style="height: 400px; display: flex; align-items: center; justify-content: center; background: #f5f5f5; border: 1px solid #ddd;">
-                        <div class="has-text-centered">
-                            <span class="icon is-large"><i class="fas fa-map-marker-alt fa-2x"></i></span><br>
-                            <strong>${title}</strong><br>
-                            <small>${lat.toFixed(4)}, ${lng.toFixed(4)}</small>
-                        </div>
-                    </div>
-                `;
-            }
-        }, 100);
-    }
-
-    applyMidnightGlassTheme(map) {
-        // Fond et terre
-        if(map.getLayer('background')) {
-            map.setPaintProperty('background', 'background-color', '#1a1b2a');
-        }
-        if(map.getLayer('landcover')) {
-            map.setPaintProperty('landcover', 'fill-color', '#2e2f49');
-        }
-        if(map.getLayer('landuse_residential')) {
-            map.setPaintProperty('landuse_residential', 'fill-color', '#3a3b5e');
-            map.setPaintProperty('landuse_residential', 'fill-opacity', 0.4);
-        }
-        if(map.getLayer('landuse')) {
-            map.setPaintProperty('landuse', 'fill-color', '#3a3b5e');
-            map.setPaintProperty('landuse', 'fill-opacity', 0.3);
-        }
-        
-        // Eau et ombres
-        if(map.getLayer('water')) {
-            map.setPaintProperty('water', 'fill-color', [
-                'interpolate', ['linear'], ['zoom'],
-                0, '#2b2f66',
-                10, '#5b5ea6',
-                15, '#8779c3'
-            ]);
-            map.setPaintProperty('water', 'fill-opacity', 0.85);
-        }
-        if(map.getLayer('water_shadow')) {
-            map.setPaintProperty('water_shadow', 'fill-color', '#555a9a');
-            map.setPaintProperty('water_shadow', 'fill-opacity', 0.3);
-        }
-        
-        // Parcs
-        ['park_national_park', 'park_nature_reserve'].forEach(id => {
-            if(map.getLayer(id)) {
-                map.setPaintProperty(id, 'fill-color', '#50537a');
-                map.setPaintProperty(id, 'fill-opacity', 0.3);
-            }
-        });
-        
-        // Routes principales et secondaires
-        const roadsPrimary = [
-            'road_pri_case_noramp', 'road_pri_fill_noramp',
-            'road_pri_case_ramp', 'road_pri_fill_ramp'
-        ];
-        roadsPrimary.forEach(id => {
-            if(map.getLayer(id)) {
-                map.setPaintProperty(id, 'line-color', '#9389b8');
-                if(id.includes('fill')) {
-                    map.setPaintProperty(id, 'line-width', 2);
-                }
-            }
-        });
-        
-        const roadsSecondary = [
-            'road_sec_case_noramp', 'road_sec_fill_noramp'
-        ];
-        roadsSecondary.forEach(id => {
-            if(map.getLayer(id)) {
-                map.setPaintProperty(id, 'line-color', '#6d6ea1');
-                if(id.includes('fill')) {
-                    map.setPaintProperty(id, 'line-width', 1.5);
-                }
-            }
-        });
-        
-        // Bâtiments
-        ['building', 'building-top'].forEach(id => {
-            if(map.getLayer(id)) {
-                map.setPaintProperty(id, 'fill-color', '#9a92bc');
-                map.setPaintProperty(id, 'fill-opacity', 0.35);
-            }
-        });
-        
-        // Ponts
-        ['bridge_pri_case', 'bridge_pri_fill', 'bridge_sec_case', 'bridge_sec_fill'].forEach(id => {
-            if(map.getLayer(id)) {
-                map.setPaintProperty(id, 'line-color', '#7a75aa');
-            }
-        });
-    }
-}
-
-// Map Picker functionality for location selection
-window.openMapPicker = function() {
-    const modal = document.createElement('div');
-    modal.id = 'map-picker-modal';
-    modal.className = 'modal is-active';
-    modal.innerHTML = `
-        <div class="modal-background" onclick="closeMapPicker()"></div>
-        <div class="modal-card">
-            <header class="modal-card-head">
-                <p class="modal-card-title">Pick Location on Map</p>
-                <button class="delete" onclick="closeMapPicker()"></button>
-            </header>
-            <section class="modal-card-body">
-                <div class="notification is-info is-light">
-                    <span class="icon"><i class="fas fa-mouse-pointer"></i></span>
-                    <strong>Click anywhere on the map to select a location.</strong>
-                    <p>The address will be automatically filled in the form.</p>
-                </div>
-                <div id="location-picker-map" style="height: 400px; width: 100%;"></div>
-                <div id="selected-location-info" class="is-hidden">
-                    <div class="notification is-success is-light mt-3">
-                        <h6 class="title is-6">Selected Location:</h6>
-                        <p><strong>Coordinates:</strong> <span id="selected-coords"></span></p>
-                        <p><strong>Address:</strong> <span id="selected-address">Loading...</span></p>
-                    </div>
-                </div>
-            </section>
-            <footer class="modal-card-foot">
-                <button id="use-location-btn" class="button is-primary" onclick="useSelectedLocation()" disabled>
-                    Use This Location
-                </button>
-                <button class="button" onclick="closeMapPicker()">Cancel</button>
-            </footer>
-        </div>
-    `;
-    
-    document.body.appendChild(modal);
-    
-    // Initialize map picker
-    setTimeout(() => {
-        initializeMapPicker();
-    }, 100);
-};
-
-window.closeMapPicker = function() {
-    const modal = document.getElementById('map-picker-modal');
-    if (modal) {
-        modal.remove();
-    }
-};
-
-function initializeMapPicker() {
-    if (typeof maplibregl === 'undefined') {
-        console.error('MapLibreGL is not loaded');
-        // Show fallback message
-        document.getElementById('location-picker-map').innerHTML = `
-            <div class="map-fallback" style="height: 400px; display: flex; align-items: center; justify-content: center; background: #f5f5f5; border: 1px solid #ddd;">
-                <div class="has-text-centered">
-                    <span class="icon is-large"><i class="fas fa-exclamation-triangle fa-2x"></i></span><br>
-                    <strong>Map not available</strong><br>
-                    <small>Please enter coordinates manually</small>
-                </div>
-            </div>
-        `;
-        return;
-    }
-
-    // Default to Montreal coordinates
-    let defaultLat = 45.5088;
-    let defaultLng = -73.5878;
-
-    // Try to get user's location
-    if (navigator.geolocation) {
-        navigator.geolocation.getCurrentPosition(
-            position => {
-                defaultLat = position.coords.latitude;
-                defaultLng = position.coords.longitude;
-                initMap(defaultLat, defaultLng);
-            },
-            () => {
-                // Fallback to default location
-                initMap(defaultLat, defaultLng);
-            }
-        );
-    } else {
-        initMap(defaultLat, defaultLng);
-    }
-
-    function initMap(lat, lng) {
-        const map = new maplibregl.Map({
-            container: 'location-picker-map',
-            style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
-            center: [lng, lat],
-            zoom: 12
-        });
-
-        let selectedMarker = null;
-        window.mapPickerSelectedLocation = null;
-
-        // Add navigation controls (zoom buttons)
-        map.addControl(new maplibregl.NavigationControl(), 'top-right');
-
-        // Apply midnight glass theme
-        map.on('load', () => {
-            window.mapIntegration.applyMidnightGlassTheme(map);
-        });
-
-        // Handle map clicks
-        map.on('click', function(e) {
-            const { lat, lng } = e.lngLat;
-            
-            // Remove existing marker
-            if (selectedMarker) {
-                selectedMarker.remove();
-            }
-            
-            // Add new marker with midnight glass theme
-            selectedMarker = new maplibregl.Marker({
-                color: '#7877c6'
-            })
-                .setLngLat([lng, lat])
-                .addTo(map);
-            
-            // Store selected location
-            window.mapPickerSelectedLocation = { lat, lng };
-            
-            // Update UI
-            document.getElementById('selected-coords').textContent = `${lat.toFixed(4)}, ${lng.toFixed(4)}`;
-            document.getElementById('selected-location-info').classList.remove('is-hidden');
-            document.getElementById('use-location-btn').disabled = false;
-            
-            // Reverse geocode to get address
-            reverseGeocode(lat, lng);
-        });
-
-        // Add geolocation control
-        map.addControl(new maplibregl.GeolocateControl({
-            positionOptions: {
-                enableHighAccuracy: true
-            },
-            trackUserLocation: true,
-            showUserHeading: true
-        }));
-    }
-}
-
-function reverseGeocode(lat, lng) {
-    // Use Nominatim for reverse geocoding
-    const url = `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json&addressdetails=1`;
-    
-    fetch(url)
-        .then(response => response.json())
-        .then(data => {
-            const address = data.display_name || `${lat.toFixed(4)}, ${lng.toFixed(4)}`;
-            document.getElementById('selected-address').textContent = address;
-            
-            // Store address components for form population
-            if (data.address) {
-                window.mapPickerSelectedLocation.addressComponents = data.address;
-                window.mapPickerSelectedLocation.displayName = data.display_name;
-            }
-        })
-        .catch(error => {
-            console.error('Reverse geocoding error:', error);
-            document.getElementById('selected-address').textContent = 'Address lookup failed';
-        });
-}
-
-window.useSelectedLocation = function() {
-    if (!window.mapPickerSelectedLocation) {
-        return;
-    }
-
-    const location = window.mapPickerSelectedLocation;
-    const address = location.addressComponents || {};
-    
-    // Populate form fields
-    const fields = {
-        'latitude': location.lat,
-        'longitude': location.lng,
-        'location_name': address.building || address.house_number && address.road ? `${address.house_number} ${address.road}` : '',
-        'location_street': address.road || '',
-        'location_locality': address.city || address.town || address.village || '',
-        'location_region': address.state || address.province || '',
-        'location_postal_code': address.postcode || '',
-        'location_country': address.country_code ? address.country_code.toUpperCase() : ''
-    };
-
-    // Update form fields
-    Object.keys(fields).forEach(fieldName => {
-        const field = document.querySelector(`input[name="${fieldName}"], select[name="${fieldName}"]`);
-        if (field && fields[fieldName]) {
-            field.value = fields[fieldName];
-        } else if (fields[fieldName]) {
-            // Create hidden field
-            const hiddenField = document.createElement('input');
-            hiddenField.type = 'hidden';
-            hiddenField.name = fieldName;
-            hiddenField.value = fields[fieldName];
-            document.querySelector('#locationGroup').appendChild(hiddenField);
-        }
-    });
-
-    // Trigger form update via HTMX
-    htmx.ajax('POST', '/event/location', {
-        values: {
-            build_state: 'Selected',
-            ...fields
-        },
-        target: '#locationGroup',
-        swap: 'outerHTML'
-    });
-
-    // Close modal
-    closeMapPicker();
-};
-
-// Initialize map integration when DOM is ready
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-        window.mapIntegration = new MapIntegration();
-    });
-} else {
-    window.mapIntegration = new MapIntegration();
-}

templates/base.en-us.html

···
     <script src="/static/sse.js"></script>
     <script src="/static/site.js"></script>
     <script src="/static/venue-search.js"></script>
-    <script src="/static/map-integration.js"></script>
+    <script src="/static/location-map-viewer.js"></script>
     <script src="/static/form-enhancement.js"></script>
-    <script src="/static/location-map-viewer.js"></script>
     
     <!-- MapLibreGL JS -->
     <script src="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js"></script>
···
     {% endblock %}
     <meta name="theme-color" content="#00d1b2">
 </head>
-<body hx-ext="loading-states">
+<body hx-ext="loading-states" 
+      data-i18n-map-default-title="{{ t('map-modal-default-title') }}"
+      data-i18n-close="{{ t('close') }}"
+      data-i18n-open-openstreetmap="{{ t('button-open-in-openstreetmap') }}"
+      data-i18n-map-picker-title="{{ t('map-picker-modal-title') }}"
+      data-i18n-map-picker-instructions="{{ t('map-picker-instructions') }}"
+      data-i18n-use-location="{{ t('button-use-location') }}"
+      data-i18n-locate-me="{{ t('button-locate-me') }}"
+      data-i18n-locating-user="{{ t('locating-user') }}"
+      data-i18n-location-error="{{ t('location-error') }}"
+      data-i18n-location-permission-denied="{{ t('location-permission-denied') }}">
     {% include 'nav.' + current_locale + '.html' %}
     {% block content %}{% endblock %}
     {% include 'footer.' + current_locale + '.html' %}

templates/base.fr-ca.html

···
     <script src="/static/sse.js"></script>
     <script src="/static/site.js"></script>
     <script src="/static/venue-search.js"></script>
-    <script src="/static/map-integration.js"></script>
+    <script src="/static/location-map-viewer.js"></script>
     <script src="/static/form-enhancement.js"></script>
-    <script src="/static/location-map-viewer.js"></script>
     
     <!-- MapLibreGL JS -->
     <script src="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js"></script>
···
         }
     </style>
 </head>
-<body hx-ext="loading-states">
+<body hx-ext="loading-states" 
+      data-i18n-map-default-title="{{ t('map-modal-default-title') }}"
+      data-i18n-close="{{ t('close') }}"
+      data-i18n-open-openstreetmap="{{ t('button-open-in-openstreetmap') }}"
+      data-i18n-map-picker-title="{{ t('map-picker-modal-title') }}"
+      data-i18n-map-picker-instructions="{{ t('map-picker-instructions') }}"
+      data-i18n-use-location="{{ t('button-use-location') }}"
+      data-i18n-locate-me="{{ t('button-locate-me') }}"
+      data-i18n-locating-user="{{ t('locating-user') }}"
+      data-i18n-location-error="{{ t('location-error') }}"
+      data-i18n-location-permission-denied="{{ t('location-permission-denied') }}">
     {% include 'nav.' + current_locale + '.html' %}
     {% block content %}{% endblock %}
     {% include 'footer.' + current_locale + '.html' %}

templates/create_event.en-us.html

···
 <script src="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js"></script>
 
 <!-- Map Integration (for location picking) -->
-<script src="/static/map-integration.js"></script>
+
 
 <!-- Venue Search JS -->
 <script src="/static/venue-search.js"></script>

templates/edit_event.en-us.html

···
 <script src="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js"></script>
 
 <!-- Map Integration (for location picking) -->
-<script src="/static/map-integration.js"></script>
+
 
 <!-- Venue Search JS -->
 <script src="/static/venue-search.js"></script>