Leaflet Isochrones Minimum Hole Size

<!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=""></script>
    <!--  Include targomo leaflet full build -->
    <script src="https://releases.targomo.com/leaflet/latest-full.min.js"></script>
    <!--This import is needed in the demo to sync the map movements (mapA.sync(mapB))-->
    <script src="https://cdn.rawgit.com/turban/Leaflet.Sync/master/L.Map.Sync.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        body {
            display: flex;
            flex-direction: row;
        }

        #mapA,
        #mapB {
            height: 100%;
            width: 100%;
        }

        #textA,
        #textB {
            position: absolute;
            z-index: 400;
            text-align: center;
            width: 50%;
            background: rgba(255, 255, 255, .5);
            margin: 0px;
            padding-top: 10px;
            padding-bottom: 10px;

        }

        #textA {
            left: 0px;
        }

        #textB {
            left: 50%;
        }
    </style>
</head>

<body>
    <!--  where the maps will live  -->
    <div id="mapA"></div>
    <h3 id="textA">Custom: 10 km&#xB2;</h3>
    <div id="mapB"></div>
    <h3 id="textB">Default: 100 km&#xB2;</h3>
    <script>
        // create targomo client
        const client = new tgm.TargomoClient('westcentraleurope', '__targomo_key_here__');
        
        // Create two Leaflet map with basemap, set the center of the map to the city center of Utrecht.
        const tileLayerA = new tgm.leaflet.TgmLeafletTileLayer(client, 'Light');
        const tileLayerB = new tgm.leaflet.TgmLeafletTileLayer(client, 'Light');
        
        const travelTimes = [300, 600, 900, 1200, 1500, 1800];
        
        const mapA = L.map('mapA', {
            layers: [tileLayerA],
            scrollWheelZoom: false
        }).setView([52.097598, 5.125778], 11);
        
        const mapB = L.map('mapB', {
            layers: [tileLayerB],
            scrollWheelZoom: false,
            zoomControl: false,
        }).setView([52.097598, 5.125778], 11);
        const attributionText = '<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">&copy; Targomo</a>';
        mapB.attributionControl.addAttribution(attributionText);
        
        // We sync map movements to each other so that it is easier to see the differences between hole sizes.
        mapA.sync(mapB);
        mapB.sync(mapA);
        
        // Add a marker to both maps
        const source = { id: 1, lat: 52.102816, lng: 5.100517 };
        L.marker([source.lat, source.lng]).addTo(mapA)
        L.marker([source.lat, source.lng]).addTo(mapB)
        
        const coreOptions = {
            maxEdgeWeight: 1800,
            travelEdgeWeights: travelTimes,
            edgeWeight: 'time',
            serializer: 'json'
        };
        
        // Using the Leaflet extension we can easily visualize the returned polygons on the Leaflet maps.
        const polygonOverlayLayerA = new tgm.leaflet.TgmLeafletPolygonOverlay();
        polygonOverlayLayerA.addTo(mapA);
        polygonOverlayLayerA.setStrokeWidth(20)
        
        const polygonOverlayLayerB = new tgm.leaflet.TgmLeafletPolygonOverlay();
        polygonOverlayLayerB.addTo(mapB);
        polygonOverlayLayerB.setStrokeWidth(20)
        
        // Fetch the polygons and add the results to the polygonlayers.
        client.polygons.fetch([source], { ...coreOptions, ...{ minPolygonHoleSize: 10000000 } }).then((result) => {
            polygonOverlayLayerA.setData(result);
        });
        client.polygons.fetch([source], coreOptions).then((result) => {
            polygonOverlayLayerB.setData(result);
        });
    </script>
</body>
content_copy
Copied to clipboard