feature(isochrone&directions): select a point on the map

IGNF · Jan 2, 2024 · 22ac795 · 22ac795
1 parent 7dd6782
commit 22ac795
Show file tree

Hide file tree

Showing 13 changed files with 192 additions and 8 deletions.
diff --git a/src/css/assets/location.svg b/src/css/assets/location.svg
diff --git a/src/css/map-buttons.css b/src/css/map-buttons.css
@@ -288,6 +288,45 @@
   font-family: "Open Sans";
 }
 
+#mapCenter {
+  background-image: url("assets/map-center.svg");
+  width: 50px;
+  height: 50px;
+  background-size: 50px;
+  background-repeat: no-repeat;
+  background-position: center;
+  position: fixed;
+  left: calc(50vw - 25px);
+  top: calc((100vh - 78px - env(safe-area-inset-bottom))/2 - 25px);
+  opacity: 0.8;
+  pointer-events: none;
+}
+
+#mapCenterMenu {
+  color: #3F4A55;
+  display: flex;
+  position: absolute;
+  box-sizing: border-box;
+  top: calc(100% - 78px - env(safe-area-inset-bottom));
+  width: 100%;
+  height: calc(78px + env(safe-area-inset-bottom));
+  font-size: 12px;
+  background-color: white;
+  padding: 10px 30px 8px 15px;
+  z-index: 3003;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  font-family: "Open Sans";
+}
+
+#mapCenterSubmit {
+  width: 100px;
+  text-align: right;
+  font-weight: 600;
+}
+
 @media (min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
   #layerManagerBtn {
     bottom: 50px;
@@ -337,4 +376,28 @@
     position: relative;
     bottom: -40px;
   }
+
+  #sideBySideLeftLayer {
+    left: -60px;
+  }
+
+  #mapCenter {
+    top: calc(50vh - 25px);
+    right: calc((100vw - 75px - env(safe-area-inset-left))/2 - 25px);
+  }
+
+  #mapCenterMenu {
+    flex-direction: column;
+    width: 75px;
+    height: 100vh;
+    left: env(safe-area-inset-left);
+    top: 0;
+    box-sizing: border-box;
+    padding: 10px 0px 8px 0px;
+  }
+
+  #mapCenterSubmit {
+    width: 100%;
+    text-align: center;
+  }
 }
diff --git a/src/css/search.css b/src/css/search.css
@@ -98,6 +98,7 @@
 }
 
 #myGeoLocation > p,
+#selectOnMap > p,
 .recentresult,
 .autocompresultselected,
 .autocompresult {
@@ -132,6 +133,10 @@
   background-image: url("assets/ma-geolocation.svg");
 }
 
+#selectOnMap > p {
+  background-image: url("assets/location.svg");
+}
+
 .recentresult {
   background-image: url("assets/recentresult.svg");
 }

diff --git a/src/html/mapButtons.html b/src/html/mapButtons.html
@@ -9,6 +9,12 @@
   <div id="compareFade"></div>
 </div>
 
+<!-- Réticule central -->
+<div id="mapCenter" class="d-none"></div>
+<div id="mapCenterMenu" class="d-none">
+  <span>Choisir un point en déplaçant la carte</span><span id="mapCenterSubmit">OK</span>
+</div>
+
 <!-- Indicateur d'interactivité du Plan IGN -->
 <div class="button" id="interactivityBtn"></div>
 <div id="bottomButtons">

diff --git a/src/html/tabs/searchresultsWindow.html b/src/html/tabs/searchresultsWindow.html
@@ -3,6 +3,9 @@
     <div id="myGeoLocation">
       <p>Ma position</p>
     </div>
+    <div id="selectOnMap" class="d-none">
+      <p>Placer un point sur la carte</p>
+    </div>
     <div id="resultsRechRecent">
       <p>Recherches récentes</p>
     </div>

