Mapbox GL JS relations

Question

I have three layers as follows;

1. ski areas (polygons)
2. ski lifts (ways)
3. ski rund (ways)

There is a unique ID that makes it relate back to the ski area. This is an example:

1. ski areas (polygons) // id= 3cb98511ef6187cef677a3b8630430c57bb0e400
2. ski lifts (ways) // skiArea = { "properties": { "activities": [ "downhill" ], "generated": false, "id": "3cb98511ef6187cef677a3b8630430c57bb0e400",...
3. ski rund (ways): { "properties": { "activities": [ "downhill" ], "generated": false, "id": "3cb98511ef6187cef677a3b8630430c57bb0e400",

How are relations handled normally in mapbox gl js? What I would like to do is something like this;

• When the ski area is clicked, it will give statistical info such as percent beginner, intermediate and expert, number and length of lifts, number and length of runs.
• when the lift or the run is clicked, I am able to give stats for the object

Just wondering how best to handle this. Beginner here.

Answer 1

This is up to your application, and not really a concern of Mapbox GL JS. You would need to write a "click handler", a function that does whatever calculation and state management is necessary to compute, update state, and then re-render parts of the application that need this bit of state to be correctly rendered.

I would recommend doing some tutorials with Mapbox GL JS that include Redux, to learn about actions, reducers, etc. This is literally the first hit when I do a search.

Answer 2

Just add this into the function you created the layer with.

map.on('click', 'PolygonLayerId', function (e) {
            new mapboxgl.Popup()
                    .setLngLat(e.lngLat)
                    .setHTML(e.features[0].properties.your layer attributes 1 + " : " + e.features[0].properties.your layer attributes 2)
                    .addTo(map);
        });