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">&copy; 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>
content_copy
Copied to clipboard