Displaying inverse polygons

Sometimes it might be helpful to not display the colored areas that can be reached from a certain location but to hide areas that are not reachable. In order to do that we created the black and white polygons, or inverse polygonization as we call it. If you only request a single travel time, and this is probably the most common use case for this feature, you can dramatically decrease processing time on the server side and as a side effect decrease the size and download time of the returned polygon.

This could be especially helpful in mobile environments, where bandwidth may be more limited. Additionally, this also helps on slower machines (mobile phones are not super computers, yet) to convert the returned polygon to SVG. Zooming and panning should be much smoother with this setting.

Displaying inverse polygons

Sometimes it might be helpful to not display the colored areas that can be reached from a certain location but to hide areas that are not reachable

GET YOUR FREE API KEY to use this example
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 dragdealer slider bar    -->
  <script src="https://cdn.rawgit.com/skidding/dragdealer/master/src/dragdealer.js"></script>
  <!--  Include r360.js -->
  <script src="https://releases.route360.net/r360-js/latest.js"></script>

  <style>
    html, body { width: 100%; height: 100%; margin: 0; font-family: sans-serif; }
    #map { width: 100%; height: 100%; }
    .controls-panel {
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      background: rgba(255, 255, 255, 0.8);
      padding: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }
    .width-value {
      font-size: 16px;
      font-weight: 500;
      margin-right: 10px;
      width: 140px;
      color: rgba(0, 0, 0, .5);
      text-align: right;
    }
    #actual-width { width: 20px; display: inline-block;}
    #slider { position: relative; height: 20px; width: 50%; }
    #slider .handle {
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
      width: 20px;
      height: 20px;
      background: #70BC7A;
      border-radius: 10px;
      z-index: 2;
    }
    #slider:after {
      content: "";
      position: absolute;
      margin-top: 8px;
      height: 4px;
      background: rgba(0, 0, 0, .5);
      border-radius: 2px;
      left: 0;
      right: 0;
      z-index: 1;
    }
  </style>
</head>

<body>
  <!--  where the map will live  -->
  <div id="map"></div>
  <div class="controls-panel">
      <div class="width-value">
          Opacity: <span id="actual-width">80</span>%
      </div>
      <div id="slider">
          <div class="handle"></div>
      </div>
  </div>
  
  <script>
    var opacity = 80;
    var latlon = [52.51, 13.37];
    var map = L.map('map', { zoomControl: false }).setView(latlon, 14);
    map.attributionControl.addAttribution("ÖPNV Daten © <a href='https://www.vbb.de/de/index.html' target='_blank'>VBB</a>");
    L.control.zoom({ position: 'bottomleft' }).addTo(map);

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

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

    // create the layer in inverse mode
    var polygonLayer = r360.leafletPolygonLayer({ inverse: true }).addTo(map);
    // or you set it to inverse after creation
    polygonLayer.setInverse(true);

    getPolygons = function(){

        // 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);
        // for inverse (black and white) polygons we only need one travel time
        travelOptions.setTravelTimes([900]);
        // set the travel type to walk
        travelOptions.setTravelType('walk');
        // 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/');

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

            // the time is the key for which we want to set the opacity;
            polygonLayer.setColors([{ time: 900, opacity : opacity / 100 }]);
        });
    }

    getPolygons();
    marker.on('dragend', getPolygons());

    // set up slider
    var sliderMax = 100;
    var pixelSlider = new Dragdealer('slider', {
        x: opacity / sliderMax, // set start position
        animationCallback: function(x, y) { // on slider move
          // get converted slider value
          var sliderValue = Math.round(x * sliderMax);
          // set display value
          $('#actual-width').text(sliderValue);
          // update pixel value to slider position
          opacity = sliderValue;
          // re-fetch polygons
          getPolygons();
        }
    });
  </script>
</body>
</html>