Distance-derived polygons
You may have a use-case where you need the polygons to represent a set distance along the network, as opposed to time. With the edge weight option, you can change the polygon distances you define to be meters, not seconds.
Set edge weight type using travelOptions.setEdgeWeight('distance');
.
In this example, we have defined polygons representing travel distances of 1000m, 2000m, and 3000m.
Note: due to the nature of transit 'stops' distance polygons will only work with travel types 'walk', 'bike', and 'car'.
Distance polygons
Display distance-derived polygons on map
GET YOUR FREE API KEY to use this example
<!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 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>
<!-- 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>");
// scale bar
L.control.scale().addTo(map);
// 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);
// create the layer to add the polygons
var polygonLayer = r360.leafletPolygonLayer().addTo(map);
polygonLayer.opacity = .6;
// set the colors for the distances, 'time' in this case :P
polygonLayer.setColors([{
'time': 1000,
'color': '#66bd63'
}, {
'time': 2000,
'color': '#fee08b'
}, {
'time': 3000,
'color': '#a50026'
}, ]);
// 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);
// use distance as opposed to time
travelOptions.setEdgeWeight('distance');
// we want to have polygons for 500 to 3000 meters
travelOptions.setTravelTimes([1000, 2000, 3000]);
// go by foot
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);
});
</script>
</body>
</html>