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="" type="text/javascript"></script>
    <script src="https://releases.targomo.com/leaflet/latest-full.min.js"></script>
    <script src="../_shared/tgm-utils.js"></script>

    <!--This import is needed in the demo to sync the map movements (mapA.sync(mapB))-->
    <script src="https://cdn.jsdelivr.net/gh/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>
    
    <div id="map"></div>
    <script>// Initialize first map with TgmExampleUtils
        const { client, map: mapA, tileLayer: tileLayerA } = TgmExampleUtils.initLeafletMap({
            containerId: 'mapA',
            center: [52.097598, 5.125778],
            zoom: 11
        });
        
        // Create second tile layer for mapB
        const tileLayerB = new tgm.leaflet.TgmLeafletTileLayer(client, 'Light');
        
        const travelTimes = [300, 600, 900, 1200, 1500, 1800];
        
        // Create second map
        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 using TgmExampleUtils
        const source = { id: 1, lat: 52.102816, lng: 5.100517 };
        TgmExampleUtils.createMarker([source.lat, source.lng], mapA);
        TgmExampleUtils.createMarker([source.lat, source.lng], 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>
</html>
content_copy
Copied to clipboard