feature(poi-rlt): Ajout des POI de comparaison de la carte

poi_rlt_csv_to_geojson.py

@@ -0,0 +1,53 @@
+import csv
+import json
+
+def csvToDictList(path="poi_rlt.csv", delimiter=";", quotechar='"'):
+  rows = []
+  with open(path, encoding="utf-8") as csvfile:
+      reader = csv.DictReader(csvfile, delimiter=delimiter, quotechar=quotechar)
+      for row in reader:
+        if len(row["URL"].split("/")) < 3:
+          continue
+        rows.append(row)
+  return rows
+
+def urlToProperties(url):
+  urlParams = url.split("/")[-1].split("?")[-1].split("&")
+  return {param.split("=")[0]: param.split("=")[1] for param in urlParams}
+
+def rowToFeature(row):
+  urlParams = urlToProperties(row["URL"])
+  result = {
+    "type": "Feature",
+    "geometry": {
+      "type": "Point",
+      "coordinates": [urlParams["x"], urlParams["y"]]
+    },
+    "properties": {
+      "zoom": urlParams["z"],
+      "layer1": urlParams["layer1"],
+      "layer2": urlParams["layer2"],
+      "mode": urlParams["mode"],
+      "commune": row["Commune"],
+      "departement": row["Département"],
+      "theme": row["Thème"],
+      "sousTheme": row["Sous-thème"],
+      "text": row["Texte explicatif"],
+    }
+  }
+  return result
+
+def dictListToFeatureCollection(dictList):
+  featureList = [rowToFeature(row) for row in dictList]
+  result = {
+    "type": "FeatureCollection",
+    "features": featureList
+  }
+  return result
+
+def writeGeojson(featureColl, path="src/js/data-layer/poi_rlt.json"):
+  with open(path, "w", encoding="utf-8") as file:
+    json.dump(featureColl, file, indent=2, ensure_ascii=False)
+
+if __name__ == "__main__":
+  writeGeojson(dictListToFeatureCollection(csvToDictList()))

src/css/app.scss

@@ -17,4 +17,5 @@
 @use 'my-account.css';
 @use 'poi.css';
 @use 'compare.css';
+@use 'comparePoi.css';
 @use 'media-queries.css';

src/css/comparePoi.css

@@ -0,0 +1,40 @@
+#comparePoiWindow {
+  display: flex;
+  flex-direction: column;
+}
+
+.comparePoiTitle {
+  margin: 12px 0;
+  font-size: 13px;
+}
+
+.comparePoiLocation {
+  font-family: "Open Sans";
+  padding-left: 25px;
+  background-image: url("assets/autocompresult.svg");
+  background-repeat: no-repeat;
+  background-size: 20px;
+  height: 23px;
+  display: flex;
+  align-items: center;
+}
+
+.comparePoiButton {
+  color: white;
+  background-color: #26a581;
+  border-radius: 100px;
+  padding: 7px 13px 7px 28px;
+  background-image: url("assets/map-buttons/compare/compare.svg");
+  background-repeat: no-repeat;
+  background-size: 25px;
+  background-position: 2px 3px;
+  width: fit-content;
+  align-self: end;
+}
+
+.comparePoiText {
+  border-top: 1px solid #DDE1E6;
+  font-family: "Open Sans";
+  margin-top: 10px;
+  padding-top: 10px;
+}

src/html/index.html

@@ -44,6 +44,7 @@
               <%= require('html-loader!./tabs/positionWindow.html').default %>
               <%= require('html-loader!./tabs/informationsWindow.html').default %>
               <%= require('html-loader!./tabs/poiWindow.html').default %>
+              <%= require('html-loader!./tabs/comparePoiWindow.html').default %>
               <%= require('html-loader!./tabs/compareLayers1Window.html').default %>
               <%= require('html-loader!./tabs/compareLayers2Window.html').default %>
           </div>

src/html/tabs/comparePoiWindow.html

@@ -0,0 +1,6 @@
+<div class="d-none" id="comparePoiWindow">
+  <p class="comparePoiTitle"></p>
+  <div class="comparePoiLocation"><span class="comparePoiCommune"></span>,&nbsp;<span class="comparePoiDepartement"></span></div>
+  <div class="comparePoiButton">Comparer</div>
+  <div class="comparePoiText d-none"></div>
+</div>

src/js/compare-poi.js

