POI osm (#20)

src/css/app.scss

@@ -14,4 +14,5 @@
 @use 'layer-catalogue.css';
 @use 'layer-switcher.css';
 @use 'my-account.css';
+@use 'poi.css';
 @use 'media-queries.css';

src/css/map-buttons.css

@@ -21,7 +21,8 @@
 #sideBySideBtn,
 #layerManagerBtn,
 #geolocateBtn,
-#compassBtn  {
+#compassBtn,
+#filterPoiBtn  {
   width: 40px;
   height: 40px;
   border-radius: 60px;
@@ -59,6 +60,12 @@
   bottom: calc(225px + env(safe-area-inset-bottom));
 }
 
+#filterPoiBtn {
+  background-image: url("assets/filtrer.svg");
+  position: absolute;
+  top: calc(80px + env(safe-area-inset-top));
+}
+
 @media (min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
   #layerManagerBtn {
     bottom: calc(65px + env(safe-area-inset-bottom));

src/css/poi.css

@@ -0,0 +1,42 @@
+.divPOIContainer {}
+
+.spanPOITitle {
+    text-align: left;
+    width: 100%;
+    font-family: "Open Sans";
+    font-weight: bold;
+    font-size: 1.1em;
+}
+
+.divPOIDisplayGoBackTime,
+.divPOIDisplay {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    font-family: "Open Sans";
+    padding-top: 15px;
+    align-items: center;
+}
+
+.divPOIDisplay > span,
+.divPOIDisplayGoBackTime > span {
+    max-width: 50%;
+    white-space: wrap;
+    text-align: left;
+  }
+
+
+.divPOIFilterItems {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    font-family: "Open Sans";
+}
+.lblPOIFilterItem {
+    margin-bottom: 8px;
+    width: fit-content;
+}
+.inputPOIFilterItem {}
+
+#displayPOI {}
+#displayPOIGoBackTime {}

src/css/tabs.css

@@ -9,7 +9,8 @@
 #directionsWindow,
 #directionsResultsWindow,
 #mypositionWindow,
-#layerManagerWindow {
+#layerManagerWindow,
+#poiWindow {
   margin-top: 10px;
   position: relative;
   border-top-left-radius: 5px;

src/html/index.html

@@ -44,6 +44,7 @@
               <%= require('html-loader!./tabs/mypositionWindow.html').default %>
               <%= require('html-loader!./tabs/myaccountWindow.html').default %>
               <%= require('html-loader!./tabs/informationsWindow.html').default %>
+              <%= require('html-loader!./tabs/poiWindow.html').default %>
           </div>
 
           <!-- Autres menus alternatifs -->

src/html/mapButtons.html

@@ -8,3 +8,5 @@
 <div class="button" id="layerManagerBtn"></div>
 <!-- Comparaison de carte -->
 <div class="button" id="sideBySideBtn"></div>
+<!-- Filtres POI -->
+<div class="button" id="filterPoiBtn"></div>

src/html/tabs/layermanagerWindow.html

@@ -8,7 +8,7 @@
     <label class="layer-tabs-label" for="layer-switcher-tab">Ma sélection <span id="layer-switcher-number">0</span></label>
     <!-- container dynamique de la gestion des couches thematiques -->
     <div class="layer-tabs-content" id="layer-thematics"></div>
-    <!-- TODO container dynamique du gestionnaire de couches -->
+    <!-- container dynamique du gestionnaire de couches -->
     <div class="layer-tabs-content" id="layer-switcher"></div>
   </div>
 </div>

src/html/tabs/poiWindow.html

@@ -0,0 +1,3 @@
+<div class="d-none" id="poiWindow">
+    <!-- container dynamique principal du menu des filtres POI OSM -->
+</div>

src/js/controls.js

@@ -6,6 +6,7 @@ import Isochrone from "./isochrone/isochrone";
 import Position from "./my-position";
 import Search from "./search";
 import Compare from './compare';
+import POI from './poi';
 
 /**
  * Ajout des contrôle à la fin du chargement de la carte
@@ -15,6 +16,7 @@ import Compare from './compare';
  * @see Position
  * @see Compare
  * @see Search
+ * @see POI
  */
 const addControls = () => {
   const map = Globals.map;
@@ -60,6 +62,18 @@ const addControls = () => {
       maxWidth: 150,
       unit: 'metric'
     }), "bottom-left");
+
+    // contrôle filtres POI
+    Globals.poi = new POI(map, {});
+    Globals.poi.load() // promise !
+    .then(() => {
+      // opérations possibles aprés le chargement des POI
+      console.debug("layer POI loaded !");
+    })
+    .catch((e) => {
+      // on ne capture pas les exceptions
+      console.error(e);
+    });
   });
 }
 

src/js/data-layer/layers-config.json

@@ -4283,6 +4283,48 @@
       "quicklookUrl": "",
       "layerId": "PLAN.IGN.INTERACTIF$GEOPORTAIL:GPP:TMS",
       "defaultProjection": "EPSG:3857"
+    },
+    "OSM.POI$GEOPORTAIL:GPP:TMS": {
+      "hidden": true,
+      "queryable": true,
+      "serviceParams": {
+        "id": "GPP:TMS",
+        "version": "1.0.0",
+        "serverUrl": {
+          "appign": "https://data.geopf.fr/tms/1.0.0/"
+        }
+      },
+      "name": "OSM.POI",
+      "title": "POI OSM interactif",
+      "description": "",
+      "formats": [
+        {
+          "current": true,
+          "name": "application/x-protobuf"
+        }
+      ],
+      "styles": [
+        {
+          "name": "standard",
+          "title": "Style standard",
+          "current": true,
+          "url": "data/poi-osm-style.json"
+        }
+      ],
+      "globalConstraint": {
+        "crs": null,
+        "bbox": {
+          "left": -724011.531917197,
+          "right": 1095801.237496279,
+          "top": 6672646.821182753,
+          "bottom": 5009377.0856973175
+        },
+        "minScaleDenominator": null,
+        "maxScaleDenominator": null
+      },
+      "quicklookUrl": "",
+      "layerId": "OSM.POI$GEOPORTAIL:GPP:TMS",
+      "defaultProjection": "EPSG:3857"
     }
 
   },