Polygon intersection modes in Leaflet
<!DOCTYPE html>

    <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>
    <script src="https://unpkg.com/@targomo/core" ></script>
    <script src="https://releases.targomo.com/leaflet/latest-full.min.js"></script>
        html {
            margin: 0;
            width: 100%;
            height: 100%;
        #map {
            width: 100%;
            height: 100%;
        #intersection-mode-select {
            position: absolute;
            z-index: 400;
            top: 10px;
            right: 10px;
            font-family: 'Open Sans', sans-serif;

    <!--  where the map will live  -->
    <div id="map"></div>
    <!--  selector used to change the intersection mode  -->
    <select id="intersection-mode-select" onchange="switchmode(this);"></select>
        const select = document.querySelector("#intersection-mode-select");

        // create targomo client
        const client = new tgm.TargomoClient('westcentraleurope', '__targomo_key_here__');
        // Polulate the select menu
        const intersectionModes = [
            {text: 'Union', value: 'union'},
            {text: 'Average', value: 'average'},
            {text: 'Intersection', value: 'intersection'}
        for (let mode of intersectionModes){
            let option = document.createElement("option");
            option.text = mode.text;
            option.value = mode.value;

        // Create a Leaflet map with one of our basemaps, set the center of the map to the city center of Utrecht.
        const tileLayer = new tgm.leaflet.TgmLeafletTileLayer(client, 'Light blue', {})
        var map = L.map('map', {
            layers: [tileLayer],
            scrollWheelZoom: false
        }).setView([52.097598, 5.125778], 14);
        const attributionText = `<a href='https://www.openstreetmap.org/copyright' target='_blank'>&copy; OpenStreetMap contributors</a> <a href='http://openmaptiles.org/' target='_blank'>&copy; OpenMapTiles</a> <a href='https://targomo.com/developers/attribution/' target='_blank'>&copy; Targomo</a>`

        // 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.
        sources.forEach(source => {
            L.marker([source.lat, source.lng]).addTo(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',
            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();

        // Requesting polygons from the Targomo API.
        function refreshPolygons() {
            client.polygons.fetch(sources, options).then((result) => {

        // Update the polygons each time the selection is updated.
        function switchmode(v){
            options.intersectionMode = v.value;

        // Request polygons once immediately on page load.