Rush-hour analysis mode

Our rush-hour (congestion) mode is based on road network density, with the general understanding that higher road density is present where there is more traffic (or that more traffic is present where there is high road density...) We adjust travel times by comparing the density of a line-segment to the maximum and minimum calculated densities. Higher density segments are assigned slower relative travel speeds (non-linear correlation), while low density are assigned higher relative travel speeds. Rush-hour analysis is relevant to car-travel only.

Rush-hour analysis is not available at all plan levels. Check our plans for details.
Comparing standard and rush-hour modeling

How could congestion affect travel times by car?

GET YOUR FREE API KEY to use this example
reload
open in new tab
copy HTML
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%; }
    .actions {
      position: absolute; right: 10px; top: 10px; z-index: 1000; padding: 10px;
      box-shadow: 0 1px 5px rgba(0,0,0,.4); background-color: rgba(255,255,255,1); 
    }
  </style>
</head>

<body>
  <!--  where the map will live  -->
  <div id="map"></div>
  <div class="actions">
    <input type="checkbox" id="rushHour">
    <label for="test1">Rush Hour</label>
  </div>
  
  <script>

    var rushHour = false;

    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('car');
      // set the service API-key
      travelOptions.setServiceKey('__APIPLACEHOLDER__');
      // set the service url for your area
      travelOptions.setServiceUrl('https://api.targomo.com/northamerica/');

      // set the rush hour attribute
      travelOptions.setRushHour(rushHour);

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

    $('#rushHour').click(function() {
      // your stuff
      rushHour = this.checked;
      showPolygons();
    });

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