Adding a polygon stroke-width control

In this example, we will show you how to change the stroke width of the polygon layer. Sometimes the default stroke width may cause a too inaccurate visualization of travel times. So you should be to able to fine-tune the value to suit your needs.

Use .setStrokeWidth() to define the stroke width:

// this is the width of the stroke in pixels
polygonLayer.setStrokeWidth(20);

We recommend to only use values >10px in live environments - otherwise rendering issues may occur.

Adding a polygon stroke-width control

Sometimes the default stroke width may cause a too inaccurate visualization of travel times. You can fine-tune the value to fit your needs.

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">
          Stroke-width: <span id="actual-width">10</span>px
      </div>
      <div id="slider">
          <div class="handle"></div>
      </div>
  </div>
  
  <script>
    var pixel = 10;
    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 to add the polygons
    var polygonLayer = r360.leafletPolygonLayer().addTo(map);

    // helper function to encapsulate the show polygon action
    var showPolygons = function() {
      polygonLayer.setStrokeWidth(pixel);
      // 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/');
      // add the predefined source to the map
      travelOptions.addSource(marker);
      // add some travle time values
      travelOptions.setTravelTimes([300, 600, 900]);
      // lets go via bike
      travelOptions.setTravelType('bike');
      // call the service
      r360.PolygonService.getTravelTimePolygons(travelOptions, function(polygons) {
        // in case there are already polygons on the map/layer clear them
        // and don't fit the map to the polygon bounds ('false' parameter)
        polygonLayer.clearAndAddLayers(polygons, false);
      });
    };

    // call the helper function to display polygons with initial value
    showPolygons();
    marker.on('dragend', showPolygons)

    // set up slider
    var sliderMax = 60;
    var pixelSlider = new Dragdealer('slider', {
        x: pixel / 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
          pixel = sliderValue;
          // re-fetch polygons
          showPolygons();
        }
    });
  </script>
</body>
</html>