diff --git a/src/js/directions/directions.js b/src/js/directions/directions.js
@@ -375,12 +375,23 @@ class Directions {
             if (e.type !== "geolocation" && self.options.closeSearchControlCbk) {
                 self.options.closeSearchControlCbk();
             }
-
             // on enregistre dans le DOM :
             // - les coordonnées en WGS84G soit lon / lat !
             // - la reponse du geocodage
             target.dataset.coordinates = "[" + e.detail.coordinates.lon + "," + e.detail.coordinates.lat + "]";
-            target.value = e.detail.text.split(",")[0];
+            if (e.type === "reverse") {
+                var strAddress = e.detail.address;
+                if (typeof e.detail.address !== "string") {
+                    strAddress = "";
+                    strAddress += (e.detail.address.number !== "") ? e.detail.address.number + " " : "";
+                    strAddress += (e.detail.address.street !== "") ? e.detail.address.street + ", " : "";
+                    strAddress += e.detail.address.city + ", " + e.detail.address.postcode;
+                }
+                target.value = strAddress;
+            } else {
+                target.value = e.detail.text.split(",")[0];
+            }
+
             // on supprime les écouteurs
             cleanListeners();
         }
@@ -396,6 +407,7 @@ class Directions {
             }
             Geocode.target.removeEventListener("search", setLocation)
             Location.target.removeEventListener("geolocation", setLocation);
+            Reverse.target.removeEventListener("reverse", setLocation);
         }
 
         // abonnement au geocodage
@@ -404,6 +416,9 @@ class Directions {
         // abonnement à la geolocalisation
         Location.target.addEventListener("geolocation", setLocation);
 
+        // abonnement au reverse
+        Reverse.target.addEventListener("reverse", setLocation);
+
         // abonnement au bouton de fermeture du menu
         var close = document.getElementById("closeSearch");
         if (close) {

diff --git a/src/js/dom.js b/src/js/dom.js
@@ -9,6 +9,7 @@ const $resultsRechRecent = document.getElementById("resultsRechRecent");
 const $searchImage = document.getElementById("searchImage");
 
 const $myGeoLocation = document.getElementById("myGeoLocation");
+const $selectOnMap = document.getElementById("selectOnMap");
 
 const $geolocateBtn = document.getElementById("geolocateBtn");
 const $backTopLeftBtn = document.getElementById("backTopLeftBtn");
@@ -33,6 +34,10 @@ const $routeDrawRestore = document.getElementById("routeDrawRestore");
 const $routeDrawDelete = document.getElementById("routeDrawDelete");
 const $routeDrawSave = document.getElementById("routeDrawSave");
 
+const $mapCenter = document.getElementById("mapCenter");
+const $mapCenterMenu = document.getElementById("mapCenterMenu");
+const $mapCenterSubmit = document.getElementById("mapCenterSubmit");
+
 const $bottomButtons = document.getElementById("bottomButtons");
 
 const $whiteScreen = document.getElementById("whiteScreen");
@@ -71,6 +76,7 @@ export default {
   $resultsRechRecent,
   $searchImage,
   $myGeoLocation,
+  $selectOnMap,
   $backTopLeftBtn,
   $parameterScreenWindow,
   $legalScreenWindow,
@@ -112,4 +118,7 @@ export default {
   $routeDrawRestore,
   $routeDrawDelete,
   $routeDrawSave,
+  $mapCenter,
+  $mapCenterMenu,
+  $mapCenterSubmit,
 };
diff --git a/src/js/event-listeners.js b/src/js/event-listeners.js
@@ -103,6 +103,15 @@ function addListeners() {
         DOM.$bottomButtons.style.width = "auto";
       }
     }
+    if (["selectOnMapDirections", "selectOnMapIsochrone"].includes(Globals.backButtonState)) {
+      Globals.currentScrollIndex = 0;
+    }
+    if (Globals.backButtonState === "compareLayers2") {
+      DOM.$sideBySideLeftLayer.style.removeProperty("left");
+      if (window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
+        DOM.$sideBySideLeftLayer.style.left = "calc(100vh + env(safe-area-inset-left) - 20px)";
+    }
+    }
     Globals.menu.updateScrollAnchors();
   });
 

