echec slider

package.json

@@ -11,7 +11,9 @@
   "dependencies": {
     "@observablehq/framework": "^1.12.0",
     "d3-dsv": "^3.0.1",
-    "d3-time-format": "^4.1.0"
+    "d3-time-format": "^4.1.0",
+    "leaflet": "^1.9.4",
+    "leaflet-side-by-side": "^1.1.0"
   },
   "devDependencies": {
     "rimraf": "^5.0.5"

src/1.Mayotte.md

@@ -9,6 +9,7 @@ import * as L from "npm:leaflet";
 import * as d3 from "https://cdn.jsdelivr.net/npm/[email protected]/dist/d3.min.js";
 import { calculateQuantiles, getColor, createStyle, onEachFeature, getWMSTileLayer,createGeoJsonLayer,updateLegend} from "./utils/fonctions.js";
 import { quantileProbs, colorScales, departementConfig } from './utils/config.js';
+
 ```
 
 ```js

src/slider.md

@@ -3,39 +3,40 @@ title: slider
 ---
 
 ```js
-import * as L from "npm:leaflet";
-//import { L } from 'https://unpkg.com/[email protected]/dist/leaflet.js';
-window.L = L; // Rendre 'L' global
+//import * as L from "npm:[email protected]";
+// Importer Leaflet depuis le CDN et le rendre global
+import { L } from 'https://unpkg.com/[email protected]/dist/leaflet.js';
+window.L = L;
 
-// Importer les styles CSS nécessaires
-html`<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />`
-html`<link rel="stylesheet" href="https://unpkg.com/[email protected]/leaflet-side-by-side.css" />`
-import L.control.sideBySide from "https://unpkg.com/[email protected]/index.js"
-```
+// Importer le plugin leaflet-side-by-side en utilisant index.js
+await import('https://unpkg.com/[email protected]/index.js');
 
-```js
-// Initialisation de la carte Leaflet
-const mapDiv = display(document.createElement("div"));
-mapDiv.style = "height: 600px; width: 100%; margin: 0 auto;";
+// Inclure les fichiers CSS nécessaires
+html`<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">`;
+html`<link rel="stylesheet" href="https://unpkg.com/[email protected]/leaflet-side-by-side.css">`;
 
-// Initialiser la carte avec la position centrale du département
-const center = [-12.78081553844026, 45.227656507434695];
-const map = L.map(mapDiv).setView(center, 14,10.4);
-```
+// Créer le conteneur de la carte
+const mapDiv = html`<div id="map" style="width: 100%; height: 600px;"></div>`;
 
-```js
-// Couche "Avant"
+// Initialiser la carte et ajouter les couches
+// Initialiser la carte centrée sur votre localisation
+const map = L.map(mapDiv).setView([-12.78081553844026, 45.227656507434695], 14);
+
+// Définir la couche "Avant" (par exemple, données de 2022)
 const layerBefore = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-attribution: '&copy; OpenStreetMap contributors'
+attribution: '&copy; OpenStreetMap contributors',
 }).addTo(map);
 
-// Couche "Après"
-const layerAfter = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
-  attribution: '&copy; OpenStreetMap contributors &copy; CartoDB',
-  subdomains: 'abcd',
-  maxZoom: 19,
+// Définir la couche "Après" (par exemple, données de 2023)
+const layerAfter = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
+attribution: '&copy; OpenTopoMap contributors',
 }).addTo(map);
 
-// Ajouter le slider
+// Ajouter le contrôle side-by-side
 const sideBySide = L.control.sideBySide(layerBefore, layerAfter).addTo(map);
-```
+
+// Retourner la carte pour l'afficher
+map;
+
+
+```