Leaflet Travel Mode Isochrones

Switch travel type for isochrones on a leaflet map 
<!DOCTYPE html>
<html>

<head>
    <!--  Include targomo webfonts -->
    <link rel="stylesheet" href="https://releases.targomo.com/tgm-icons/webfont/tgm-icon.css">
    <!--  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>
    <!--  Include micro progress bar  -->
    <script src="https://www.targomo.com/developers/scripts/mipb.min.js"></script>
    <style>
        body, html, #map {
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #map {
            z-index: 0;
        }
        .markers {
            position: fixed; top: 10px; right: 10px;
        }
        .marker-container {
            padding: 4px 6px;
            background-color: #fff;
            display: flex; align-items: center;
            justify-content: center;
            cursor: pointer;
            border: 2px solid rgba(0,0,0,0.2);
            background-clip: padding-box;
            border-radius: 4px;
            margin-bottom: 6px;
        }
        .marker-container.active {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <!--  where the map will live  -->
    <div id="map"></div>
    <!--  selector used to change the travel mode  -->
    <div class="markers">
        <div onclick="setData('walk')" id="btn-walk" class="marker-container" title="walk mode">
            <span class="tgm-icon tgm-ux-mode-walk"></span>
        </div>
        <div onclick="setData('bike')" id="btn-bike" class="marker-container active" title="bike mode">
            <span class="tgm-icon tgm-ux-mode-bike"></span>
        </div>
        <div onclick="setData('car')" id="btn-car" class="marker-container" title="car mode">
            <span class="tgm-icon tgm-ux-mode-car"></span>
        </div>
        <div onclick="setData('transit')" id="btn-transit" class="marker-container" title="transit mode">
            <span class="tgm-icon tgm-ux-mode-transit"></span>
        </div>
    </div>

    <script>
        // define select elements
        const modeElems = document.querySelectorAll(".marker-container");
        // create targomo client
        const client = new tgm.TargomoClient('northamerica', '__targomo_key_here__');
        // set the progress bar
        const pBar = new mipb({ fg: "#FF8319", style: { zIndex: 500 } });
        // 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 = [47.597132, -122.333797];
        
        // 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);
        
        // polygons time rings
        const travelTimes = [300, 600, 900, 1200, 1500, 1800];
        
        // 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 });
        polygonOverlayLayer.addTo(map);
        
        async function setData(mode) {
            // show progress bar
            pBar.show();
            const selector = `btn-${mode}`;
            document.getElementsByClassName('active')[0].classList.remove('active');
            document.getElementById(selector).classList.add('active');
            // you need to define some options for the polygon service
            const options = {
                travelType: mode,
                travelEdgeWeights: travelTimes,
                maxEdgeWeight: 1800,
                edgeWeight: 'time',
                transitMaxTransfers: mode === 'transit' ? 5 : null,
                serializer: 'json'
            };
        
            // get the polygons
            const polygons = await client.polygons.fetch(sources, options);
            // add polygons to overlay
            polygonOverlayLayer.setData(polygons);
            // hide progress bar
            pBar.hide();
            // calculate bounding box for polygons
            const bounds = polygons.getMaxBounds();
            // zoom to the polygon bounds
            map.fitBounds(new L.latLngBounds(bounds.northEast, bounds.southWest));
        }
        
        setData('bike');
    </script>
</body>

</html>
content_copy
Copied to clipboard