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
hide code
<!DOCTYPE html>
  <script src=""></script>
  <!--  Include leaflet javascript and css -->
  <link rel="stylesheet" href="" crossorigin="">
  <script src="" crossorigin=""></script>
  <!--  Include r360.js -->
  <script src=""></script>

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

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

      var latlons = {
        map: [52.5325, 13.375],
        src1: [52.514516, 13.350118],
        trg1: [52.5329, 13.3958],
        trg2: [52.5438, 13.3593]

      // add the map and set the initial center to berlin
      var map ='map').setView(, 13);
      map.attributionControl.addAttribution("ÖPNV Daten © <a href='' 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: '',
        shadowUrl: '',
        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() {


        // 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
        // add two targets to the options
        // set the travel type to transit
        // set max routing length - max routing time of 30m for free plan
        // please contact us and request your own key
        // set the service url for your area

        // 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");


      sourceMarker1.on('dragend', getRoutes);
      targetMarker1.on('dragend', getRoutes);
      targetMarker2.on('dragend', getRoutes);