interactivité tableau carte

observablehq.config.js

@@ -14,12 +14,12 @@ export default {
           {name: "Reunion", path: "/departement/reunion"}
         ]
       },
-      {
-        name: "Exemples minimaux",
-        pages: [
-          {name: "Selectinputs", 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

@@ -9,10 +9,8 @@ console.log(`The current department is ${departement}`);
 function formatDepartementName(nom) {
   return nom.charAt(0).toUpperCase() + nom.slice(1).toLowerCase();
 }
-
 // Crée un élément h1 avec le nom du département
 const titre = html`<h1>Informations géographiques : ${formatDepartementName(departement)}</h1>`;
-
 display(titre);
 ```
 
@@ -21,7 +19,7 @@ display(titre);
 // Importation de Leaflet depuis npm pour gérer la carte
 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 { calculateQuantiles, getColor, createStyle, onEachFeature, getWMSTileLayer,createGeoJsonLayer,updateLegend,getIlotCentroid,createIlotBoundariesLayer} from "../utils/fonctions.js";
 import { quantileProbs, colorScales, departementConfig } from '../utils/config.js';
 ```
 
@@ -35,17 +33,54 @@ const selec = files.find(f => f.id === departement);
 const statistics = await selec.file.json();
 ```
 
+
+<!-- # Reactivité du centre de la carte !! -->
+```js
+// Créer la liste des îlots et la trier
+const ilots = statistics.features
+  .map(feature => ({
+    depcom: feature.properties.depcom_2018,
+    code: feature.properties.code
+  }))
+  .sort((a, b) => {
+    // Trier d'abord par depcom
+    if (a.depcom !== b.depcom) {
+      return a.depcom.localeCompare(b.depcom);
+    }
+    // Si les depcom sont identiques, trier par code
+    return a.code.localeCompare(b.code);
+  });
+
+// Créer le sélecteur avec la liste triée
+const selectedIlot = view(
+  Inputs.select(ilots, {
+    label: "Sélectionnez un îlot",
+    format: d => `${d.depcom} - ${d.code}`,
+    value: ilots[0]
+  })
+);
+
+```
+<!-- # Bien séparer l'obtention de la valeur choisie de la définition du choix ! -->
+```js
+const center = getIlotCentroid(
+  statistics,
+  selectedIlot.depcom,
+  selectedIlot.code
+)
+```
+
 ```js
 // Choix du département Mayotte
 const config = departementConfig[departement];
-const { name, center, availableYears } = config;
+const { name, availableYears } = config;
 
 // Initialisation de la carte Leaflet
 const mapDiv = display(document.createElement("div"));
-mapDiv.style = "height: 400px; width: 100%; margin: 0 auto;";
+mapDiv.style = "height: 600px; 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);
+const map = L.map(mapDiv).setView(center, 17);
 
 // Ajout d'une couche de base OpenStreetMap
 const baseLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -62,17 +97,21 @@ const darkBaseLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z
 // Ajouter la couche de base par défaut
 baseLayer.addTo(map);
 
+// Exemple d'utilisation :
+const ilotBoundariesLayer = createIlotBoundariesLayer(statistics);
+map.addLayer(ilotBoundariesLayer);
+
 // Définition des couches de base
 const baseLayers = {
   'Clair': baseLayer,
   'Sombre': darkBaseLayer,
+  "Contours des îlots": ilotBoundariesLayer
 };
 ```
 
 ```js
 // Assuming statistics, map, availableYears, name, quantileProbs, and colorScales are already defined
 const overlays = {};
-
 const styleName = "contour_rouge"; // Defined in GeoServer
 
 // Adding layers for available years
@@ -157,40 +196,66 @@ map.on('overlayremove', function (eventLayer) {
     map.removeControl(legend);
   }
 });
-
-```
-```js
-const search_properties = Inputs.search(statistics.features.map(d => d.properties),{placeholder: "Retrouver îlot…"})
-view(search_properties)
-// D'abord, créons une liste d'options à partir de vos données
-const ilotOptions = statistics.features.map(feature => ({
-  depcom: feature.properties.depcom_2018,
-  code: feature.properties.code,
-  label: `${feature.properties.depcom_2018} - ${feature.properties.code}`
-}));
-
-// Maintenant, créons le sélecteur
-const selectedIlot = 
-  Inputs.select(ilotOptions, {
-    label: "Sélectionnez un îlot",
-    format: (ilot) => ilot.label,
-    value: ilotOptions[0] // Sélectionne le premier îlot par défaut
-  });
-
-view(selectedIlot)
 ```
 
 ```js
-// ée le tableau interactif
-const table = view(
-    Inputs.table(statistics.features.map(f => ({
+const statistics_props = statistics.features.map(f => ({
       depcom_2018: f.properties.depcom_2018,
       code: f.properties.code,
       building_2023: f.properties.building_2023.toFixed(0),
       pct_building_2023: f.properties.pct_building_2023.toFixed(0),
       area_building_change_absolute:f.properties.area_building_change_absolute.toFixed(0),
       area_building_change_relative:f.properties.area_building_change_relative.toFixed(1),
-    })), {
+    }))
+const search = view(Inputs.search(statistics_props, {placeholder: "chercher îlot…"}));
+```
+
+```js
+const table = view(
+  Inputs.table(statistics.features.map(f => ({
+    depcom_2018: f.properties.depcom_2018,
+    code: f.properties.code,
+    building_2023: parseFloat(f.properties.building_2023),
+    pct_building_2023: parseFloat(f.properties.pct_building_2023),
+    area_building_change_absolute: parseFloat(f.properties.area_building_change_absolute),
+    area_building_change_relative: parseFloat(f.properties.area_building_change_relative)
+  })), {
+    columns: ['depcom_2018', 'code', 'building_2023', 'pct_building_2023', 'area_building_change_absolute', 'area_building_change_relative'],
+    header: {
+      depcom_2018: 'Code Commune',
+      code: 'Code Îlot',
+      building_2023: 'Surface 2023 (m²)',
+      pct_building_2023: 'Bâti 2023 (%)',
+      area_building_change_absolute: 'Écart absolu (m²)',
+      area_building_change_relative: 'Écart relatif (%)'
+    },
+    width: {
+      depcom_2018: 120,
+      code: 100,
+      building_2023: 120,
+      pct_building_2023: 90,
+      area_building_change_absolute: 120,
+      area_building_change_relative: 120
+    },
+    format: {
+      building_2023: x => x.toLocaleString('fr-FR', { maximumFractionDigits: 0 }),
+      pct_building_2023: x => x.toLocaleString('fr-FR', { maximumFractionDigits: 0 }),
+      area_building_change_absolute: x => x.toLocaleString('fr-FR', { maximumFractionDigits: 0 }),
+      area_building_change_relative: x => x.toLocaleString('fr-FR', { minimumFractionDigits: 1, maximumFractionDigits: 1 })
+    },
+    sort: {
+      column: 'depcom_2018',
+      reverse: false
+    },
+    rows: 10
+  })
+);
+```
+<!-- 
+```js
+Inputs.table(
+  search,
+  {
       columns: ['depcom_2018', 'code', 'building_2023', 'pct_building_2023','area_building_change_absolute','area_building_change_relative'],
       header: {
         depcom_2018: 'Code Commune',
@@ -213,16 +278,6 @@ const table = view(
         area_building_change_relative: x => x + ' %',
       },
       rows: 10
-    },
-    {placeholder: "Rechercher ilot.."}
-    )
-  );
-table
-```
-
-```js
-display(selectedIlot.value)
-display(search_properties.value)
-// gérer les couches àpartir de ça et filtrer la table
-```
-
+  }
+)
+```  -->

src/index.md

@@ -7,6 +7,12 @@ toc: false
   <h2> Petite application pour observer les performance des algorithmes de segmentation </h2>
 </div>
 
+## Sélectionnez un département
+
+- [Mayotte](/departement/mayotte)
+- [Réunion](/departement/reunion)
+
+
 <style>
 
 .hero {

src/test.md

@@ -1,52 +1,4 @@
-<!-- ```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"));
@@ -82,4 +34,34 @@ map;
 L.control.layers(baseLayers).addTo(map);
 
 
-``
+```
+
+
+```js
+
+const statistics = FileAttachment("./data/clusters_statistics_mayotte.json").json()
+
+
+```
+
+
+```js
+const ilots  = statistics.features.map(feature => ({
+    depcom: feature.properties.depcom_2018,
+    code: feature.properties.code
+  }));
+
+const selectedIlot = view(
+  Inputs.select(ilots, {
+    label: "Sélectionnez un îlot",
+    format: d => `${d.depcom} - ${d.code}`,
+    value: ilots[0]
+  })
+);
+```
+
+```js
+
+
+
+```

src/utils/config.js

@@ -13,12 +13,12 @@ export const colorScales = {
 export const departementConfig = {
   mayotte: {
     name: 'MAYOTTE',
-    center: [-12.78081553844026, 45.227656507434695],
+    // center: [-12.78081553844026, 45.227656507434695],
     availableYears: ['2022','2023'],
   },
   reunion: {
     name: 'REUNION',
-    center: [-20.88545500487541, 55.452336559309124],
+    // center: [-20.88545500487541, 55.452336559309124],
     availableYears: ['2022','2023'],
   }
 };