Leaflet Inverse Polygons
Display inverse polygons on a leaflet map
<!DOCTYPE html>
<html>

<head>
    <!--  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>
    <style>
        body,
        html {
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <!--  where the map will live  -->
    <div id="map"></div>
    <script>
        async function initMap() {
            // create targomo client
            const client = new tgm.TargomoClient('britishisles', '__targomo_key_here__');
            // define the basemap
            const tilesUrl = 'https://api.maptiler.com/maps/positron/{z}/{x}/{y}@2x.png?key=__your_maptiler_api_key__';
            const tileLayer = L.tileLayer(tilesUrl, {
                tileSize: 512, zoomOffset: -1,
                minZoom: 1, crossOrigin: true
            });
            // Coordinates to center the map
            const center = [55.949905, -3.199814];

            // define the map
            var map = L.map('map', {
                layers: [tileLayer],
                scrollWheelZoom: false
            }).setView(center, 11);

            // set the attribution
            const attributionText = `<a href='https://targomo.com/developers/resources/attribution/' target='_blank'>&copy; Targomo</a>`
            map.attributionControl.addAttribution(attributionText);

            // you need to define some options for the polygon service
            const options = {
                travelType: 'bike',
                maxEdgeWeight: 1800,
                edgeWeight: 'time',
                serializer: 'json'
            };

            // define the starting point
            const sources = [{ id: 0, lat: center[0], lng: center[1] }];

            // Add markers for the sources on the map.
            sources.forEach(source => {
                L.marker([source.lat, source.lng]).addTo(map)
            });

            // define the polygon overlay
            const polygonOverlayLayer = new tgm.leaflet.TgmLeafletPolygonOverlay({
                strokeWidth: 20,
                inverse: true
            });
            polygonOverlayLayer.addTo(map);

            // get the polygons
            const polygons = await client.polygons.fetch(sources, options);
            // calculate bounding box for polygons
            const bounds = polygons.getMaxBounds();
            // add polygons to overlay
            polygonOverlayLayer.setData(polygons);
            // zoom to the polygon bounds
            map.fitBounds(new L.latLngBounds(bounds.northEast, bounds.southWest));
        }

        initMap();
    </script>
</body>

</html>
content_copy
Copied to clipboard