0

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.

2 Answers 2

0

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.

1
  • I was reading about recipes and in particular, Feature union with group_by. This may work with "id=". This is stated in the page: "...so that if one of them is selected, they are all selected" here; docs.mapbox.com/mapbox-tiling-service/reference/…. I was originally thinking like what you have written which would be a big undertaking but would UNION work? Nov 6, 2022 at 0:52
0

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);
        });
1
  • There are hundreds of ski areas in one layer and even more ski lift and runs in 2 more layers (total 3 layers). The objects in each layer (eg ski area to ski lift and ski run) are tied together with "id": ###... I dont think the above code accounts for this. Thanks though. Nov 12, 2022 at 4:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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