Routing to targets

This example shows how you can use the RouteService to get routing information for a specific target. You can even specify a list of targets and the service will return you travel information for all of them. Please note that you can specify different routing result granularity levels (see API documentation). We will use the default level in this example. To summarize, we will add a source and two target markers and use public transportation to get from A to B and C. We will also add a little circle if people have to switch rides on their route.

You can drag around all markers.

Routing to targets

Get routing information to specific targets

GET YOUR FREE API KEY to use this example
reload
open in new tab
copy HTML
hide code
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <!--  Include leaflet javascript and css -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" crossorigin="">
  <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js" crossorigin=""></script>
  <!--  Include r360.js -->
  <script src="https://releases.route360.net/r360-js/latest.js"></script>

  <style>
    html, body { width: 100%; height: 100%; margin: 0; font-family: sans-serif; }
    #map { width: 100%; height: 100%; }
  </style>
</head>

<body>
  <!--  where the map will live  -->
  <div id="map"></div>
  
  <script>
    $(document).ready(function() {

      var latlons = {
        map: [52.51, 13.37],
        src1: [52.50086, 13.36581],
        trg1: [52.52562, 13.30195],
        trg2: [52.51998, 13.41714]
      };

      // add the map and set the initial center to berlin
      var map = L.map('map').setView(latlons.map, 12);
      map.attributionControl.addAttribution("ÖPNV Daten © <a href='https://www.vbb.de/de/index.html' target='_blank'>VBB</a>");

      // initialise the base map
      r360.basemap({ style: 'basic', apikey: '__APIPLACEHOLDER__' }).addTo(map);

      // create a target marker icon to be able to distingush source and targets
      var redIcon = L.icon({
        iconUrl: 'http://assets.route360.net/leaflet-extras/marker-icon-red.png',
        shadowUrl: 'http://assets.route360.net/leaflet-extras/marker-shadow.png',
        iconAnchor: [12, 45],
        popupAnchor: [0, -35]
      });

      // create a source and a two target markers and add them to the map
      var sourceMarker1 = L.marker(latlons.src1, { draggable : true }).addTo(map);
      var targetMarker1 = L.marker(latlons.trg1, { icon: redIcon, draggable : true }).addTo(map);
      var targetMarker2 = L.marker(latlons.trg2, { icon: redIcon, draggable : true }).addTo(map);

      // add a layer in which we will paint the route
      var routeLayer = L.featureGroup().addTo(map);

      var getRoutes = function() {

        routeLayer.clearLayers();

        // you need to define some options for the polygon service
        // for more travel options check out the other tutorials
        var travelOptions = r360.travelOptions();
        // we only have one source which is the marker we just added
        travelOptions.addSource(sourceMarker1);
        // add two targets to the options
        travelOptions.addTarget(targetMarker1);
        travelOptions.addTarget(targetMarker2);
        // set the travel type to transit
        travelOptions.setTravelType('transit');
        // no alternative route recommendations - this is for pro/advanced plans only
        travelOptions.setRecommendations(-1);
        // please contact us and request your own key
        travelOptions.setServiceKey('__APIPLACEHOLDER__');
        // set the service url for your area
        travelOptions.setServiceUrl('https://api.targomo.com/westcentraleurope/');

        // start the service
        r360.RouteService.getRoutes(travelOptions, function(routes) {

          // one route for each source and target combination
          routes.forEach(function(route) {

            r360.LeafletUtil.fadeIn(routeLayer, route, 1000, "travelDistance");
          });
        });
      }

      getRoutes();

      sourceMarker1.on('dragend', getRoutes);
      targetMarker1.on('dragend', getRoutes);
      targetMarker2.on('dragend', getRoutes);
    });
  </script>
</body>
</html>