Leaflet Travel Time API

Showing precise reachability times for London banks (by car - max. 30 minutes) 
<!DOCTYPE html>
<html>
<head>
    <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="" type="text/javascript"></script>
    <script src="https://releases.targomo.com/leaflet/latest-full.min.js"></script>

    <!-- D3 libs for colors and interpolation  -->
    <script src="__d3_v1_color__"></script>
    <script src="__d3_v1_interpolate__"></script>
    <script src="__d3_v1_scale_chromatic__"></script>
    <!--  Include micro progress bar  -->
    <script src="https://www.targomo.com/developers/scripts/mipb.min.js"></script>
    
    <style>
        body, html {
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #map {
            width: 100%;
            height: 100%;
        }
        
    </style>
</head>
<body>
    
    <div id="map"></div>
    <script>async function initMap() {
            const client = new tgm.TargomoClient('britishisles', '__targomo_key_here__');
        
            // set the progress bar
            const pBar = new mipb({ fg: "#FF8319", style: { zIndex: 500 } });
            pBar.show();
        
            // map center and reachability source
            const sourcePoint = { id: 0, lat: 51.513396, lng: -0.158282 };
        
            const maxTime = 1800;
        
            // add a basemap
            const tileLayer = new tgm.leaflet.TgmLeafletTileLayer(client, 'Dark');
            // add the map and set the initial center to berlin
            var map = L.map('map', {
                layers: [tileLayer],
                scrollWheelZoom: false
            }).setView([sourcePoint.lat, sourcePoint.lng], 11);
        
            const attributionText = '<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">&copy; Targomo</a>';
            map.attributionControl.addAttribution(attributionText);
        
            // create the filter start marker
            const sourceMarker = L.marker((sourcePoint), { zIndexOffset: 1000 }).addTo(map);
        
            const dataurl = 'https://raw.githubusercontent.com/targomo/data-exports/master/overpass/amenity_bank_london.geojson';
        
            // get OSM banks dataset
            const banks = await fetch(dataurl).then(async (data) => {
                return JSON.parse(await data.text());
            })
        
            // create formatted 'targets' for analysis
            const targets = banks.features.map((bank) => {
                return {
                    id: bank.properties['@id'],
                    lat: bank.geometry.coordinates[1],
                    lng: bank.geometry.coordinates[0]
                }
            });
        
            // you need to define some options for the reachability service
            const options = {
                travelType: 'car',
                maxEdgeWeight: maxTime,
                edgeWeight: 'time'
            };
        
            // calculate reachability of banks
            const reachability = await client.reachability.individual([sourcePoint], targets, options);
        
            // assign reachablility to original GeoJSON
            banks.features.forEach((bank) => {
                const match = reachability[0].targets.find((location) => {
                    return location.id === bank.properties['@id']
                });
                bank.properties.travelTime = match ? match.travelTime : -1;
            });
        
            pBar.hide();
        
            // set style based on travelTime
            function geojsonMarkerOptions(props) {
                var scaleVal = 1 - (props.travelTime / maxTime);
                var rgb = d3.rgb(d3.interpolateRdYlGn(scaleVal));
                return {
                    radius: 3,
                    fillColor: props.travelTime > -1 ? rgb : '#666',
                    color: "#000",
                    weight: 0.5,
                    opacity: 1,
                    fillOpacity: 1
                }
            };
        
            // create map layer from banks data
            const banksLayer = L.geoJSON(banks, {
                pointToLayer: (feature, latlng) => {
                    // display as circle
                    return L.circleMarker(latlng, geojsonMarkerOptions(feature.properties));
                },
                onEachFeature: (feature, layer) => {
                    // add popup
                    if (feature.properties && feature.properties.name) {
                        const time = feature.properties.travelTime > -1 ?
                            Math.round((feature.properties.travelTime / 60) * 10) / 10 :
                            'not reachable'
                        const popupContent = `<strong>${feature.properties.name}</strong>
                  <br><strong>Time:</strong> ${time}`
                        layer.bindPopup(popupContent);
                    }
                }
            }).addTo(map);
        }
        
        initMap();</script>
</body>
</html>
content_copy
Copied to clipboard