@@ -0,0 +1,183 @@
+import Globals from "./globals";
+import DOM from "./dom";
+
+import ComparePoiData from "./data-layer/poi_rlt.json";
+import ComparePoiIcon from "../css/assets/comparePoi.png";
+
+/**
+ * Contrôle sur les "POI Remonter le temps"
+ * @description
+ * La couche est active par defaut, et est désactivable via les filtre du contrôle POI
+ */
+class ComparePoi {
+  /**
+   * constructeur
+   * @param {*} map
+   * @param {*} options
+   * @returns
+   */
+  constructor(map, options) {
+    this.options = options || {
+      target: document.getElementById("poiWindow"),
+      congifuration: {},
+      style: {},
+    };
+
+    // configuration
+    this.configuration = this.options.configuration || {
+      source: "comparepoi",
+    }
+
+    this.compareConfig = {
+      zoom: null,
+      mode: null,
+      layer1: null,
+      layer2: null,
+      center: null,
+    }
+
+    this.opened = false;
+
+    this.map = map;
+
+    this.target = this.options.target || document.getElementById("poiWindow");
+
+    this.handleCompareButton = this.#onClickCompareButton.bind(this)
+    this.dom = {
+      title: null,
+      commune: null,
+      departement: null,
+      button: null,
+      text: null,
+    }
+
+    this.#load()
+    this.#render();
+    this.#listeners();
+
+    return this;
+  }
+
+  /**
+   * chargement de la couche
+   * @private
+   */
+  #load() {
+    this.map.addSource(this.configuration.source, {
+      type: "geojson",
+      data: ComparePoiData,
+    });
+    this.map.loadImage(ComparePoiIcon, (_, image) => {
+      this.map.addImage("comparePoiIcon", image);
+    });
+    this.showPoints();
+  }
+
+  /**
+   * creation de l'interface
+   */
+  #render() {
+    if (!this.target) {
+      console.warn();
+      return;
+    }
+    this.dom = {
+      title: document.getElementById("comparePoiWindow").querySelector(".comparePoiTitle"),
+      commune: document.getElementById("comparePoiWindow").querySelector(".comparePoiCommune"),
+      departement: document.getElementById("comparePoiWindow").querySelector(".comparePoiDepartement"),
+      button: document.getElementById("comparePoiWindow").querySelector(".comparePoiButton"),
+      text: document.getElementById("comparePoiWindow").querySelector(".comparePoiText"),
+    }
+
+  }
+
+  /**
+   * ajout d'ecouteurs
+   */
+  #listeners() {
+    this.map.on("click", this.configuration.source, (e) => {
+      if (["routeDraw", "routeDrawSave"].includes(Globals.backButtonState)) {
+        return;
+      }
+      const comparePoi = this.map.queryRenderedFeatures(e.point, {layers: [this.configuration.source]})[0];
+      // Zoom - 1 car décalage entre niveaux de zoom maplibre et autres libs carto
+      this.compareConfig = {
+        zoom: comparePoi.properties.zoom - 1,
+        mode: comparePoi.properties.mode,
+        layer1: comparePoi.properties.layer1,
+        layer2: comparePoi.properties.layer2,
+        center: comparePoi.geometry.coordinates,
+      };
+      this.dom.title.innerText = comparePoi.properties.sousTheme;
+      this.dom.commune.innerText = comparePoi.properties.commune;
+      this.dom.departement.innerText = comparePoi.properties.departement;
+      this.dom.text.innerText = comparePoi.properties.text;
+      this.showWindow();
+    });
+    this.dom.button.addEventListener("click", this.handleCompareButton);
+  }
+
+  #onClickCompareButton() {
+    Globals.menu.open("compare");
+    Globals.backButtonState = "comparePoiActivated";
+    this.dom.button.classList.add("d-none");
+    this.dom.text.classList.remove("d-none");
+    Globals.compare.setParams(this.compareConfig);
+    DOM.$comparePoiWindow.classList.remove("d-none");
+    DOM.$tabContainer.style.removeProperty("top");
+    DOM.$bottomButtons.style.removeProperty("bottom");
+    DOM.$sideBySideLeftLayer.classList.add('d-none');
+    DOM.$sideBySideRightLayer.classList.add('d-none');
+    Globals.currentScrollIndex = 2;
+    Globals.menu.updateScrollAnchors();
+  }
+
+  /**
+   * Cache la couche POI sur la carte
+   * @public
+   */
+  hidePoints() {
+    if (this.map.getLayer(this.configuration.source)) {
+      this.map.removeLayer(this.configuration.source);
+    }
+  }
+
+  /**
+   * Affiche la couche POI sur la carte
+   * @public
+   */
+  showPoints() {
+    if (this.map.getLayer(this.configuration.source)) {
+      return;
+    }
+    this.map.addLayer({
+      id: this.configuration.source,
+      source: this.configuration.source,
+      type: "symbol",
+      layout: {
+        "icon-anchor": "bottom",
+        "icon-image": "comparePoiIcon",
+      }
+    })
+  }
+
+  /**
+   * ouvre l'interface
+   * @public
+   */
+  showWindow() {
+    this.opened = true;
+    Globals.menu.open("comparePoi");
+  }
+
+  /**
+   * ferme l'interface
+   * @public
+   */
+  hideWindow() {
+    this.opened = false;
+    Globals.menu.close("comparePoi");
+  }
+}
+
+export default ComparePoi;