Change pitchWithRotate in Mapbox GL 1.9.1
When the map loads, the map can be rotated but not tilted while dragging with the right mouse button. When the Enable Tilt button is clicked, the map can be tilted.
by allisonstrandberg
May 07, 2020
HTML
<script src="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.css">
<div id="map"></div>
<button id="enable-tilt">Enable Tilt with 1.9.1</button>
CSS
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
#enable-tilt {
display: block;
position: absolute;
right: 0px;
width: 40%;
height: 40px;
padding: 10px;
margin: 10px;
border: none;
border-radius: 3px;
font-size: 16px;
text-align: center;
color: #fff;
background: #ee8a65;
}
JavaScript
mapboxgl.accessToken = 'pk.eyJ1IjoibWFwZHdlbGwiLCJhIjoiY2pmZnRpZHYzMnhzMTRhcWg1NWJ1NHI5NyJ9.ndwyu6MXyHwXBDtnkJKqmA';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74, 40],
zoom: 9,
pitchWithRotate: false,
});
document.getElementById('enable-tilt').addEventListener('click', function() {
map.dragRotate._pitchWithRotate = true;
});