GeoJSON Polygons

Why we do SVG:

if you want two overlapping and transparent isochrones the overlapping part will usually get darker and mix the colors.

A way to get around this is to use "donut" polygons (disadvantage: much higher data volume, doesn't work with any sort of stroke-width [looks ugly])

The way we've chosen is to group all isochrones in a SVG group, make every isochrone completely opaque, and the control the transparency globally for the entire group (advantage: low data volume, looks pretty, allows stroke-with "fluffiness", disadvantage: not supported by common geojson libs).

Why we do not use GeoJSON (by default):

GeoJSON requires many things that aren't required for our use case. These things (mainly no overlapping points) require extra effort for rendering, and make the data volume a lot higher. Additionally, the GeoJSON polygons overlap, which makes the great symbology we get from SVG near-impossible.

But you can get GeoJSON from us if you want. We recommend that you use our SVG format for VISUALIZATION since it is much faster, and looks better. If you want to use it in different libs or for further analysis (e.g. in desktop GIS), GeoJSON may be the format you want.

Buffering and simplifying GeoJSON outputs is not available for all plan levels. Check our plans for details.
Displaying raw GeoJSON in leaflet

Display GeoJSON polygons instead of SVG

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; }
    #map { width: 100%; height: 100%; }
  </style>
</head>

<body>
  <!--  where the map will live  -->
  <div id="map"></div>
  
  <script>
    // define a pair of coordinates, where the map should be centered
    // and should serve a the source for polygonization
    var latlon = [52.51, 13.37];

    // add the map and set the initial center to berlin
    var map = L.map('map').setView(latlon, 14);
    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);

    // create the marker and add it to the map
    var marker = L.marker((latlon)).addTo(map);

    // 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 if you don't already have one
    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);
    // we want to have a single polygon for 30 minutes
    travelOptions.setTravelTimes([1200,600]);
    // go by foot
    travelOptions.setTravelType('walk');
    // request geojson
    travelOptions.setPolygonSerializer('geojson');
    // wgs84
    travelOptions.setSrid(4326);
    // ~100m in longitudinal degrees at 52° latitude
    var bufferLengthsMeters = r360.Util.metersInDegrees(100, latlon[0]);
    travelOptions.setBuffer(bufferLengthsMeters.lng);

    var geoJsonLayer = L.geoJson(null, {
      "fillColor" : "#006837",
      "fillOpacity" : 0.4,
      "color" : "#006837",
      "stroke" : false,
      "fill" : true
    }).addTo(map);

    // call the r360°- service
    r360.PolygonService.getTravelTimePolygons(travelOptions, function(geojsonPolygons){
      geoJsonLayer.addData(geojsonPolygons);
      map.fitBounds(geoJsonLayer.getBounds());
    });
  </script>
</body>
</html>