Mapbox-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 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>
    <!--  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];
        
        const attributionText = `<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">&copy; Targomo</a>`;;
        
        // set the progress bar
        const pBar = new mipb({ fg: "#FF8319" });
        
        // add the map and set the initial center to berlin
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'https://api.maptiler.com/maps/positron/style.json?key=__your_maptiler_api_key__',
            zoom: 12,
            center: lnglat,
            attributionControl: false
        })
            .addControl(new mapboxgl.NavigationControl())
            .addControl(new mapboxgl.AttributionControl({ compact: true, customAttribution: attributionText }));
        
        // disable scroll zoom
        map.scrollZoom.disable();
        
        const marker = new mapboxgl.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
                },
                '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>`;
                    const tags = JSON.parse(e.features[0].properties.tags);
                    description += tags.name ? tags.name : '<em>Name not listed...</em>';
                }
                else {
                    description += `<strong>${props.numOfPois} POIs</strong>`;
                }
                const edgeWeight = e.features[0].properties.edgeWeight;
                if(edgeWeight != null){
                    const walkTime = edgeWeight ? Math.round((edgeWeight / 60) * 10) / 10 : null;
                    description += walkTime ? `<br><strong>Walk time: </strong>${walkTime} minutes` : '';
                }
        
                // append description to popup
                new mapboxgl.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>
content_copy
Copied to clipboard