2

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.

4

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

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.