Adding a travel type control

In this tutorial, we will show you how to let users select different travel type, like bike, car or walk, using the TravelTypeFab angular directive and the map is automatically updated with the calculated polygons. You can use this TravelTypeFab for anything you want, e.g. select different travel speeds for fast or slow bikers.

Adding a travel type control

Refine travel modes 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">
  <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; right: 20px; top: 20px; z-index: 1000;}
  </style>
</head>

<body>
  <!--  where the map will live  -->
  <div id="map"></div>
  <div ng-app="TravelTypeExample" ng-controller="TravelTypeExampleController as vm" class="controls" ng-cloak="" layout="column" layout-align="start end">
    <travel-type-fab label="Travel Type" md-direction="left" md-animation="md-scale" model="vm.travelType">
    </travel-type-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);

    // 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();
    // add it to the map
    map.addLayer(polygonLayer);

    // helper function to encapsulate the show polygon action
    function showPolygons(travelType) {

      // you need to define some options for the polygon service
      // for more travel options check out the other tutorials
      var travelOptions = r360.travelOptions();
      // please contact us and request your own key
      travelOptions.setServiceKey('__APIPLACEHOLDER__');
      // set the service url for your area
      travelOptions.setServiceUrl('https://api.targomo.com/westcentraleurope/');
      // we only have one source which is the marker we just added
      travelOptions.addSource(marker);
      // we want to have polygons for 10 to 30 minutes
      travelOptions.setTravelTimes([600,1200, 1800]);
      // get the selected travel type from the control
      travelOptions.setTravelType(travelType);
      // will only be considered if travel type is transit
      travelOptions.setDate('20150706');
      travelOptions.setTime('39000');

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

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

        this.travelType = 'walk';

        $scope.$watch('vm.travelType', function() {
          showPolygons(vm.travelType)
        })
      });

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