Leaflet Customize Bike Speed

E-Bikes travel at a higher speed, and climb hills better 
<!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>
    <script src="../_shared/tgm-utils.js"></script>

    <link rel="stylesheet" href="https://releases.targomo.com/tgm-icons/webfont/tgm-icon.css">
    <!--  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%;
        }
        
        body, html,.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>
    
    <!--  selector used to change the bike mode  -->
    <div class="markers">
        <div onclick="setMode('bike')" id="btn-bike" class="marker-container active" title="human-power">
            <span class="tgm-icon tgm-ux-mode-bike"></span>
        </div>
        <div onclick="setMode('ebike')" id="btn-ebike" class="marker-container" title="electric-assist">
            <span class="tgm-icon tgm-ux-mode-ebike"></span>
        </div>
    </div>
    
    <div id="map"></div>
    <script>// define select elements
        const modeElems = document.querySelectorAll(".marker-container");
        // set the progress bar
        const pBar = new mipb({ fg: "#FF8319", style: { zIndex: 500 } });
        pBar.show();
        
        // Coordinates to center the map (Grenoble, France)
        const center = [45.1874, 5.7401];
        
        // Initialize map with TgmExampleUtils
        const { client, map } = TgmExampleUtils.initLeafletMap({
            center: center,
            zoom: 12
        });
        
        // define the polygon overlay
        const polygonOverlayLayer = new tgm.leaflet.TgmLeafletPolygonOverlay({ strokeWidth: 20 });
        polygonOverlayLayer.addTo(map);
        
        async function setMode(mode) {
            const selector = `btn-${mode}`;
            document.getElementsByClassName('active')[0].classList.remove('active');
            document.getElementById(selector).classList.add('active');
        
            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 using TgmExampleUtils
            sources.forEach(source => {
                TgmExampleUtils.createMarker([source.lat, source.lng], map);
            });
        
            // get the polygons and fit bounds using TgmExampleUtils
            await TgmExampleUtils.fetchAndFitPolygons(client, sources, options, map, polygonOverlayLayer);
            pBar.hide();
        }
        
        setMode('bike');</script>
</body>
</html>
content_copy
Copied to clipboard