Leaflet Customize Bike Speed
E-Bikes travel at a higher speed, and climb hills better
<!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>
    <!--  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%;
            font-family: Helvetica, Arial, Sans-Serif;
        }
        #map {
            width: 100%;

            height: 100%;

        }
        #select-container {
            position: absolute; font-size: 11px;
            top: 0px; right: 0px;
            padding: 5px; z-index: 400;
            background-color: white;
        }
        #select-container > input[type=radio] {
            height: 11px;
        }
    </style>
</head><body onload="bikeSpeedForm.reset();">
    <!--  where the map will live  -->
    <div id="map"></div>
    <!--  checkbox used to change the bike mode  -->
    <form id="select-container" name="bikeSpeedForm">
        <input type="radio" id="human" name="mode" value="human" onchange="setMode('bike')" checked>
        <label for="hex">Human-power</label>
        <input type="radio" id="motor" name="mode" value="motor" onchange="setMode('ebike')">
        <label for="line">Electric-assist</label>
    </form>
    <script>
        // set the progress bar
        const pBar = new mipb({ fg: "#FF8319", style: { zIndex: 500 } });
        pBar.show();
        // 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 = [45.1874, 5.7401];
        
        // 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);
        
        // define the polygon overlay
        const polygonOverlayLayer = new tgm.leaflet.TgmLeafletPolygonOverlay({ strokeWidth: 20 });
        polygonOverlayLayer.addTo(map);
        
        async function setMode(mode) {
            pBar.show();
            // polygons time rings
            const travelTimes = [300, 600, 900, 1200, 1500, 1800];
        
            // polygon service options
            const options = {
                travelType: 'bike',
                travelEdgeWeights: travelTimes,
                maxEdgeWeight: 1800,
                edgeWeight: 'time',
                serializer: 'json'
            };
        
            // define the starting point
            const sources = [{
                id: 0, lat: center[0], lng: center[1],
                // "tm" are the travel mode settings
                tm: { bike: { 
                    // e-bike gets an average speed of 25km/h, regular bike gets 15km/h
                    speed: mode === 'ebike' ? 25 : 15, 
                    // e-bike is more efficient going up hills, so the uphill 
                    // penalty is less than a regular bike
                    uphill: mode === 'ebike' ? 10 : 20,
                    // e-bike doesn't make us descend faster - negative penalty maintained
                    downhill: -10 
                } }
            }];
        
            // Add markers for the sources on the map.
            sources.forEach(source => {
                L.marker([source.lat, source.lng]).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));
            pBar.hide();
        }
        
        setMode('bike');
    </script>
</body>
</html>
content_copy
Copied to clipboard