Leaflet Isochrones with Traffic Congestion

<!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%;
        }
        .congestion-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 congestion mode  -->
    <div class="congestion-mode-select-container">
        <input type="checkbox" id="congestion-mode-select" checked="true" name="congestion"
            onchange="switchmode(this);">
        <label for="congestion">Congestion mode</label>
    </div>
    <script>
        const checkbox = document.querySelector("#congestion-mode-select");
        
        // create targomo client
        const client = new tgm.TargomoClient('australia', '__targomo_key_here__');
        // define the basemap
        const tileLayer =new tgm.leaflet.TgmLeafletTileLayer(client, 'Light');
        // Coordinates to center the map
        const center = [-33.870115, 151.208576];
        
        // 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">&copy; Targomo</a>';
        map.attributionControl.addAttribution(attributionText);
        
        // Define the source location which is passed into the Targomo polygon service.
        const source = { id: 1, lat: -33.870115, lng: 151.208576 };
        
        // Add marker for the source on the map.
        L.marker([source.lat, source.lng]).addTo(map);
        
        const travelTimes = [300, 600, 900, 1200, 1500, 1800];
        
        // Set the traveloptions and options for the polygon service here. The 'rushHour' option will be changed everytime the checkbox is updated.
        const options = {
            travelType: 'car',
            travelEdgeWeights: travelTimes,
            maxEdgeWeight: 1800,
            edgeWeight: 'time',
            srid: 4326,
            simplify: 200,
            serializer: 'json',
            rushHour: true
        };
        
        // Using the Leaflet extension we can easily visualize the returned polygons on a Leaflet map.
        const polygonOverlayLayer = new tgm.leaflet.TgmLeafletPolygonOverlay();
        polygonOverlayLayer.addTo(map);
        polygonOverlayLayer.setStrokeWidth(20)
        
        // 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.rushHour = v.checked;
            refreshPolygons();
        }
        
        // Request polygons once immediately on page load.
        refreshPolygons();
    </script>
</body>

</html>
content_copy
Copied to clipboard