You may have a use-case where you need the polygons to represent a set distance along the network, as opposed to time. With the edge weight option, you can change the polygon distances you define to be meters, not seconds.

Set edge weight type using travelOptions.setEdgeWeight('distance');.

In this example, we have defined polygons representing travel distances of 1000m, 2000m, and 3000m.

Note: due to the nature of transit 'stops' distance polygons will only work with travel types 'walk', 'bike', and 'car'.

Distance polygons

Display distance-derived polygons on map

GET YOUR FREE API KEY to use this example

reload

open in new tab

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>
    // define a pair of coordinates, where the map should be centered
    // and should serve a the source for polygonization
    var latlon = [52.51, 13.37];

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

    // scale bar
    L.control.scale().addTo(map);

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

    // create the marker and add it to the map
    var marker = L.marker((latlon)).addTo(map);

    // create the layer to add the polygons
    var polygonLayer = r360.leafletPolygonLayer().addTo(map);
    polygonLayer.opacity = .6;
    // set the colors for the distances, 'time' in this case :P
    polygonLayer.setColors([{
      'time': 1000,
      'color': '#66bd63'
    }, {
      'time': 2000,
      'color': '#fee08b'
    }, {
      'time': 3000,
      'color': '#a50026'
    }, ]);

    // you need to define some options for the polygon service
    // for more travel options check out the other tutorials
    var travelOptions = r360.travelOptions();
    // please contact us and request your own key if you don't already have one
    travelOptions.setServiceKey('__APIPLACEHOLDER__');
    // set the service url for your area
    travelOptions.setServiceUrl('https://api.targomo.com/westcentraleurope/');
    // we only have one source which is the marker we just added
    travelOptions.addSource(marker);
    // use distance as opposed to time
    travelOptions.setEdgeWeight('distance');
    // we want to have polygons for 500 to 3000 meters
    travelOptions.setTravelTimes([1000, 2000, 3000]);
    // go by foot
    travelOptions.setTravelType('walk');

    // call the r360°- service
    r360.PolygonService.getTravelTimePolygons(travelOptions, function(polygons) {

      // add the returned polygons to the polygon layer
      // and zoom the map to fit the polygons perfectly
      polygonLayer.clearAndAddLayers(polygons, true);
    });

  </script>
</body>
</html>