Places Layers API by BBox

Fetch points of interest by bounding box - draw a new rectangle to get new POIs
<!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>
    <!-- Include leaflet-draw -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.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>
        // create targomo client
        const client = new tgm.TargomoClient('westcentraleurope', '__targomo_key_here__');
        
        // define the basemap
        const tileLayer = new tgm.leaflet.TgmLeafletTileLayer(client, 'Light');
        
        // Coordinates to center the map
        const center = [52.52, 13.37];
        
        // define the map
        const map = L.map('map', {
            layers: [tileLayer],
            scrollWheelZoom: false,
            minZoom: 12
        }).setView(center, 12);
        
        // set the attribution
        const attributionText = '<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">&copy; Targomo</a>';
        map.attributionControl.addAttribution(attributionText);
        
        // FeatureGroup is to store bbox
        const drawnItems = new L.FeatureGroup();
        const startBox = L.rectangle([
            [52.4961, 13.3644], [52.5235, 13.4327]
        ], { stroke: false, color: '#00242B', fillOpacity: 0.2 });
        
        drawnItems.addLayer(startBox); // add starting box
        map.addLayer(drawnItems); // add to map
        map.fitBounds(startBox.getBounds()); // zoom to box
        
        const placesLayer = new L.FeatureGroup(); // empty places layer
        map.addLayer(placesLayer); // add empty places layer to map
        
        const assignBounds = (layer) => {
            // deconstruct internal keys to standard bbox object
            const { _southWest: southWest, _northEast: northEast } = layer.getBounds();
            return { southWest, northEast };
        }
        
        const getPlaces = async (bounds) => {
            // get "going out" activities from Targomo, based on the bbox
            const places = await client.pois.boundingBox(bounds, {group: 'g_going_out'});
            placesLayer.clearLayers(); // get rid of previous places
            for (let p of places) {
                const place = L.circleMarker(p, {stroke: false, radius: 4, color: '#FF8319', fillOpacity: 0.6});
                place.bindPopup(`${p.tags.name || 'Name not known'} (${p.tags.amenity})`);
                placesLayer.addLayer(place); // add to layer
            }
        }
        
        getPlaces(assignBounds(startBox)); // get starting box places
        
        // add draw control, for rectangles only, no editing
        var drawControl = new L.Control.Draw({
            draw: {
                polygon: false, marker: false, circle: false,
                circlemarker: false, polyline: false,
                rectangle: { shapeOptions: { stroke: false, color: '#00242B', fillOpacity: 0.2 } }
            }
        });
        
        map.addControl(drawControl);
        
        // when rectangle is drawn...
        map.on('draw:created', function (e) {
            drawnItems.clearLayers().addLayer(e.layer); // add new bbox
            map.fitBounds(e.layer.getBounds()); // zoom to it
            getPlaces(assignBounds(e.layer)); // fetch new places
        });
        
    </script>
</body>
</html>
content_copy
Copied to clipboard