Update index.html

index.html

@@ -111,6 +111,38 @@
             font-size: 1.4rem;
             font-weight: 600;
             letter-spacing: 0.02em;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .map-controls {
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        .map-type-btn {
+            background: rgba(255, 255, 255, 0.2);
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            color: white;
+            padding: 0.5rem 1rem;
+            border-radius: 6px;
+            font-family: 'Source Sans 3', sans-serif;
+            font-size: 0.85rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .map-type-btn:hover {
+            background: rgba(255, 255, 255, 0.3);
+            border-color: rgba(255, 255, 255, 0.5);
+        }
+
+        .map-type-btn.active {
+            background: white;
+            color: var(--accent-green);
+            border-color: white;
         }
 
         #map {
@@ -431,7 +463,12 @@
         <div class="game-container">
             <div class="map-panel">
                 <div class="map-header">
-                    Distribution Mondiale des Occurrences
+                    <span>Distribution Mondiale des Occurrences</span>
+                    <div class="map-controls">
+                        <button class="map-type-btn active" data-map="standard">Standard</button>
+                        <button class="map-type-btn" data-map="dark">Sombre</button>
+                        <button class="map-type-btn" data-map="satellite">Satellite</button>
+                    </div>
                 </div>
                 <div id="map"></div>
             </div>
@@ -1186,19 +1223,64 @@
         let answered = false;
         let map = null;
         let tileLayer = null;
+        let baseLayer = null;
         let selectedIndex = -1;
         let filteredSpecies = [];
+        let currentMapType = 'standard';
+
+        // Map configurations
+        const mapLayers = {
+            standard: {
+                url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+                attribution: '© OpenStreetMap contributors'
+            },
+            dark: {
+                url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
+                attribution: '© OpenStreetMap contributors, © CARTO'
+            },
+            satellite: {
+                url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+                attribution: 'Tiles © Esri'
+            }
+        };
 
         // Initialize map
         function initMap() {
             map = L.map('map').setView([20, 0], 2);
             
-            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                attribution: '© OpenStreetMap contributors',
+            baseLayer = L.tileLayer(mapLayers.standard.url, {
+                attribution: mapLayers.standard.attribution,
                 maxZoom: 18
             }).addTo(map);
         }
 
+        // Change map type
+        function changeMapType(type) {
+            if (baseLayer) {
+                map.removeLayer(baseLayer);
+            }
+            
+            currentMapType = type;
+            const config = mapLayers[type];
+            
+            baseLayer = L.tileLayer(config.url, {
+                attribution: config.attribution,
+                maxZoom: 18
+            }).addTo(map);
+
+            // Update active button
+            document.querySelectorAll('.map-type-btn').forEach(btn => {
+                btn.classList.toggle('active', btn.dataset.map === type);
+            });
+        }
+
+        // Add event listeners for map type buttons
+        document.querySelectorAll('.map-type-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                changeMapType(btn.dataset.map);
+            });
+        });
+
         // Load species occurrences on map
         function loadSpeciesOnMap(taxonKey) {
             if (tileLayer) {