Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to set a "max allowed pitch" for a Mapbox GL map?

Tags:

mapbox-gl-js

I am unable to find a method to prevent the user from setting the pitch angle of the map too far. I am working with high resolution weather data, so I want to prevent them from setting the pitch so extreme that they can see far away from the intended area. That puts me in a position to either extend the data (WAY too much bandwidth would be used) or just not display it there, making it ugly. I would not like to eliminate the pitch ability completely, as it helps with visualization.

I have looked as much as I can in the documentation but since I cannot find the information and I do not even have a code snippet I have tried because I have nowhere to start. Is there any way to (for example) let the user pitch up to a certain degree only? I made an example image where the left pitch would be OK but not the right, as in that current zoom level it would let them see too far away. If this is not possible, I am open to alternate methods, if any.

sample

like image 326
David Avatar asked Sep 06 '25 20:09

David


2 Answers

There's now a maxPitch option that you can pass to the Map construct. And, as of Mapbox GL JS 2.0.0, you can set it to pretty high values, all the way up to 85°:

let MAX_PITCH = 85

new mapboxgl
  .Map({
    container: 'map',
    // ...
    pitch: MAX_PITCH,
    maxPitch: MAX_PITCH,
  });
like image 192
danvk Avatar answered Sep 11 '25 03:09

danvk


Use the render event to check the value of the angle:

map.on('render', (e) => {
  if (e.target.getPitch() > MAX_PITCH) e.target.setPitch(MAX_PITCH)
})

[ https://jsfiddle.net/05o4e7dr/ ]

like image 23
stdob-- Avatar answered Sep 11 '25 01:09

stdob--