Adding a travel time legend

Adding a travel time legend

Show users which travel times the polygon colors represent

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>
  <!--  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; bottom: 40px; left: 0px; right: 0px; z-index: 1000}
    r360-rainbow { width: 420px; margin: auto; }
    r360-rainbow label {
      display: inline-block;
      font-size: 13px;
      margin: 0;
      padding: .5rem 0;
      text-align: center;
      color: rgba(255,255,255,.8);
    }
  </style>
</head>

<body>
  <!--  where the map will live  -->
  <div id="map"></div>
  <div ng-app="RainbowExample" ng-controller="RainbowExampleController as vm" class="controls" ng-cloak="" layout="column" layout-align="start end">
    <r360-rainbow travel-time="vm.rainbowConf.travelTime" travel-time-range="vm.rainbowConf.range" color-range="vm.rainbowConf.colorRange">
    </r360-rainbow>
  </div>
  
  <script>
    angular.module('RainbowExample', ['ngMaterial', 'ng360'])
      .controller("RainbowExampleController", function() {

        var vm = this;
        vm.rainbowConf = {
            range: { times: [10, 20, 30] },
            travelTime: 30,
            colorRange: {
                "name": "Colorblind",
                "id": 1,
                "colors": ["#142b66", "#9527BC", "#DF2A5C"],
                "opacities": [1, 1, 1, 1, 1, 1]
            }
        };

        // define a pair of coordinates, where the map should be centered
        // and should serve a the source for polygonization
        var latlon = [52.51, 13.37];

        // add the map and set the initial center to berlin
        var map = L.map('map').setView(latlon, 14);
        map.attributionControl.addAttribution("ÖPNV Daten © <a href='https://www.vbb.de/de/index.html' target='_blank'>VBB</a>");
        
        // initialise the base map
        r360.basemap({ style: 'basic', apikey: '__APIPLACEHOLDER__' }).addTo(map);

        // create the marker and add it to the map
        var marker = L.marker(latlon, { 'draggable': true }).addTo(map);

        // create the layer to add the polygons
        var polygonLayer = r360.leafletPolygonLayer().addTo(map);
        polygonLayer.setColors([
          { 'time':  600, 'opacity': 0.4, 'color': '#142b66' },
          { 'time': 1200, 'opacity': 0.4, 'color': '#9527BC' },
          { 'time': 1800, 'opacity': 0.4, 'color': '#DF2A5C' },
        ]);

        var showPolygons = function() {
            // 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://service.route360.net/germany/');
            // we only have one source which is the marker we just added
            travelOptions.addSource(marker);
            // we want to have polygons for 5 to 30 minutes
            travelOptions.setTravelTimes([600, 1200, 1800]);
            // go by foot
            travelOptions.setTravelType('walk');

            // call the r360°- service
            r360.PolygonService.getTravelTimePolygons(travelOptions, function(polygons) {
                // add the returned polygons to the polygon layer
                // and zoom the map to fit the polygons perfectly
                polygonLayer.clearAndAddLayers(polygons, true);
            });
        }

        showPolygons();
        marker.on('dragend', showPolygons);
    });
  </script>
</body>
</html>