Mapbox-GL Reachable Points of Interest
Let’s see 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 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">
    <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 mapboxgl.Map({
            container: 'map',
            style: 'https://api.maptiler.com/maps/voyager/style.json?key=__your_maptiler_api_key__',
            zoom: 14,
            center: lnglat,
            attributionControl: false
        })
            .addControl(new mapboxgl.NavigationControl())
            .addControl(new mapboxgl.AttributionControl({ compact: true, 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 mapboxgl.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 mapboxgl.Popup({ offset: 8 })
                    .setHTML(`<strong>${poi.properties.tags.name}</strong><br>${time} minutes`);
                const marker = new mapboxgl.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