mapbox vector tiles and data

Question

What is the best way to access data I uploaded to mapbox with a click on tile.

I'm working on a web site using Node.js. I need to display a local map, click on the tile for a property and return some of the data in the db I uploaded to continue processing in my node web app.

I thought the best option was to use Mapbox.js to display the map but how do I get the data from the click? Or is there a better option then Mapbox.js.

Answer 1

This might help - https://github.com/mapbox/vector-tile-query. Its a node module so would work well with your setup, and uses a LatLon to then query the tile

Answer 2

Assuming Mapbox GL JS, and that you're using vector tiles, you can associate a click handler to the map instance:

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-77.04, 38.907],
    zoom: 11.15
});

// When a click event occurs on a feature in the places layer, open a popup at the
// location of the feature, with description HTML from its properties.
map.on('click', 'places', function (e) {
    var coordinates = e.features[0].geometry.coordinates.slice();
    var description = e.features[0].properties.description;

    // Ensure that if the map is zoomed out such that multiple
    // copies of the feature are visible, the popup appears
    // over the copy being pointed to.
    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
        coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
    }

    new mapboxgl.Popup()
        .setLngLat(coordinates)
        .setHTML(description)
        .addTo(map);
});

This is an example taken from here. Notice the e.features[0].properties.description part, where the first feature of the features that were clicked is accessed, and then the description property is obtained.