Map Matching

From version 3.7 SmartMaps supports the functionality of map matching. This calculates a route on the basis of individual waypoints. In this example, the individual intermediate locations can be simulated by clicking on the map.

The example is complete, you can save it locally in a file and open it up in the browser. You only need to replace the value for the apiKey.

Click on the map and create at least two waypoints to trigger the match routing calculation for the selected points. Make sure that the points are as close to the road network as possible. The routing is done using the new match routing with the car profile.

SmartMaps map

Codebeispiel: Map Matching

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Map Matching</title>
</head>

<body>
  <div id="map-wrapper">
      <div id="waypoints">
        <textarea
          id="waypointsInput"
          placeholder="Waypoints"
          rows="10"
          readonly
        ></textarea>
        <span id="waypointsInputLabel"></span>
      </div>
      <div id="map" style="height: 350px;"></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) {
        //Define text field to be able to display waypoints:
        var waypointsInputTextArea = document.getElementById("waypointsInput");

        // Initialise map
        var map = ym.map("map", {
          center: [49.02166, 8.43942],
          zoom: 17,
        });

        //Initialise GeoJSON layer for match routing and draw on map
        var matchLayer = ym.geoJson();
        matchLayer.addTo(map);

        var waypointsLayer = ym.geoJson();
        waypointsLayer.addTo(map);

       //When adding data to GeoJSON layer, align map to route
        matchLayer.on("add", (e) => {
          if (!map.getBounds().contains(matchLayer.getBounds())) {
            map.fitBounds(matchLayer.getBounds());
          }
        });

        //Initialise match routing for map matching
        var matchRouting = new ym.services.MatchRouting();

        //Draw match routing in case of successful query
        matchRouting.on("success", function (request, response) {
          console.log(response);
          matchLayer.clearLayers();
          matchLayer.addData(response.body);
        });

        //Initialise list for waypoints
        var waypoints = [];

        //Perform map matching when clicking on the map
        map.on("click", function (e) {
          //Determine coordinate of waypoint and draw marker on map
          var latlng = e.latlng;
          var marker = ym.marker(latlng).addTo(waypointsLayer);

          //Add waypoint and calculate the route from at least two waypoints
          waypoints.push([latlng.lng, latlng.lat]);
          waypointsInputTextArea.value = JSON.stringify(waypoints);
          if (waypoints.length >= 2) {
            matchRouting.calcRoute(waypoints);
          }
        });
    });
  </script>
</body>
</html>