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
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>