diff --git a/package-lock.json b/package-lock.json
index 4f12381..0a3052e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,10 +4,13 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "satellite-images-webapp",
       "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"
@@ -2119,6 +2122,26 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/leaflet-side-by-side": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/leaflet-side-by-side/-/leaflet-side-by-side-1.1.0.tgz",
+      "integrity": "sha512-vQBKPoxfR1Tn459PIXPloDSCJbT3S/jEGfN3o8ugm8NjDeMtmSLvRCG4bcPZxyPbGuBdSVR1CURrDAezrTd7kQ==",
+      "license": "MIT",
+      "dependencies": {
+        "leaflet": "^0.7.7"
+      }
+    },
+    "node_modules/leaflet-side-by-side/node_modules/leaflet": {
+      "version": "0.7.7",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-0.7.7.tgz",
+      "integrity": "sha512-H1lR7J5VxhvQJQHlW2UywtxO63zilLrnwVsDvjKeyfntffj63Ml94gCk9YPYWBkiQgxisdiA8aJ30Zoou4VhEA=="
+    },
     "node_modules/lie": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
diff --git a/package.json b/package.json
index f9c6576..e3fcb61 100644
--- a/package.json
+++ b/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"
diff --git a/src/1.Mayotte.md b/src/1.Mayotte.md
index 97625d6..eec73da 100644
--- a/src/1.Mayotte.md
+++ b/src/1.Mayotte.md
@@ -9,6 +9,7 @@ import * as L from "npm:leaflet";
 import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7.6.1/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
diff --git a/src/slider.md b/src/slider.md
index 325ba37..e418b34 100644
--- a/src/slider.md
+++ b/src/slider.md
@@ -3,39 +3,40 @@ title: slider
 ---
 
 ```js
-import * as L from "npm:leaflet";
-//import { L } from 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
-window.L = L; // Rendre 'L' global
+//import * as L from "npm:leaflet@1.9.4";
+// Importer Leaflet depuis le CDN et le rendre global
+import { L } from 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
+window.L = L;
 
-// Importer les styles CSS nécessaires
-html`<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />`
-html`<link rel="stylesheet" href="https://unpkg.com/leaflet-side-by-side@2.0.1/leaflet-side-by-side.css" />`
-import L.control.sideBySide from "https://unpkg.com/leaflet-side-by-side@2.2.0/index.js"
-```
+// Importer le plugin leaflet-side-by-side en utilisant index.js
+await import('https://unpkg.com/leaflet-side-by-side@2.2.0/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/leaflet@1.9.4/dist/leaflet.css">`;
+html`<link rel="stylesheet" href="https://unpkg.com/leaflet-side-by-side@2.2.0/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;
+
+
+```
\ No newline at end of file