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

  

Place two markers on the map to calculate the route

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>