Displaying Polygons in black and white

Expanding on the inverse polygons, we can also build custom polygons in the style we want. Black & white polygons are an example of this which could be useful for very busy maps that already have colorful basemaps or other data.

Displaying Polygons in black and white

We can customize the polygons to suit our display needs and constraints

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 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(){

        polygonLayer.setColors([
            { 'time': 300, 'opacity' : opacity / 100 },
            { 'time': 600, 'opacity' : (opacity / 100) - 0.1 },
            { 'time': 900, 'opacity' : (opacity / 100) - 0.2 }
        ]);

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

    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>