From aec54cd67a18e99220a7b8c37208f93850c2d494 Mon Sep 17 00:00:00 2001
From: clement2323 <guillo.clement@gmail.com>
Date: Thu, 24 Oct 2024 09:48:16 +0000
Subject: [PATCH] leaflet reactif...

---
 observablehq.config.js           | 14 +++---
 src/departement/[departement].md |  4 +-
 src/test.md                      | 85 ++++++++++++++++++++++++++++++++
 src/utils/config.js              |  2 +-
 4 files changed, 94 insertions(+), 11 deletions(-)
 create mode 100644 src/test.md

diff --git a/observablehq.config.js b/observablehq.config.js
index 9aec40c..f00768b 100644
--- a/observablehq.config.js
+++ b/observablehq.config.js
@@ -14,14 +14,12 @@ export default {
           {name: "Reunion", path: "/departement/reunion"}
         ]
       },
-      // {
-      //   name: "Non Dynamique",
-      //   pages: [
-      //     {name: "Mayotte", path: "/1.Mayotte"},
-      //     {name: "slider", path: "/slider"},
-      //     {name: "test", path: "/test"}
-      //   ]
-      // }
+      {
+        name: "Exemples minimaux",
+        pages: [
+          {name: "Selectinputs", path: "test"},
+        ]
+      }
     ],
   // Content to add to the head of the page, e.g. for a favicon:
   head: '<link rel="icon" href="observable.png" type="image/png" sizes="32x32">',
diff --git a/src/departement/[departement].md b/src/departement/[departement].md
index 6d7ee15..655730c 100644
--- a/src/departement/[departement].md
+++ b/src/departement/[departement].md
@@ -11,7 +11,7 @@ function formatDepartementName(nom) {
 }
 
 // Crée un élément h1 avec le nom du département
-const titre = html`<h1>Cartographie de ${formatDepartementName(departement)}</h1>`;
+const titre = html`<h1>Informations géographiques : ${formatDepartementName(departement)}</h1>`;
 
 display(titre);
 ```
@@ -19,7 +19,7 @@ display(titre);
 
 ```js
 // Importation de Leaflet depuis npm pour gérer la carte
-//import * as L from "npm:leaflet";
+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';
diff --git a/src/test.md b/src/test.md
new file mode 100644
index 0000000..39c0e3c
--- /dev/null
+++ b/src/test.md
@@ -0,0 +1,85 @@
+<!-- ```js
+const name = view(
+  Inputs.text({
+    label: "Name",
+    placeholder: "Enter your name",
+    value: "Anonymous"
+  })
+);
+```
+
+```js
+name
+```
+
+```js
+const search = view(Inputs.search(penguins, {placeholder: "Search penguins…"}));
+```
+
+```js
+search
+```
+
+```js
+name
+``` -->
+
+## leaflet
+
+
+```js
+const x = view(
+  Inputs.text({
+    label: "Coordonnées",
+    placeholder: "x ?",
+    value: "-12.7808"
+  })
+);
+const y = view(
+  Inputs.text({
+    label: "Coordonnées",
+    placeholder: "y ?",
+    value: "45.2276"
+  })
+);
+```
+
+```js
+var center = [Number(x), Number(y)]; // Utilisation de Number() pour la conversion numérique
+```
+```js
+import * as L from "npm:leaflet";
+const mapDiv = display(document.createElement("div"));
+mapDiv.style = "height: 400px; width: 100%; margin: 0 auto;";
+
+// Initialiser la carte avec la position centrale du département
+const map = L.map(mapDiv).setView(center, 14,10.4);
+
+// Ajout d'une couche de base OpenStreetMap
+const baseLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+  attribution: '&copy; OpenStreetMap contributors',
+});
+
+// Ajout d'une couche de base sombre pour le mode sombre
+const darkBaseLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+  attribution: '&copy; OpenStreetMap contributors &copy; CartoDB',
+  subdomains: 'abcd',
+  maxZoom: 19,
+});
+
+
+// Ajouter la couche de base par défaut
+baseLayer.addTo(map);
+
+// Définition des couches de base
+const baseLayers = {
+  'Clair': baseLayer,
+  'Sombre': darkBaseLayer,
+};
+
+map;
+
+L.control.layers(baseLayers).addTo(map);
+
+
+``
\ No newline at end of file
diff --git a/src/utils/config.js b/src/utils/config.js
index 846e6b2..14051c3 100644
--- a/src/utils/config.js
+++ b/src/utils/config.js
@@ -21,4 +21,4 @@ export const departementConfig = {
     center: [-20.88545500487541, 55.452336559309124],
     availableYears: ['2022','2023'],
   }
-};
\ No newline at end of file
+};