Remove Rotate and Pitch from Map

[Niamh1]

Hey!

I am trying to remove the ability to rotate and change the pitch of the map, for both mouse and touchscreen.

I have found the following properties, but I don't know how to apply them to the MapLibre map.

map.touchZoomRotate.disable();
map.touchPitch.disable();
map.keyboard.disableRotation();
map.dragRotate.disable();

<MapLibre
   attributionControl={false}
   zoomOnDoubleClick={true}
   maxZoom={16}
   minZoom={6}
               ...
   let:map
>

I have tried creating a new map in the MapLibre map field, but I am getting the error:
Uncaught (in promise) Error: Container 'map' not found.

<div id="map"> </div>

<MapLibre
   attributionControl={false}
   zoomOnDoubleClick={true}
   maxZoom={16}
   minZoom={6}
               ...
    map={new maplibre.Map({
	container:"map",
	style:"...",
	touchPitch:false,
	dragRotate:false
    })}
>

[dimfeld]

Creating a map like that actually won’t work as you expect even if you don’t get an error, because you’ll end up with that map and then also the one that the MapLibre component tries to make.

We might want to build this functionality to disable rotate and pitch into the library itself as well, but for now, you can listen to the load event on the map which gives you a reference to it. Then you can call those functions to disable rotate/pitch.

Hope that helps, I’m on my phone right now so can’t type out a code sample but can do so later if you’re still having trouble.

[Niamh1]

Thanks for the answer! I got that working now.