Changing travel type

All regions have walk, bike, and car avaialble, and regions with GTFS data have transit mode enabled as well.

Use .setTravelType() to define the mode:

// set for bike
Setting and changing travel type

Update polygons depending on mode-of-transport

GET YOUR FREE API KEY to use this example
open in new tab
copy HTML
hide code
<!DOCTYPE html>
  <!--  Include jquery - required for XHR requests -->
  <script src=""></script>
  <!--  Include leaflet javascript and css -->
  <link rel="stylesheet" href="" crossorigin="">
  <script src="" crossorigin=""></script>
  <!--  Include r360.js -->
  <script src=""></script>
  <!-- Icons -->
  <link rel="stylesheet" href="">

    html, body { width: 100%; height: 100%; margin: 0; font-family: sans-serif; }
    #map { width: 100%; height: 100%; }
    .button-group {
      position: absolute; right: 10px; top: 10px; z-index: 1000;
      box-shadow: 0 1px 5px rgba(0,0,0,.4); background-color: rgba(255,255,255,1); 
    .button {
      font-family: sans-serif; text-transform: uppercase;
      color: #666; cursor: pointer; padding: 10px; display: inline-block;
    .button:hover { background-color: #EEE; } { color: rgb(63,81,181); }

  <!--  where the map will live  -->
  <div id="map"></div>
  <div id="selectionBar" class="button-group">
    <div id="btn-walk" onclick="changeMode(&apos;walk&apos;)" class="button"><i class="material-icons">directions_walk</i></div>
    <div id="btn-bike" onclick="changeMode(&apos;bike&apos;)" class="button active"><i class="material-icons">directions_bike</i></div>
    <div id="btn-car" onclick="changeMode(&apos;car&apos;)" class="button"><i class="material-icons">directions_car</i></div>
    <div id="btn-transit" onclick="changeMode(&apos;transit&apos;)" class="button"><i class="material-icons">directions_transit</i></div>
    var travelMode = 'bike';
    var latlon = [45.5259, -122.685];
    var map ='map', { zoomControl: false }).setView(latlon, 14);
    map.attributionControl.addAttribution("<a href='' target='_blank'>GTFS Data</a>");
    L.control.zoom({ position:'bottomleft' }).addTo(map);

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

    // create a source and a two target markers and add them to the map
    var sourceMarker = L.marker(latlon, { draggable: true }).addTo(map);

    // create the layer to add the polygons
    var polygonLayer = r360.leafletPolygonLayer().addTo(map);

    // helper function to encapsulate the show polygon action
    var showPolygons = function() {
      var travelOptions = r360.travelOptions();
      // add the predefined source to the map
      // add some travel time values
      travelOptions.setTravelTimes([600, 1200, 1800]);
      // set inital travel time
      // set the service API-key
      // set the service url for your area

      // call the service
      r360.PolygonService.getTravelTimePolygons(travelOptions, function(polygons) {
        // in case there are already polygons on the map/layer clear them
        polygonLayer.clearAndAddLayers(polygons, true);

    // call the helper function to display polygons with initial value
    // re-run the polygons when we move a marker
    sourceMarker.on('dragend', function(){ showPolygons(true); });

    // change polygons on button click
    var changeMode = function(value) {
      travelMode = value;
      $("#selectionBar .active").removeClass('active');