Adding a travel start date and time control for public transit

In this tutorial, we will exemplify how to display polygons for public transportation. Since public transportation is time and date dependent, it follows a given schedule and we need a way to select the time and date the user wants to travel. Here is the result:

Adding a travel start date and time control

Select time and date for public transport

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">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <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>
  <!--  Include r360.js and angular plugin -->
  <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;
      padding: 30px 30px 10px 30px;
      top: 0px;
      right: 0px;
      text-align: center;
      margin: 20px;
      min-width: 180px;
      background: white;
      z-index: 1000;
    }
    .controls .departure { padding: 0px 0px 16px 0px; display: inline-block; }
  </style>
</head>

<body>
  <body ng-app="DateTimeExample" ng-controller="DateTimeExampleController as vm">
  <div id="map"></div>
  <div class="controls md-whiteframe-3dp" ng-cloak="" layout="column">
    <span class="departure">Departure: {{vm.dateFormat()}}</span>
    <md-datepicker ng-model="vm.date" md-placeholder="Enter date" ng-change="vm.update()"></md-datepicker>

    <div layout="row" layout-align="center center">
      <md-select flex="50" ng-model="vm.hours" ng-change="vm.update()">
        <md-option ng-repeat="hour in vm.hoursOptions" value="{{hour}}">{{hour}}</md-option>
      </md-select>
      <span style="margin: 0px 16px">:</span>
      <md-select flex="50" ng-model="vm.minutes" ng-change="vm.update()">
        <md-option ng-repeat="minute in vm.minutesOptions" value="{{minute}}">{{minute}}</md-option>
      </md-select>
    </div>
  </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);

    // create a 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);

    // helper function to encapsulate the show polygon action
    function showPolygons(date, time, callback) {

      // 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);
      // 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/');
      // we want to have polygons for 10 to 15 minutes
      travelOptions.setTravelTimes([600, 1200, 1800]);
      // get the selected travel type from the control
      travelOptions.setTravelType('transit');
      // and get the date and time from the controls
      travelOptions.setDate(date);
      // travelOptions.setDate('20140825');
      travelOptions.setTime(time);
      // travelOptions.setTime('32640');

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

    angular.module('DateTimeExample',['ngMaterial', 'ng360'])
    .controller("DateTimeExampleController", function($scope, $filter, $mdToast) {
      var vm = this;

      this.date = new Date();
      this.minutes = Math.floor(this.date.getMinutes() / 5) * 5;
      this.hours   = this.date.getHours();
      this.dateFormat = function(){
        return $filter('date')(vm.date, 'hh:mm a');;
      }

      this.hoursOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
      this.minutesOptions = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55]

      this.update = function() {
        vm.date.setMinutes(vm.minutes);
        vm.date.setHours(vm.hours);

        var indicator = $mdToast.simple().textContent('Updating...').hideDelay(0);
        $mdToast.show(indicator);

        function callback() {
          $mdToast.hide(indicator);
        }

        // Update the polygons
        showPolygons($filter('date')(vm.date,'yyyymmdd'), String(vm.hours * 3600 + vm.minutes * 60), callback)
      }

      this.update()
    });
  </script>
</body>
</body></html>