Adding a travel time legend - GoogleMaps

Adding a travel time legend - GoogleMaps

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 google maps api -->
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;key=your_google_maps_key" type="text/javascript"></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; }
    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;
        var travelTimes = [600,1200,1800];
        var defaultColors = r360.config.defaultTravelTimeControlOptions.travelTimes.filter(function(t){
          return travelTimes.indexOf(t.time) > -1;
        }).map(function(t){
          return t.color;
        });

        vm.rainbowConf = {
          range : { times : travelTimes.map(function(t){ return t / 60 }) },
          travelTime : 30,
          colorRange :  {
            name: 'Green to Red',
            id: 'default',
            colors: defaultColors,
            opacities: [1, 1, 1]
          }
        };

        // Coordinates to center the map
        var myLatlng = new google.maps.LatLng(52.525595, 13.393085);

        // Other options for the map, pretty much selfexplanatory
        var mapOptions = {
          zoom: 10,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // Attach a map to the DOM Element, with the defined settings
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        // init the first marker
        marker = new google.maps.Marker({
          position: myLatlng,
          draggable: true,
          map: map
        });

        // each map get's it's own polygon layer
        var colorPolygonLayer = r360.googleMapsPolygonLayer(map);

        // attach the click listeners, action when drag finished
        google.maps.event.addListener(marker, 'dragend', function(event) {
            showPolygons(event.latLng.lat(), event.latLng.lng());
        });

        showPolygons(myLatlng.lat(), myLatlng.lng());

        function showPolygons(lat, lng) {

          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/');
          travelOptions.addSource({ lat: lat, lng: lng });
          travelOptions.setTravelTimes(travelTimes);
          travelOptions.setTravelType('transit');
          travelOptions.setDate('20150706');
          travelOptions.setTime('39000');

          // call the service
          r360.PolygonService.getTravelTimePolygons(travelOptions,
            function(polygons) {
              colorPolygonLayer.update(polygons);
            },
            function(status, message) {
              console.log("The Targomo API is not available - double check your configuration options.");
            }
          );
        }
      });
  </script>
</body>
</html>