Route calculation with reverse geocoding

Analogous to reverse geo-coding the waypoints of a route can be transformed into the corresponding addresses.

The example is complete; you can save it locally in a file and view it in the browser. You only have to replace the value for the apiKey.

SmartMaps map

Code example: Show and hide layers

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Route calculation with reverse geocoding</title>
</head>

<body>
  <div id="map-wrapper">
    <div class="geocoder-form" style="z-index:1000">
      <form id="route-reversGeo-form">
        <fieldset>
          <button class="pull-right" type="reset" id="clear-form">Reset</button>&nbsp;&nbsp;
          <button type="submit" class="pull-left">Routing</button>
        </fieldset>
      </form>
    </div>
    <div id="map" style="width: 600px; height: 600px;"></div>
  </div>

  <!-- SmartMaps-API -->
  <script src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3&apiKey={API_KEY}"></script>
  <script>
    ym.ready(function(modules) {

      var routeForm = document.getElementById('route-reversGeo-form');
      var reset = document.getElementById("clear-form");

      var routing = new ym.services.Routing();

      // Define card content.
      var stationLayer = ym.layerGroup();
      var waypoints = [];

      // Set route layer. This is the complete logic to draw a route with all
      // its stations.
      routingLayer = ym.geoJson(null, {
        style: function(feature) {
          // Polyline einzeichnen.
          if (feature.geometry.type === "LineString") {
            return {
              weight: 7,
              opacity: 0.8
            };
          }
        },

        pointToLayer: function(feature, latlng) {
          // Draw in stations with information.
          var waypointMarker = ym.circleMarker(latlng);
          waypointMarker.bindPopup(feature.properties.description);
          return waypointMarker;
        }
      });

      // Define map
      var map = ym.map("map", {
        center: ym.latLng(48.991897, 8.435568),
        zoom: 13
      });

      // Drawing layers.
      map.addLayer(routingLayer);
      map.addLayer(stationLayer);

      map.on('click', function(e) {
        waypoints.push(e.latlng);
        stationLayer.addLayer(ym.marker(e.latlng, {
          icon: ym.provider.Icon.Default()
        }));
      });

      reset.addEventListener("click", function() {
        // Discard old card content.
        waypoints = [];
        if (routingLayer) {
          routingLayer.clearLayers();
        }
        if (stationLayer) {
          stationLayer.clearLayers();
        }
      }, false);

      routeForm.onsubmit = function(e) {
        e.preventDefault();
        if (waypoints.length > 1) {
          routing.calcRoute(waypoints);
        }
        else {
          alert("Please add Stations by clicking in map");
        }
      };

      routing.on("success", function(request, response) {
        routingLayer.addData(response.body);
        map.fitBounds(routingLayer.getBounds());
      });

    });
  </script>
</body>
</html>