Mapbox-GL Places Layers
Get direct, fast access to global POI data
<!DOCTYPE html>
<html>
<head>
<!-- Include mapboxgl javascript and css -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.css" rel="stylesheet">
<!-- Include targomo core -->
<script src="https://releases.targomo.com/core/latest.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>
// create targomo client
const client = new tgm.TargomoClient('northamerica', '__targomo_key_here__');
// Coordinates to center the map
const lnglat = [-118.254427, 34.046185];
const attributionText = `<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">© Targomo</a>`;;
// add the map and set the initial center
const map = new mapboxgl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/positron/style.json?key=__your_maptiler_api_key__',
zoom: 13,
minZoom: 9,
center: lnglat,
attributionControl: false
})
.addControl(new mapboxgl.NavigationControl())
.addControl(new mapboxgl.AttributionControl({ compact: true, customAttribution: attributionText }));
// disable scroll zoom
map.scrollZoom.disable();
const POI_URL = `https://api.targomo.com/pointofinterest/{z}/{x}/{y}.mvt` +
`?apiKey=${client.serviceKey}&group=cafe&group=coffee_shop&group=restaurant&loadAllTags=true&layerType=node`;
map.on('load', () => {
map.addLayer({
'id': 'poi',
'type': 'circle',
'source': {
'type': 'vector',
'tiles': [POI_URL],
'minzoom': 9
},
'source-layer': 'poi',
'paint': {
'circle-radius': {
'property': 'numOfPois', // make circle bigger if POIs are aggregated
'stops': [[1, 3], [10, 10]]
},
'circle-color': [
'match',
['get', 'groupId'],
'cafe', '#d95f0e', // cafes and coffee shops orange
'coffee_shop', '#d95f0e', // cafes and coffee shops orange
'#fec44f' // restaurants as light orange
]
}
});
// Change the cursor to a pointer when the mouse is over the poi layer
map.on("mouseenter", "poi", () => {
map.getCanvas().style.cursor = "pointer";
});
// Change it back to a pointer when it leaves.
map.on("mouseleave", "poi", () => {
map.getCanvas().style.cursor = "";
});
map.on("click", "poi", (e) => {
let description = '';
if (e.features[0].properties.numOfPois > 1) {
description += `<strong>Multiple POIs</strong><br><em>${e.features[0].properties.numOfPois}
POIs here,<br>zoom in to see details</em>`;
} else {
description += `<strong>POI: ${e.features[0].properties.groupId.replace(/^\w/, c => c.toUpperCase())}</strong><br>`
const tags = e.features[0].properties.numOfPois === 1 ?
JSON.parse(e.features[0].properties.tags) : {};
description += tags.name ? tags.name : '<em>Name not listed...</em>';
}
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(description).addTo(map);
});
});
</script></body>
</html>
Copied to clipboard