Leaflet Time vs Distance Edge Weight
This code example shows you how to switch between the Time and Distance edge weight types. To show the difference in the results, a call is made to the Isochrone API each time the setting is changed and the results are displayed on a leaflet map. Time is expressed in seconds, and distance in meters. The max edge weight is 1800 (seconds/meters) for both ‘time’ and ‘distance’ in this code example.
<!DOCTYPE html>
<html>
<head>
<!-- Include leaflet javascript and css -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js" crossorigin=""></script>
<!-- Include targomo leaflet full build -->
<script src="https://releases.targomo.com/leaflet/latest-full.min.js"></script>
<style>
body,
html {
margin: 0;
width: 100%;
height: 100%;
}
#map {
width: 100%;
height: 100%;
}
.edgeweight-mode-select-container {
position: absolute;
top: 0px;
right: 0px;
padding: 10px;
z-index: 400;
background-color: white;
}
</style>
</head>
<body>
<!-- where the map will live -->
<div id="map"></div>
<!-- checkbox used to change the edge weight mode -->
<div class="edgeweight-mode-select-container">
<input type="checkbox" id="edgeweight-mode-select" checked="true" name="edgeweight"
onchange="switchmode(this);">
<label for="congestion">Checked = 'time', Unchecked = 'distance'</label>
</div>
<script>
// create targomo client
const client = new tgm.TargomoClient('westcentraleurope', '__targomo_key_here__');
// define the basemap
const tilesUrl = 'https://api.maptiler.com/maps/positron/{z}/{x}/{y}@2x.png?key=__your_maptiler_api_key__';
const tileLayer = L.tileLayer(tilesUrl, {
tileSize: 512, zoomOffset: -1,
minZoom: 1, crossOrigin: true
});
// Coordinates to center the map
const center = [52.52, 13.37];
// define the map
var map = L.map('map', {
layers: [tileLayer],
scrollWheelZoom: false
}).setView(center, 12);
// set the attribution
const attributionText = `<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">© Targomo</a>`;
map.attributionControl.addAttribution(attributionText);
// you need to define some options for the polygon service
const options = {
travelType: 'bike',
maxEdgeWeight: 1800,
edgeWeight: 'time',
serializer: 'json'
};
// define the starting point
const source = { id: 0, lat: center[0], lng: center[1] };
// Add a marker for the source on the map.
L.marker([source.lat, source.lng]).addTo(map);
// define the polygon overlay
const polygonOverlayLayer = new tgm.leaflet.TgmLeafletPolygonOverlay({ strokeWidth: 20 });
polygonOverlayLayer.addTo(map);
// Requesting polygons from the Targomo API.
function refreshPolygons() {
client.polygons.fetch([source], options).then((result) => {
polygonOverlayLayer.setData(result);
// calculate bounding box for polygons
const bounds = result.getMaxBounds();
// zoom to the polygon bounds
map.fitBounds(new L.latLngBounds(bounds.northEast, bounds.southWest));
});
}
// Update the polygons each time the selection is updated.
function switchmode(v) {
options.edgeWeight = v.checked ? 'time' : 'distance';
refreshPolygons();
}
// Request polygons once immediately on page load.
refreshPolygons();
</script>
</body>
</html>
Copied to clipboard