Leaflet Inverse Isochrones
Display inverse isochrones on a leaflet map
<!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%;
}
</style>
</head>
<body>
<!-- where the map will live -->
<div id="map"></div>
<script>
async function initMap() {
// create targomo client
const client = new tgm.TargomoClient('britishisles', '__targomo_key_here__');
// define the basemap
const tileLayer = new tgm.leaflet.TgmLeafletTileLayer(client, 'Light');
// Coordinates to center the map
const center = [55.949905, -3.199814];
// define the map
var map = L.map('map', {
layers: [tileLayer],
scrollWheelZoom: false
}).setView(center, 11);
// 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 sources = [{ id: 0, lat: center[0], lng: center[1] }];
// Add markers for the sources on the map.
sources.forEach(source => {
L.marker([source.lat, source.lng]).addTo(map)
});
// define the polygon overlay
const polygonOverlayLayer = new tgm.leaflet.TgmLeafletPolygonOverlay({
strokeWidth: 20,
inverse: true
});
polygonOverlayLayer.addTo(map);
// get the polygons
const polygons = await client.polygons.fetch(sources, options);
// calculate bounding box for polygons
const bounds = polygons.getMaxBounds();
// add polygons to overlay
polygonOverlayLayer.setData(polygons);
// zoom to the polygon bounds
map.fitBounds(new L.latLngBounds(bounds.northEast, bounds.southWest));
}
initMap();
</script>
</body>
</html>
Copied to clipboard