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, #map {
            margin: 0;
            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">&copy; Targomo</a>`;
        map.attributionControl.addAttribution(attributionText);
        
        const travelBreaks = [300, 600, 900, 1200, 1500, 1800];
        
        // you need to define some options for the polygon service
        const options = {
            travelType: 'bike',
            travelEdgeWeights: travelBreaks,
            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>
content_copy
Copied to clipboard