Different Colors per Polygon Source

Normally, the Targomo polygons are all symbolized the same for all sources. If we want to show a source's polygons as unique from other polygons, we need to create a new polygon layer for each source.

Different color polygons

Display polygons with different colors

GET YOUR FREE API KEY to use this example
reload
open in new tab
copy HTML
hide code
<!DOCTYPE html>
<html>
<head>
  <!--  Include jquery - required for XHR requests -->
  <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 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%; }
  </style>

</head>
<body>
  <div id="map"></div>
  
  <script>
    // define our 2 source locations
    var latlon1 = [52.51, 13.37];
    var latlon2 = [52.53, 13.39];
    // set map center to the middle of the two points
    var map = L.map('map').setView(
      [(latlon1[0]+latlon2[0])/2,(latlon1[1]+latlon2[1])/2], 
    13);

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

    // set up marker and polkygons for source 1
    var marker1 = L.marker((latlon1)).addTo(map);
    var polygonLayer1 = r360.leafletPolygonLayer().addTo(map);
    polygonLayer1.opacity = .6;
    polygonLayer1.setColors([{
      'time': 600,
      'color': '#6baed6'
    }, {
      'time': 1200,
      'color': '#3182bd'
    }, {
      'time': 1800,
      'color': '#08519c'
    }, ]);

    // set up marker and polkygons for source 2
    var marker2 = L.marker((latlon2)).addTo(map);
    var polygonLayer2 = r360.leafletPolygonLayer().addTo(map);
    polygonLayer2.opacity = .6;
    polygonLayer2.setColors([{
      'time': 600,
      'color': '#fb6a4a'
    }, {
      'time': 1200,
      'color': '#de2d26'
    }, {
      'time': 1800,
      'color': '#a50f15'
    }, ]);

    // set travel options
    var travelOptions = r360.travelOptions();
    travelOptions.setServiceKey('__APIPLACEHOLDER__');
    travelOptions.setServiceUrl('https://api.targomo.com/westcentraleurope/');
    travelOptions.setTravelTimes([600, 1200, 1800]);
    travelOptions.setTravelType('walk');

    // set polygons per source
    function setPolygons(source, polygonLayer) {
      travelOptions.setSources([source])
      r360.PolygonService.getTravelTimePolygons(travelOptions, function(polygons) {
        polygonLayer.addLayer(polygons);
      });
    }
    
    setPolygons(marker1, polygonLayer1);
    setPolygons(marker2, polygonLayer2);
  </script>
</body>
</html>