feat(directions): add bike routing

Author: azarz

.github/workflows/android-deploy.yml

@@ -21,6 +21,7 @@ jobs:
           echo "GPF_key=${{ secrets.GPF_key }}" > .env
           echo "signalement_url=${{ secrets.SIGNALEMENT_URL }}" >> .env
           echo "osm_bearer_token=${{ secrets.OSM_BEARER_TOKEN }}" >> .env
+          echo "geovelo_key=${{ secrets.GEOVELO_KEY }}" >> .env
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

.github/workflows/ios-deploy.yml

@@ -21,6 +21,7 @@ jobs:
           echo "GPF_key=${{ secrets.GPF_key }}" > .env
           echo "signalement_url=${{ secrets.SIGNALEMENT_URL }}" >> .env
           echo "osm_bearer_token=${{ secrets.OSM_BEARER_TOKEN }}" >> .env
+          echo "geovelo_key=${{ secrets.GEOVELO_KEY }}" >> .env
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

src/css/directions.css

@@ -76,6 +76,7 @@
   background-position: 12px 3px;
   font-family: "Open Sans Semibold";
   font-size: 14px;
+  flex-shrink: 0;
 }
 
 .divDirectionsTransport input[type="radio"]:checked + label, .divDirectionsComputation input[type="radio"]:checked + label {
@@ -92,6 +93,10 @@
   transform: translateX(-5px);
 }
 
+.divDirectionsTransport input[id="directionsTransportVelo"]:checked ~ .sliderDirections {
+  transform: translateX(calc(200% - 15px));
+}
+
 .sliderDirections, .sliderComputation {
   position: absolute;
   display: flex;

src/js/directions/directions-dom.js

@@ -75,6 +75,12 @@ let DirectionsDOM = {
           transport = self.dom.inputPedestrian.value;
         }
       }
+      // vélo ?
+      if (self.dom.inputBicycle) {
+        if (self.dom.inputBicycle.checked) {
+          transport = self.dom.inputBicycle.value;
+        }
+      }
 
       var computation = null;
       // fast ?
@@ -225,6 +231,27 @@ let DirectionsDOM = {
     labelCar.title = "Véhicule";
     div.appendChild(labelCar);
 
+    var inputBicycle = this.dom.inputBicycle = document.createElement("input");
+    inputBicycle.id = "directionsTransportVelo";
+    inputBicycle.type = "radio";
+    inputBicycle.name = "Transport";
+    inputBicycle.value = "Velo";
+    inputBicycle.addEventListener("change", function (e) {
+      if (e.target.checked) {
+        self.obj.configuration.profile = "bicycle";
+      }
+    });
+    div.appendChild(inputBicycle);
+
+    var labelBicycle = document.createElement("label");
+    var spanBicycle = document.createElement("span");
+    labelBicycle.textContent = "À vélo";
+    labelBicycle.appendChild(spanBicycle);
+    labelBicycle.className = "lblDirectionsTransport";
+    labelBicycle.htmlFor = "directionsTransportVelo";
+    labelBicycle.title = "À vélo";
+    div.appendChild(labelBicycle);
+
     var slider = document.createElement("span");
     slider.className = "sliderDirections";
     div.appendChild(slider);

src/js/directions/directions-results-dom.js

@@ -41,7 +41,8 @@ let DirectionsResultsDOM = {
       data.distance,
       data.duration,
       data.transport,
-      data.computation
+      data.computation,
+      data.waypoints,
     ));
     // ajout du bouton détails
     noDetailsDiv.appendChild(this.__addResultsDetailsContainerDOMElement());
@@ -79,7 +80,7 @@ let DirectionsResultsDOM = {
      * @returns {DOMElement}
      * @private
      */
-  __addResultsSummaryContainerDOMElement (distance, duration, transport, computation) {
+  __addResultsSummaryContainerDOMElement (distance, duration, transport, computation, waypoints = []) {
     var div = document.createElement("div");
     div.id = "directionsSummary";
     div.className = "";
@@ -109,6 +110,19 @@ let DirectionsResultsDOM = {
     labelComputation.className = "lblDirectionsSummaryComputation";
     labelComputation.textContent = computation;
     line2.appendChild(labelComputation);
+    if (transport === "Velo") {
+      var linkGeovelo = document.createElement("a");
+      const start = waypoints.shift();
+      const end = waypoints.pop();
+      linkGeovelo.href = `https://www.geovelo.app/route?from=${start[0]},${start[1]}&to=${end[0]},${end[1]}`;
+      if (waypoints.length > 0) {
+        waypoints = waypoints.map( point => `${point[0]},${point[1]}`);
+        linkGeovelo.href += `&steps=${waypoints.join(";")}`;
+      }
+      linkGeovelo.target = "_blank";
+      linkGeovelo.textContent = "Navigation, détails et itinéraires alternatifs sur Géovélo";
+      line2.appendChild(linkGeovelo);
+    }
 
     div.appendChild(line1);
     div.appendChild(line2);

src/js/directions/directions-results.js

@@ -24,7 +24,8 @@ class DirectionsResults {
       distance : "",
       transport : "",
       computation : "",
-      instructions : [] // [ routes[0].legs ] : [distance, duration, [steps], summary]
+      instructions : [], // [ routes[0].legs ] : [distance, duration, [steps], summary]
+      wapoints: [],
     };
 
     // target