fusion à la hache

.github/workflows/publish.yml

@@ -0,0 +1,65 @@
+name: Publish dashboard to Pages
+
+on:
+  push:
+    branches:
+      - "leaflet-clement"
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  publish-dashboard:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+
+    steps:
+
+      - name: Check out repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.12'
+          cache: 'pip'
+
+      - name: Install Python requirements
+        run: pip install -r requirements.txt
+
+      - name: Build dashboard
+        run: |
+          npm install
+          npm run build
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_DEFAULT_REGION: ${{ secrets.AWS_DEFAULT_REGION }}
+          AWS_S3_ENDPOINT: ${{ secrets.AWS_S3_ENDPOINT }}
+
+      - name: Configure GitHub Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload artifacts to GitHub Pages
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+
+      - name: Print Site URL based on branch
+        run: |
+          echo "Site URL: https://clement2323.github.io/${{ github.repository }}/leaflet-clement/"

README.md

@@ -1,5 +1,14 @@
 # CRaTT
 
+## Petit ajout Clément :
+- les données sont générées au moment du buil de la page par les codes présents dans le répertrtoire data.
+ces codes peuvent être en n'importe quels langages et doivent juste printer à la fin les data au foormat souhaité (json parquet..)
+- les fichiers de code doivent porter le nom et le format du fichier exemple fibonacci.json.py, sera appelé lorsqu'on voudra 
+ouvrir le fichier généré par ce dernier avec FileAttachement("data/fibonacci.json").json() -> .py python n'est pas que le seul langage possible ici !
+C'est l'idée des data laoaders 
+- l'ordre d'apparition des pages dépend de l'ordre alphabétique du nom des .md correspondant, le titre de la page est donné par la balise title
+- index donne la page d'accueil
+## La suite
 This is an [Observable Framework](https://observablehq.com/framework) app. To start the local preview server, run:
 
 ```

observablehq.config.js

@@ -2,20 +2,26 @@
 export default {
   // The app’s title; used in the sidebar and webpage titles.
   title: "CRaTT",
-
-  // The pages and sections in the sidebar. If you don’t specify this option,
-  // all pages will be listed in alphabetical order. Listing pages explicitly
-  // lets you organize them into sections and have unlisted pages.
-  // pages: [
-  //   {
-  //     name: "Examples",
-  //     pages: [
-  //       {name: "Dashboard", path: "/example-dashboard"},
-  //       {name: "Report", path: "/example-report"}
-  //     ]
-  //   }
-  // ],
-
+  dynamicPaths: [
+      "/departement",
+    ],
+   pages: [
+      {
+        name: "Departements",
+        path: "/departement/",
+        pages: [
+          {name: "Mayotte", path: "/departement/mayotte"},
+          {name: "Reunion", path: "/departement/reunion"}
+        ]
+      },
+      {
+        name: "Non Dynamique",
+        pages: [
+          {name: "Mayotte", path: "/1.Mayotte"},
+
+        ]
+      }
+    ],
   // 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">',
 

requirements.txt

@@ -1,4 +1,4 @@
 duckdb
 geopandas
 s3fs
-pyarrow
+pyarrow

src/1.Mayotte.md

@@ -0,0 +1,166 @@
+---
+title: Mayotte
+---
+
+# Cartographie
+```js
+// 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 { quantileProbs, colorScales, departementConfig } from './utils/config.js';
+```
+
+```js
+const statistics = FileAttachment("./data/clusters_statistics.json").json();
+const geojsonData = statistics;
+```
+
+```js
+// Choix du département Mayotte
+const departement = 'mayotte';
+const config = departementConfig[departement];
+const { name, center, availableYears } = config;
+
+// Initialisation de la carte Leaflet
+const mapDiv = display(document.createElement("div"));
+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);
+
+// Ajout d'une couche de base OpenStreetMap
+const baseLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+  attribution: '© 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: '© OpenStreetMap contributors © 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,
+};
+```
+
+```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
+for (const year of availableYears) {
+  const pleiadesLayer = getWMSTileLayer(`${name}_${year}`);
+  overlays[`PLEIADES ${year}`] = pleiadesLayer;
+
+  const predictionLayer = getWMSTileLayer(`${name}_PREDICTIONS_${year}`, styleName);
+  overlays[`Prédiction ${year}`] = predictionLayer;
+}
+
+// Labels and indicators with associated units
+const labels = [
+  { indicator: 'pct_building_2023', label: 'Pourcentage de bâti 2023', colorScale: 'redScale', unit: '%' },
+  { indicator: 'building_2023', label: 'Surface bâti', colorScale: 'greenScale', unit: 'm²' },
+  { indicator: 'area_building_change_absolute', label: 'Variation de Surface absolue', colorScale: 'blueScale', unit: 'm²' },
+  { indicator: 'area_building_change_relative', label: 'Variation de Surface relative', colorScale: 'yellowScale', unit: '%' }
+];
+
+// Create and add GeoJSON layers
+let isFirstLayer = true;
+for (const { indicator, label, colorScale, unit } of labels) {
+  const geojsonLayer = createGeoJsonLayer(statistics, indicator, label, quantileProbs, colorScales[colorScale], unit);
+  overlays[label] = geojsonLayer;
+
+  // Add only the first layer to the map by default
+  if (isFirstLayer) {
+    geojsonLayer.addTo(map);
+    isFirstLayer = false;
+  }
+}
+
+```
+
+```js
+// Layer controls
+L.control.layers(baseLayers, overlays).addTo(map);
+
+// Legend setup and event handlers
+const legend = L.control({ position: 'bottomright' });
+
+legend.onAdd = function (map) {
+  return L.DomUtil.create('div', 'info legend');
+};
+
+// Function to update the legend based on the currently active layer
+function updateLegendForLayer(layerName) {
+  const selectedIndicator = labels.find(label => label.label === layerName);
+  if (selectedIndicator) {
+    // Calculate quantiles for the selected indicator
+    const quantiles = calculateQuantiles(
+      statistics.features.map(f => f.properties[selectedIndicator.indicator]), 
+      quantileProbs
+    );
+    // Update the legend with the correct information and units
+    legend.getContainer().innerHTML = updateLegend(
+      selectedIndicator, 
+      colorScales[selectedIndicator.colorScale], 
+      quantiles, 
+      selectedIndicator.unit
+    ).innerHTML;
+  }
+}
+
+// Check if the default layer is active and add the legend accordingly
+if (map.hasLayer(overlays['Pourcentage de bâti 2023'])) {
+  legend.addTo(map);
+  updateLegendForLayer('Pourcentage de bâti 2023');
+}
+
+// Event handler for adding an overlay layer
+map.on('overlayadd', function (eventLayer) {
+  if (labels.some(label => label.label === eventLayer.name)) {
+    legend.addTo(map);
+    updateLegendForLayer(eventLayer.name);
+  }
+});
+
+// Event handler for removing an overlay layer
+map.on('overlayremove', function (eventLayer) {
+  if (labels.some(label => label.label === eventLayer.name)) {
+    map.removeControl(legend);
+  }
+});
+
+```
+```js
+// VARIABILISER !! routing dynamique !!
+// tableau de statistiques interactives avec sélection des ilots de Jean françois §> interactivité, je clique sur l'ilot dans une table il me le highlight sur la carte
+
+// Tableau
+// slider avant après pour les cartes leaflet
+//slider et trouting dynamique : overkill le truc
+
+// ajouter fond de carte 2022 §> MAyotte etc ??? -> 
+// meme fichier pour réunion
+
+// slider
+// injection images, prédictions pour Mayotte 2022
+// Réunion images prédictions, pour 2022 2023 et statistiques
+
+// 1 page par dep  ?
+// slider sur une autre page 
+// GT en live excalidraw sur la structure applicative
+
+//
+
+```
+

src/data/clusters_statistics.json.py

@@ -75,4 +75,4 @@ def merge_gdfs(
     + ["geometry"]  # Put geometry at the end
 )
 
-print(merged_gdf[ordered_columns].set_index("ident_ilot").to_crs("EPSG:4326").to_json())
+print(merged_gdf[ordered_columns].set_index("ident_ilot").to_crs("EPSG:4326").to_json())