diff --git a/src/js/isochrone/isochrone-dom.js b/src/js/isochrone/isochrone-dom.js
@@ -211,17 +211,14 @@ let IsochroneDOM = {
       return false;
     });
     this.dom.location.addEventListener("click", (e) => {
-      console.log(e);
       // ouverture du menu de recherche
       self.onOpenSearchLocation(e);
     });
     this.dom.modeDistance.addEventListener("click", (e) => {
-      console.log(e);
       document.getElementById("isochroneModeValueDistance").className = "";
       document.getElementById("isochroneModeValueDuration").className = "isochroneValueHidden";
     });
     this.dom.modeDuration.addEventListener("click", (e) => {
-      console.log(e);
       document.getElementById("isochroneModeValueDuration").className = "";
       document.getElementById("isochroneModeValueDistance").className = "isochroneValueHidden";
     });

diff --git a/src/js/map-buttons-listeners.js b/src/js/map-buttons-listeners.js
@@ -1,6 +1,7 @@
 import DOM from './dom';
 import Globals from './globals';
 import Location from './services/location';
+import Reverse from './services/reverse';
 import State from './state';
 
 const addListeners = () => {
@@ -61,6 +62,20 @@ const addListeners = () => {
 
   // Bouton Retour
   DOM.$backTopLeftBtn.addEventListener("click", () => { State.onBackKeyDown(); });
+
+  // Sélection de point via le réticule pour isochrone et directions
+  DOM.$mapCenterSubmit.addEventListener("click", () => {
+    if (Globals.backButtonState === "selectOnMapIsochrone") {
+      Globals.isochrone.onAddWayPoint({lngLat: Globals.map.getCenter()});
+      Globals.menu.close('selectOnMapIsochrone');
+    } else if (Globals.backButtonState === "selectOnMapDirections") {
+      Reverse.compute({
+        lon: Globals.map.getCenter().lng,
+        lat: Globals.map.getCenter().lat,
+      });
+      Globals.menu.close('selectOnMapDirections');
+    }
+  });
 }
 
 export default {

diff --git a/src/js/nav.js b/src/js/nav.js
@@ -105,6 +105,29 @@ class MenuNavigation {
         // y'a t il des particularités sur l'ouverture du panneau demandé ?
         var isSpecific = false;
         switch (id) {
+            case "selectOnMapDirections":
+            case "selectOnMapIsochrone":
+                DOM.$filterPoiBtn.classList.add("d-none");
+                DOM.$layerManagerBtn.classList.add("d-none");
+                DOM.$mapCenter.classList.remove("d-none");
+                DOM.$mapCenterMenu.classList.remove("d-none");
+                DOM.$rech.blur();
+                if (document.querySelector(".autocompresultselected")) {
+                    document.querySelector(".autocompresultselected").classList.remove("autocompresultselected");
+                }
+                DOM.$search.style.display = "none";
+                document.body.style.removeProperty("overflow-y");
+                DOM.$whiteScreen.classList.add('d-none');
+                DOM.$backTopLeftBtn.style.removeProperty("box-shadow");
+                DOM.$backTopLeftBtn.style.removeProperty("height");
+                DOM.$backTopLeftBtn.style.removeProperty("width");
+                DOM.$backTopLeftBtn.style.removeProperty("top");
+                DOM.$backTopLeftBtn.style.removeProperty("left");
+                DOM.$altMenuContainer.classList.add('d-none');
+                DOM.$selectOnMap.classList.add("d-none");
+                Globals.currentScrollIndex = 0;
+                this.updateScrollAnchors();
+                break;
             case "compareLayers1":
                 DOM.$tabContainer.style.removeProperty("top");
                 DOM.$bottomButtons.style.removeProperty("bottom");
@@ -119,6 +142,9 @@ class MenuNavigation {
                 DOM.$compareLayers1Window.classList.add("d-none");
                 DOM.$compareLayers2Window.classList.remove("d-none");
                 DOM.$sideBySideRightLayer.classList.add("d-none");
+                if (window.matchMedia("(min-width: 615px), screen and (min-aspect-ratio: 1/1) and (min-width:400px)").matches) {
+                    DOM.$sideBySideLeftLayer.style.left = "calc(100vh + env(safe-area-inset-left) - 20px)";
+                }
                 Globals.currentScrollIndex = 2;
                 break;
             case "compare":
@@ -214,6 +240,7 @@ class MenuNavigation {
             case "searchDirections":
             case "searchIsochrone":
                 DOM.$search.style.display = "flex";
+                DOM.$selectOnMap.classList.remove("d-none");
             case "search":
                 DOM.$searchresultsWindow.classList.remove('d-none');
                 DOM.$whiteScreen.classList.remove('d-none');
@@ -235,7 +262,7 @@ class MenuNavigation {
                 DOM.$filterPoiBtn.style.top = "calc(10px + env(safe-area-inset-top))";
                 DOM.$backTopLeftBtn.classList.remove('d-none');
                 DOM.$sideBySideBtn.classList.add('d-none');
-                Globals.directions.interactive(true);
+                // Globals.directions.interactive(true);
                 Globals.interactivityIndicator.hardDisable();
                 Globals.currentScrollIndex = 2;
                 break;
@@ -277,6 +304,16 @@ class MenuNavigation {
         var isSpecific = false;
         var isFinished = false; // hack pour search !
         switch (id) {
+            case "selectOnMapDirections":
+            case "selectOnMapIsochrone":
+                DOM.$filterPoiBtn.classList.remove("d-none");
+                DOM.$layerManagerBtn.classList.remove("d-none");
+                DOM.$mapCenter.classList.add("d-none");
+                DOM.$mapCenterMenu.classList.add("d-none");
+                Globals.currentScrollIndex = 0;
+                isSpecific = true;
+                isFinished = true;
+                break;
             case "compareLayers1":
                 DOM.$tabContainer.style.top = "100vh";
                 DOM.$bottomButtons.style.bottom = "calc(42px + env(safe-area-inset-bottom))";
@@ -289,6 +326,7 @@ class MenuNavigation {
             case "compareLayers2":
                 DOM.$tabContainer.style.top = "100vh";
                 DOM.$bottomButtons.style.bottom = "calc(42px + env(safe-area-inset-bottom))";
+                DOM.$sideBySideLeftLayer.style.removeProperty("left");
                 DOM.$compareLayers2Window.classList.add("d-none");
                 DOM.$sideBySideRightLayer.classList.remove("d-none");
                 Globals.currentScrollIndex = 0;
@@ -393,6 +431,7 @@ class MenuNavigation {
                 DOM.$backTopLeftBtn.style.removeProperty("top");
                 DOM.$backTopLeftBtn.style.removeProperty("left");
                 DOM.$altMenuContainer.classList.add('d-none');
+                DOM.$selectOnMap.classList.add("d-none");
                 Globals.currentScrollIndex = 1;
             case "directionsResults":
                 DOM.$tabContainer.style.removeProperty("background-color");
@@ -484,10 +523,11 @@ class MenuNavigation {
             case "directionsResults":
                 DOM.$directionsWindow.classList.remove("d-none");
                 Globals.backButtonState = 'directions'; // on revient sur le contrôle !
-                Globals.directions.interactive(true);
+                // Globals.directions.interactive(true);
                 this.#midScroll();
                 break;
             case "searchIsochrone":
+            case "selectOnMapIsochrone":
                 DOM.$search.style.display = "none";
                 DOM.$backTopLeftBtn.classList.remove('d-none');
                 DOM.$isochroneWindow.classList.remove("d-none");
@@ -496,6 +536,7 @@ class MenuNavigation {
                 this.updateScrollAnchors();
                 break;
             case "searchDirections":
+            case "selectOnMapDirections":
                 DOM.$search.style.display = "none";
                 DOM.$backTopLeftBtn.classList.remove('d-none');
                 DOM.$directionsWindow.classList.remove("d-none");