Skip to content

Here is the HTML code converted to Markdown format:

Route Calculation with Geocoding

The basic functionality of the SmartMaps API also includes the possibility to calculate arbitrary routes. To calculate a route, at least the start and end point of the route is required. The coordinates of these points can be determined from address data, as this example demonstrates. The example is complete; you can save it locally in a file and open it in the browser. You only have to replace the value for the apiKey.

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Route calculation</title>
</head>
<body>
  <div id="map-wrapper">
    <div class="geocoder-form" style="z-index:1000">
      <form id="route-single-slot-form">
        <fieldset>
          <input type="text" name="RouteStart" id="RouteStart" value="São Paulo" placeholder="RouteStart">
          <input type="text" name="RouteEnd" id="RouteEnd" value="Rio de Janeiro" placeholder="RouteEnd">
          Country <select type="text" name="RouteEnd" id="RouteCountry" value="BRA" placeholder="RouteEnd"></select>
          <button type="submit">send</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 countrys = {
        "AT": "Austria",
        "CA": "Canada",
        "DE": "Germany",
      }

      select = document.getElementById('RouteCountry');
      for (let country in countrys){
        var opt = document.createElement('option');
        opt.value = country;
        opt.innerHTML = countrys[country];
        select.appendChild(opt);
      }
      document.getElementById('RouteCountry').value = "BR";

      var routeSingleSlotForm = document.getElementById('route-single-slot-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) {
          // Drawing a polyline
          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(-15, -47),
        zoom: 3
      });

      // Draw in route layer.
      map.addLayer(routingLayer);
      map.addLayer(stationLayer);

      routeSingleSlotForm.onsubmit = function(e) {
        // Discard old card content.
        waypoints = [];
        if (routingLayer) {
          routingLayer.clearLayers();
        }
        if (stationLayer) {
          stationLayer.clearLayers();
        }
        e.preventDefault();
        modules.geocode({
          singleSlot: document.getElementById('RouteStart').value,
          country: document.getElementById('RouteCountry').value
        });
        modules.geocode({
          singleSlot: document.getElementById('RouteEnd').value,
          country: document.getElementById('RouteCountry').value
        });
      };

      ym.services.geoCoder.on('success', function(req, res) {
        let firstelement = true;
        var geoJSONCoords = [];
        var geoJson = ym.geoJson(res.body, {
          onEachFeature: function(feature, layer) {
            layer.setIcon(ym.provider.Icon.Default());
            var popUpContent = "";
            if (feature.properties.street) {
              popUpContent += feature.properties.street + ", "
            }
            if (feature.properties.zip) {
              popUpContent += feature.properties.zip + " "
            }
            if (feature.properties.city) {
              popUpContent += feature.properties.city + " "
            }
            if (feature.properties.cityPart) {
              popUpContent += feature.properties.cityPart
            }
            layer.bindPopup(popUpContent);
            geoJSONCoords.push(ym.latLng(feature.geometry.coordinates[1], feature.geometry.coordinates[0]));
          },
          filter: function(feature, layer) {
            if (firstelement == true) {
              firstelement = false;
              return true;
            } else {
              return false;
            }
          }
        });
        stationLayer.addLayer(geoJson);

        // If there is more than one result in the list of geocoded addresses 
        // the first one is used.
        waypoints.push(geoJSONCoords[0]);

        if (waypoints.length > 1) {
          routing.calcRoute(waypoints);
        }
      });

      ym.services.geoCoder.on('error', function(req, res, errorType) {
        console.log(arguments);
      });

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

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

Replace {API_KEY} with your actual API key to test the example locally.