leaflet reactif...

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">',

src/departement/[departement].md

@@ -11,15 +11,15 @@ 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);
 ```
 
 
 ```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/[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';

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);
+
+
+``

src/utils/config.js

@@ -21,4 +21,4 @@ export const departementConfig = {
     center: [-20.88545500487541, 55.452336559309124],
     availableYears: ['2022','2023'],
   }
-};
+};