Polygon minimum hole size in Leaflet
<!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>
    <script src="https://releases.targomo.com/core/latest.min.js" ></script>
    <script src="https://releases.targomo.com/leaflet/latest.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 our basemaps, 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 mapA = L.map('mapA', {
            layers: [tileLayerA],
            scrollWheelZoom: false
        }).setView([52.097598, 5.125778], 10);

        const mapB = L.map('mapB', {
            layers: [tileLayerB],
            scrollWheelZoom: false,
            zoomControl: false,
        }).setView([52.097598, 5.125778], 10);
        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>`
        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)

        // The options objects for the 2 maps. The only difference is the minPolygonHoleSize option which is set to 10000000 m2 (10 km2)
        const optionsA = {
            maxEdgeWeight: 1800,
            edgeWeight: 'time',
            serializer: 'json',
            minPolygonHoleSize: 10000000
        };
        const optionsB = {
            maxEdgeWeight: 1800,
            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], optionsA).then((result) => {
            polygonOverlayLayerA.setData(result);
        });
        client.polygons.fetch([source], optionsB).then((result) => {
            polygonOverlayLayerB.setData(result);
        });

    </script>
</body>

content_copy
Copied!