Maplibre-GL Tiled Places Context
Showing the tiled POIs is great, but lets add reachability into the mix. Drag the pin to re-calculate.
<!DOCTYPE html>
<html>
<head>
<!-- Include maplibregl javascript and css -->
<script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel="stylesheet">
<!-- Include targomo core -->
<script src="https://releases.targomo.com/core/latest.min.js"></script>
<!-- Include micro progress bar -->
<script src="https://www.targomo.com/developers/scripts/mipb.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('westcentraleurope', '__targomo_key_here__')
// Coordinates to center the map
const lnglat = [2.38208, 48.8697]
// set the progress bar
const pBar = new mipb({ fg: '#FF8319' })
// add the map and set the initial center to berlin
const map = new maplibregl.Map({
container: 'map',
style: client.basemaps.getGLStyleURL('Light'),
zoom: 12,
center: lnglat
}).addControl(new maplibregl.NavigationControl())
// disable scroll zoom
map.scrollZoom.disable()
const marker = new maplibregl.Marker({
draggable: true
}).setLngLat(lnglat).addTo(map)
// definition for OSM subway entrances
const osmQuery = {
key: 'railway',
value: 'subway_entrance'
}
// 30 minutes
const maxEdgeWeight = 1800
marker.on('dragend', registerAndRefreshMap)
function getPoiUrl(uuid){
return [`https://api.targomo.com/pointofinterest/reachability/${uuid}/{z}/{x}/{y}.mvt?apiKey=${client.serviceKey}` +
`&loadAllTags=true&layerType=node`]
}
// register the initial reachability context request
var uuid = ''
async function registerInitialRequest(){
uuid = await registerNewRequest(marker)
}
registerInitialRequest()
map.on('load', () => {
map.addLayer({
id: 'poi',
type: 'circle',
source: {
type: 'vector',
tiles: getPoiUrl(uuid),
minzoom: 9,
attribution: '<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">© Targomo</a>'
},
'source-layer': 'poi',
paint: {
'circle-radius': ['+', 3, ['sqrt', ['get', 'numOfPois']]],
'circle-color': [
'case',
['!=', ['get', 'edgeWeight'], null],
[
'interpolate-lab',
['exponential', 1],
['get', 'edgeWeight'],
0, 'hsl(120,70%,50%)',
maxEdgeWeight/2, 'hsl(60,70%,50%)',
maxEdgeWeight, 'hsl(0,70%,50%)'
],
'#666'
]
}
})
// 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 = ''
})
// popup with type, name and walk time, if relevant
map.on('click', 'poi', (e) => {
const props = e.features[0].properties
let description = ''
if(props.numOfPois == 1) {
description += `<strong>POI: ${props.groupId.replace(/^\w/, c => c.toUpperCase())}</strong><br>`
description += props['tag-name'] ? props['tag-name'] : '<em>Name not listed...</em>'
}
else {
description += `<strong>${props.numOfPois} POIs</strong>`
}
if(props.edgeWeight != null){
const walkTime = props.edgeWeight ? Math.round((props.edgeWeight / 60) * 10) / 10 : null
description += walkTime ? `<br><strong>Walk time: </strong>${walkTime} minutes` : ''
}
// append description to popup
new maplibregl.Popup()
.setLngLat(e.lngLat)
.setHTML(description).addTo(map)
})
})
async function registerNewRequest(marker) {
const curLatLng = marker.getLngLat()
const options = {
maxEdgeWeight: maxEdgeWeight,
travelType: 'walk',
edgeWeight: 'time',
osmTypes: [osmQuery]
}
// register a new reachability context and return its uuid
const uuid = await client.pois.reachabilityRegister([{ id: 0, lat: curLatLng.lat, lng: curLatLng.lng }], options)
return uuid
}
async function registerAndRefreshMap() {
// show the progress bar
pBar.show()
const poiReachabilityUuid = await registerNewRequest(marker)
map.getSource('poi').tiles = getPoiUrl(poiReachabilityUuid)
var sourceCache = map.style.sourceCaches['poi']
// Force a refresh, so that the map will be repainted without you having to touch the map
if(sourceCache != null){
map.style.sourceCaches['poi'].clearTiles()
map.style.sourceCaches['poi'].update(map.transform)
map.triggerRepaint()
}
// hide the progress bar
pBar.hide()
}
</script></body>
</html>Copied to clipboard
