Route ou chemin ?

J’ai testé la mise en place de couleurs différenciées pour les différents types de revêtements d’un itinéraire de randonnée.

J’ai fait le test pour le circuit au départ de Fontaine-Heudebourg. J’ai simplement ajouté des repères (waypoints) dans le fichier GPX. Ces repères indiquent la nature du terrain qui suit. J’utilise ensuite cette info pour tracer (polyline) l’itinéraire sur la carte de BaladesEnNormandie.

Maintenant que la fonction existe, il suffit de placer ces repères sur les prochains itinéraires…

Lorsque le gpx d’un circuit ne possède pas ces repères, la légende des couleurs n’apparaît pas sur la carte.

[maj du 22/03/2023] Bruno, tu m’écris que les waypoints créés pour cet effet sont visibles sur certaines applications GPS, ce qui n’a pas d’intérêt. Tu as raison. J’ai donc déplacé ces waypoints. Ils ne sont plus sur le fichier GPX, mais dans la table de données du circuit. Merci pour le retour.

[maj du 24/03/2023] Pour les questions concernant le code, n’oubliez pas qu’il est visible (index.min.js). Vous pouvez le décompresser avec Visual Studio Code par expl. Voici la partie qui concerne la différentiation de terrain de l’itinéraire :

if (segment.length < 2) { 
      // s'il n'y a pas de waypoints de type de terrain
      const poly = new google.maps.Polyline({
        path: points,
        strokeColor: couleur,
        strokeOpacity: 1.0,
        strokeWeight: 2,
      });
      poly.setMap(map);
    } else { 
      // s'il y a des waypoints de type de terrain
      let compteurS = 0,
        compteurC = 0,
        compteurR = 0,
        compteurRT = 0;
      
       segment.forEach((seg, i) => {
        const terrainType = terrain[i];
        const polyOptions = {
          path: seg,
          strokeOpacity: 1.0,
          strokeWeight: 5,
        };

        switch (terrainType) {
          case "sentier":
            sentierArray[compteurS++] = new google.maps.Polyline({
              ...polyOptions,
              strokeColor: colArray["sentier"],
            });
            break;
          case "chemin":
            cheminArray[compteurC++] = new google.maps.Polyline({
              ...polyOptions,
              strokeColor: colArray["chemin"],
            });
            break;
          case "rue":
            rueArray[compteurR++] = new google.maps.Polyline({
              ...polyOptions,
              strokeColor: colArray["rue"],
            });
            break;
          case "route":
            routeArray[compteurRT++] = new google.maps.Polyline({
              ...polyOptions,
              strokeColor: colArray["route"],
            });
            break;
        }
      });

      //---------------------------------------
      for (i = 0; i < segment.length; i++) {
        const poly = new google.maps.Polyline({
          path: segment[i],
          strokeColor: colArray[terrain[i]],
          strokeOpacity: 1.0,
          strokeWeight: 2,
        });
        poly.setMap(map);
      }
    }

      // légende interactive de terrain
      const icons = [
        { id: "iconLS", array: sentierArray, compteur: compteurS },
        { id: "iconLC", array: cheminArray, compteur: compteurC },
        { id: "iconLR", array: rueArray, compteur: compteurR },
        { id: "iconLRT", array: routeArray, compteur: compteurRT },
      ];

      icons.forEach((icon) => {
        const element = document.getElementById(icon.id);
        element.onmouseover = () => {
          icon.array.forEach((item) => item.setMap(map));
        };
        element.onmouseout = () => {
          icon.array.forEach((item) => item.setMap(null));
        };
      });