Leaflet Isochrones Intersection Modes

<!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%;
            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 intersection mode  -->
    <div class="markers">
        <div onclick="setPolygons('union')" id="btn-union" class="marker-container active" title="union">
            <span class="tgm-icon tgm-ux-union"></span>
        </div>
        <div onclick="setPolygons('average')" id="btn-average" class="marker-container" title="average">
            <span class="tgm-icon tgm-ux-average"></span>
        </div>
        <div onclick="setPolygons('intersection')" id="btn-intersection" class="marker-container" title="intersection">
            <span class="tgm-icon tgm-ux-intersect"></span>
        </div>
    </div>
    <script>
        // define select elements
        const intersectElems = document.querySelectorAll(".marker-container.intersect");
        
        // set the progress bar
        const pBar = new mipb({ fg: "#FF8319" });
        
        // create targomo client
        const client = new tgm.TargomoClient('westcentraleurope', '__targomo_key_here__');
        
        // Create a Leaflet map with basemap, set the center of the map to the city center of Utrecht.
        const tileLayer = new tgm.leaflet.TgmLeafletTileLayer(client, 'Light');
        
        // 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 }];
        
        var map = L.map('map', {
            layers: [tileLayer],
            scrollWheelZoom: false
        }).setView([
            sources.map(s => s.lat).reduce((cur, acc)=> acc += cur,0) / 2, 
            sources.map(s => s.lng).reduce((cur, acc)=> acc += cur,0) / 2
        ], 13);
        const attributionText = '<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">&copy; Targomo</a>';
        map.attributionControl.addAttribution(attributionText);
        
        // Add markers for the sources on the map.
        sources.forEach(source => {
            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 'intersectionMode' option will be changed every time the selection is updated.
        const options = {
            travelType: 'bike',
            travelEdgeWeights: travelTimes,
            maxEdgeWeight: 1800,
            edgeWeight: 'time',
            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.setStrokeWidth(20)
        
        // Requesting polygons from the Targomo API.
        async function setPolygons(mode) {
            const selector = `btn-${mode}`;
            document.getElementsByClassName('active')[0].classList.remove('active');
            document.getElementById(selector).classList.add('active');
        
            pBar.show();
        
            options.intersectionMode = mode;
            const polygons = await client.polygons.fetch(sources, options)
            polygonOverlayLayer.setData(polygons);
        
            pBar.hide();    
        }
        
        // Request polygons once immediately on page load.
        setPolygons('union');
    </script>
</body>
content_copy
Copied to clipboard