Disable Map Rotation

[Stelios-Ervis-Priftis]

Hello,

I'm using ngx-maplibre-gl to display a map and would like to know if there is a way to disable map rotation via right click?

Thanks in advance.

[HarelM]

Did you try disabling dragRotate in the map initialization object?
Check out here:
https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/

[Stelios-Ervis-Priftis]

Yes, I did actually, but the map is still rotating. I'm not sure if it's related to the way that I'm initialising the map (Sorry, I'm quite new using MapLibre and Angular). I'm using this code structure example to make sure that the map is fully loaded so I can use drawing libraries like Terra Draw and start drawing on the map.

Code structure:

Class Component

export class MapViewerComponent implements AfterViewInit {
  @ViewChild(MapComponent) mapComponent!: MapComponent;
  customMapService = inject(CustomMapService);

  ngAfterViewInit() {
    // Wait for MapLibre to fully load
    this.mapComponent.mapLoad.subscribe((map: Map) => {
      console.log('✅ MapLibre fully loaded:', map);
      this.customMapService.setMapInstance(map);
    });
  }

  onMouseMove(event: MapMouseEvent & EventData) {
    const precision = 3;
    const { lat, lng } = event.lngLat;
    const truncatedLng = Number(lng.toFixed(precision));
    const truncatedLat = Number(lat.toFixed(precision));

    this.customMapService.pointerGeoCoordinates.set({
      lng: truncatedLng,
      lat: truncatedLat,
    });
  }
}

Html Template

<mgl-map
  [style]="customMapService.style()"
  [zoom]="[customMapService.initialZoomLevel()]"
  [center]="customMapService.initialLocation()"
  (mapMouseMove)="onMouseMove($event)"
  [pitchWithRotate]="false"
  [dragRotate]="false"
  [canvasContextAttributes]="{ preserveDrawingBuffer: true }"
>
  <mgl-control position="bottom-right">
    <app-pointer-geo-coordinates />
  </mgl-control>
  <mgl-control mglScale position="bottom-right"></mgl-control>
  <mgl-control mglNavigation [showCompass]="false" position="bottom-right" />
</mgl-map>

[HarelM]

This code looks fine, you'll need to dig into it to see what's not working I guess...

[Stelios-Ervis-Priftis]

Hmm, I just notice when initializing the map, the drag-to-rotate functionality (triggered via right-click) is inactive. After restarting the browser, the first right-click rotate interaction is still inactive, therefore no rotation. However, on the second right-click rotate, the rotation behaviour is active again.

The below example is by using ff browser, but I experience the same behaviour in chrome as well.

I don't know if this could help, but these are the logs from the rotate event.

[IvanSanchez]

See https://maplibre.org/maplibre-gl-js/docs/API/classes/DragRotateHandler/#disable