Leaflet Isochrones with Custom Colors

<!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>

    <style>
        body, html {
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #map {
            width: 100%;
            height: 100%;
        }
        
        #color-mode-select {
            position: absolute;
            z-index: 400;
            top: 10px;
            right: 10px;
            font-family: 'Open Sans', sans-serif;
        }
        
    </style>
</head>
<body>
    
    <!--  selector used to change the intersection mode  -->
    <select id="color-mode-select" onchange="switchmode(this);"></select>
    
    <div id="map"></div>
    <script>const select = document.querySelector("#color-mode-select");
        
        // Define the stops and colors which can be used to construct the returned polygon.
        // In this example, all values of the result between 0 and 300 (0 and 5 minutes) will have the color associated with "300"
        // Values on the outer edge of the returned polygon (i.e. between 1500 and 1800, or 25 and 30 minutes) will have the color associated with 1800
        const colorModes = [
            { text: 'Standard', value: "standard", data: { 300: '#006837', 600: '#39B54A', 900: '#8CC63F', 1200: '#F7931E', 1500: '#F15A24', 1800: '#C1272D' } },
            { text: 'Color blind', value: "colorblind", data: { 300: '#4575b4', 600: '#91bfdb', 900: '#e0f3f8', 1200: '#fee090', 1500: '#fc8d59', 1800: '#d73027' } },
            { text: 'Print & Photocopy safe', value: "print", data: { 300: '#d7191c', 600: '#fdae61', 900: '#ffffbf', 1200: '#abdda4', 1500: '#2b83ba', 1800: '#B74A85' } },
        ];
        
        for (let mode of colorModes) {
            let option = document.createElement("option");
            option.text = mode.text;
            option.value = mode.value;
            select.appendChild(option);
        }
        
        // Initialize map with TgmExampleUtils (Utrecht, Netherlands)
        const { client, map } = TgmExampleUtils.initLeafletMap({
            center: [52.097598, 5.125778],
            zoom: 14
        });
        
        // Define source locations which are passed into the Targomo polygon service.
        const sources = [{ id: 1, lat: 52.102816, lng: 5.100517 }, { id: 2, lat: 52.095334, lng: 5.137219 }];
        
        // Add markers for the sources on the map using TgmExampleUtils
        sources.forEach(source => {
            TgmExampleUtils.createMarker([source.lat, source.lng], map);
        });
        
        // Set the traveloptions and options for the polygon service here. The 'intersectionMode' option will be changed everytime the selection is updated.
        const options = {
            travelType: 'bike',
            maxEdgeWeight: 1800,
            edgeWeight: 'time',
            travelEdgeWeights: Object.keys(colorModes[0].data),
            srid: 4326,
            simplify: 200,
            serializer: 'json',
            intersectionMode: 'union'
        };
        
        // 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.setColors(colorModes[0].data);
        polygonOverlayLayer.setStrokeWidth(20)
        
        // Requesting polygons from the Targomo API.
        async function refreshPolygons() {
            await TgmExampleUtils.fetchAndFitPolygons(client, sources, options, map, polygonOverlayLayer);
        }
        
        // Update the colors each time the selection is updated.
        function switchmode(v) {
            polygonOverlayLayer.setColors(colorModes.find(mode => mode.value === v.value).data);
        }
        
        // Request polygons once immediately on page load.
        refreshPolygons();</script>
</body>
</html>
content_copy
Copied to clipboard