Maplibre-GL Places Context

Give context to a location by seeing how many cafes, bars and banks can be found in a 15min walk 
<!DOCTYPE html>
<html>

<head>
    <!-- use maki-based iconfont to symbolize POIs by type -->
    <link rel="stylesheet" href="https://releases.targomo.com/tgm-icons/webfont/tgm-icon.css">
    <!--  Include targomo core -->
    <script src="https://releases.targomo.com/core/latest.min.js"></script>
    <!--  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">
    <style>
        body,
        html {
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #map {
            width: 100%;
            height: 100%;
        }

        #poi-select {
            position: absolute;
            margin: 10px;
            font-family: 'Open Sans', sans-serif;
            top: 0;
        }

        .marker-container {
            border: #fff 2px solid;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width:18px;
            height: 18px;
        }

        .marker-container .tgm-icon {
            color: #fff;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <!--  where the map will live  -->
    <div id="map"></div>
    <select id="poi-select" onchange="switchPoi(this);">
        <option value="amenity|cafe|cafe">Cafe</option>
        <option value="amenity|bar|bar">Bar</option>
        <option value="amenity|bank|town-hall">Bank</option>
    </select>
    <script>
        // create targomo client
        const client = new tgm.TargomoClient('northamerica', '__targomo_key_here__')
        // define map center and search source
        const lnglat = [-118.254427, 34.046185]
        
        let poiStore = []
        
        const attributionText = '<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">&copy; Targomo</a>'
        
        // add the map and set the center
        const map = new maplibregl.Map({
            container: 'map',
            style: client.basemaps.getGLStyleURL('Basic'),
            zoom: 14,
            center: lnglat,
            attributionControl: false
        })
            .addControl(new maplibregl.NavigationControl())
            .addControl(new maplibregl.AttributionControl({ customAttribution: attributionText }))
        
        // disable scroll zoom
        map.scrollZoom.disable()
        
        function markerDiv(type, travelTime) {
            const el = document.createElement('div')
            const div = document.createElement('div')
            div.className = 'marker-container'
            const i = document.createElement('i')
            i.className = `tgm-icon tgm-${type}`
            const hue = travelTime ? (1 - (travelTime / 1800)) * 120 : null
            div.style.backgroundColor = travelTime ? `hsl(${hue},70%,50%)` : 'lightskyblue'
            div.appendChild(i)
            el.appendChild(div)
            return el
        }
        
        map.on('load', () => {
            const marker = new maplibregl.Marker()
            marker.setLngLat(lnglat).addTo(map)
        })
        
        async function getPois(q) {
            poiStore.forEach((poi) => {
                poi.remove()
            })
        
            poiStore = []
        
            const options = {
                maxEdgeWeight: 1800,
                travelType: 'walk',
                edgeWeight: 'time',
                format: 'geojson',
                osmTypes: [{ key: q[0], value: q[1] }]
            }
            const pois = await client.pois.reachable({ id: 0, lat: lnglat[1], lng: lnglat[0] }, options)
            pois.features.forEach((poi) => {
                const time = Math.round((poi.properties.edgeWeight / 60) * 10) / 10
                const popup = new maplibregl.Popup({ offset: 8 })
                    .setHTML(`<strong>${poi.properties.tags.name}</strong><br>${time} minutes`)
                const marker = new maplibregl.Marker(markerDiv(q[2], poi.properties.edgeWeight))
                marker.setLngLat(poi.geometry.coordinates).setPopup(popup).addTo(map)
                poiStore.push(marker)
            })
        }
        
        getPois(['amenity', 'cafe', 'cafe'])
        
        // set new pois
        function switchPoi(opt) {
            getPois(opt.value.split('|'))
        }
    </script>
</body>

</html>
content_copy
Copied to clipboard