Adding a travel time control

In this tutorial, we will show you how to let users select different travel times using the TravelTimeFab angular directive and the map is automatically updated with larger or smaller (timely speaking) polygons. This tutorial builds up on the simple polygon map tutorial, so if you have not had a look, we suggest that you do that first. Otherwise, let's go ahead and add some polygons!

Adding a travel time control

Refine travel times easily

GET YOUR FREE API KEY to use this example
reload
open in new tab
copy HTML
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 angular stuff  -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-aria.js"></script>
  <script src="https://releases.route360.net/r360-js/latest.js"></script>
  <script src="https://releases.route360.net/r360-angular/latest.js"></script>
  <style>
    html, body { width: 100%; height: 100%; margin: 0; font-family: sans-serif; }
    #map { width: 100%; height: 100%; }
    .controls { position: absolute; right: 20px; top: 20px; z-index: 1000;}
    travel-time-fab .md-button.md-fab { text-transform: none; }
  </style>
</head>

<body>
  <!--  where the map will live  -->
  <div id="map"></div>
  <div ng-app="TravelTimeExample" ng-controller="TravelTimeExampleController as vm" class="controls" ng-cloak="" layout="column" layout-align="start end">
      <travel-time-fab label="Max. Travel Time" md-direction="left" model="vm.travelTime" travel-time-range="vm.travelTimes" color-range="vm.colorRanges" md-animation="md-scale" travel-time-values="vm.travelTimeValues">
      </travel-time-fab>
  </div>
  
  <script>
    var latlon = [52.51, 13.37];
    var map = L.map('map').setView(latlon, 13);
    map.attributionControl.addAttribution("ÖPNV Daten © <a href='https://www.vbb.de/de/index.html' target='_blank'>VBB</a>");

    /* to change the location of the map change the lat and long, here 40.717192,-74.012042.
    To change the default zoom level change 17 to another number. 0 is entire world twice over and 18 is the closest you can get
    */

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

    var marker = L.marker((latlon), { draggable: true }).addTo(map);

    var defaultTravelTimes = [600,1200,1800];
    var defaultColors = r360.config.defaultTravelTimeControlOptions.travelTimes.filter(function(t){
      return defaultTravelTimes.indexOf(t.time) > -1;
    }).map(function(t){
      return t.color;
    });

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

    // helper function to encapsulate the show polygon action
    function showPolygons(travelTimes) {
      // 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
      travelOptions.addSource(marker);
      // we want to have polygons for whatever the user selects
      travelOptions.setTravelTimes(travelTimes);
      // lets go via bike
      travelOptions.setTravelType('bike');
      // please contact us and request your own key
      travelOptions.setServiceKey('__APIPLACEHOLDER__');
      // set the service url for your area
      travelOptions.setServiceUrl('https://service.route360.net/germany/');

      // call the service
      r360.PolygonService.getTravelTimePolygons(travelOptions, function(polygons) {
        // in case there are already polygons on the map/layer clear them
        // and fit the map to the polygon bounds ('true' parameter)
        polygonLayer.clearAndAddLayers(polygons, true);
      });

      marker.on('dragend', function(){ showPolygons(travelTimes); });
    };

    angular.module('TravelTimeExample',['ngMaterial', 'ng360'])
    .controller("TravelTimeExampleController", function($scope) {
      var vm = this;

      // define time steps and colors here. Always use time values of the same distance and not too much time.
      // the maximum travel time size is 2 hours, 7200s respectivly, higher values will be blocked be the server
      // travel times are defined in minutes the initial values in seconds...
      this.travelTimes = {times: defaultTravelTimes.map(function(t){ return t / 60 })};
      this.colorRanges = {colors: defaultColors};
      this.travelTime = 1200;
      this.travelTimeValues = [];

      $scope.$watch('vm.travelTimeValues', function() {
        if (vm.travelTimeValues.length > 0) {
          showPolygons(vm.travelTimeValues);
        }
      })
    });
  </script>
</body>
</html>