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
travelOptions.setTravelType('bike');
Setting and changing travel type

Update polygons depending on mode-of-transport

GET YOUR FREE API KEY to use this example
hide code
<!DOCTYPE html>
<html>
<head>
  <!--  Include jquery - required for XHR requests -->
  <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>
  <!-- Icons -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

  <style>
    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; }
    .button.active { color: rgb(63,81,181); }
  </style>
</head>

<body>
  <!--  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>
  </div>
  
  <script>
    var travelMode = 'bike';
    var latlon = [45.5259, -122.685];
    
    var map = L.map('map', { zoomControl: false }).setView(latlon, 14);
    map.attributionControl.addAttribution("<a href='https://navitia.opendatasoft.com/explore/dataset/us-or/table/' 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
      travelOptions.addSource(sourceMarker);
      // add some travel time values
      travelOptions.setTravelTimes([600, 1200, 1800]);
      // set inital travel time
      travelOptions.setTravelType(travelMode);
      // set the service API-key
      travelOptions.setServiceKey('__APIPLACEHOLDER__');
      // set the service url for your area
      travelOptions.setServiceUrl('https://api.targomo.com/northamerica/');

      // 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
    showPolygons();
    // 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');
      $("#btn-"+value).addClass('active');
      showPolygons();
    }

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