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">© 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>
Copied to clipboard