MapMetrics Atlas API Docs

Appearance

Disable Map Rotation ​

Prevent users from rotating the map by disabling drag-rotate, touch-rotate, and keyboard rotation.

Try right-click dragging or using the compass — rotation is disabled on this map.

How to Disable Rotation ​

Call these three methods after map initialization to fully disable rotation from all input sources:

javascript
// Disable right-click drag rotation (mouse)
map.dragRotate.disable();

// Disable two-finger rotation (touch devices)
map.touchZoomRotate.disableRotation();

// Disable keyboard rotation (Alt + Arrow keys)
map.keyboard.disable();

Disable at Initialization ​

You can also disable rotation when creating the map:

javascript
const map = new mapmetricsgl.Map({
  container: 'map',
  style: '<StyleFile_URL_with_Token>',
  center: [0, 20],
  zoom: 2,
  dragRotate: false   // disable drag rotation at init
});

// Still need to disable touch rotation separately
map.touchZoomRotate.disableRotation();

Re-enable Rotation ​

javascript
// Re-enable rotation later if needed
map.dragRotate.enable();
map.touchZoomRotate.enableRotation();
map.keyboard.enable();

Hide the Compass ​

If rotation is disabled, you can also hide the compass from NavigationControl:

javascript
map.addControl(new mapmetricsgl.NavigationControl({
  showCompass: false  // hide compass since rotation is disabled
}), 'top-right');

Complete Example ​

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link href="https://cdn.mapmetrics-atlas.net/versions/latest/mapmetrics-gl.css" rel="stylesheet" />
    <script src="https://cdn.mapmetrics-atlas.net/versions/latest/mapmetrics-gl.js"></script>
    <style>
      #map { height: 500px; width: 100%; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const map = new mapmetricsgl.Map({
        container: 'map',
        style: '<StyleFile_URL_with_Token>',
        center: [2.349902, 48.852966],
        zoom: 5
      });

      // Add zoom controls (no compass since rotation disabled)
      map.addControl(new mapmetricsgl.NavigationControl({
        showCompass: false
      }), 'top-right');

      // Disable all rotation
      map.dragRotate.disable();
      map.touchZoomRotate.disableRotation();
      map.keyboard.disable();
    </script>
  </body>
</html>
jsx
import React, { useEffect, useRef } from 'react';
import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';

const DisableRotation = () => {
  const mapContainer = useRef(null);
  const map = useRef(null);

  useEffect(() => {
    if (map.current) return;

    map.current = new mapmetricsgl.Map({
      container: mapContainer.current,
      style: '<StyleFile_URL_with_Token>',
      center: [2.349902, 48.852966],
      zoom: 5
    });

    map.current.addControl(new mapmetricsgl.NavigationControl({
      showCompass: false
    }), 'top-right');

    // Disable all rotation
    map.current.dragRotate.disable();
    map.current.touchZoomRotate.disableRotation();
    map.current.keyboard.disable();

    return () => { map.current?.remove(); map.current = null; };
  }, []);

  return <div ref={mapContainer} style={{ height: '500px', width: '100%' }} />;
};

export default DisableRotation;

For more information, visit the MapMetrics GitHub repository.