MapMetrics Atlas API Docs

Appearance

Toggle Map Interactions ​

Enable or disable individual map interactions at runtime. Useful for embedded maps, read-only views, or custom interaction modes.

Interaction Handlers ​

Each interaction has an enable() and disable() method:

javascript
// Scroll / pinch zoom
map.scrollZoom.enable();
map.scrollZoom.disable();

// Mouse drag to pan
map.dragPan.enable();
map.dragPan.disable();

// Right-click drag to rotate
map.dragRotate.enable();
map.dragRotate.disable();

// Touch rotate
map.touchZoomRotate.enableRotation();
map.touchZoomRotate.disableRotation();

// Double-click zoom
map.doubleClickZoom.enable();
map.doubleClickZoom.disable();

// Keyboard shortcuts
map.keyboard.enable();
map.keyboard.disable();

Disable All at Init ​

javascript
const map = new mapmetricsgl.Map({
  container: 'map',
  style: '<StyleFile_URL_with_Token>',
  interactive: false, // disables all interactions at once
});

Read-Only Embedded Map ​

javascript
const map = new mapmetricsgl.Map({
  container: 'map',
  style: '<StyleFile_URL_with_Token>',
  interactive: false,
  attributionControl: false,
});

// Or selectively disable
map.scrollZoom.disable();
map.dragPan.disable();
map.dragRotate.disable();
map.touchZoomRotate.disableRotation();
map.doubleClickZoom.disable();
map.keyboard.disable();

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>
    <button onclick="map.scrollZoom.disable()">Disable Scroll</button>
    <button onclick="map.scrollZoom.enable()">Enable Scroll</button>
    <button onclick="map.dragPan.disable()">Lock Pan</button>
    <button onclick="map.dragPan.enable()">Unlock Pan</button>
    <script>
      const map = new mapmetricsgl.Map({
        container: 'map',
        style: '<StyleFile_URL_with_Token>',
        center: [5, 50],
        zoom: 4
      });
    </script>
  </body>
</html>
jsx
import React, { useEffect, useRef, useState } from 'react';
import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';

const ToggleInteractions = () => {
  const mapContainer = useRef(null);
  const map = useRef(null);
  const [scrollEnabled, setScrollEnabled] = useState(true);
  const [dragEnabled, setDragEnabled] = useState(true);

  useEffect(() => {
    if (map.current) return;
    map.current = new mapmetricsgl.Map({
      container: mapContainer.current,
      style: '<StyleFile_URL_with_Token>',
      center: [5, 50],
      zoom: 4
    });
    return () => { map.current?.remove(); map.current = null; };
  }, []);

  const toggleScroll = () => {
    if (scrollEnabled) map.current?.scrollZoom.disable();
    else map.current?.scrollZoom.enable();
    setScrollEnabled(!scrollEnabled);
  };

  const toggleDrag = () => {
    if (dragEnabled) map.current?.dragPan.disable();
    else map.current?.dragPan.enable();
    setDragEnabled(!dragEnabled);
  };

  return (
    <div>
      <div ref={mapContainer} style={{ height: '500px', width: '100%' }} />
      <div style={{ marginTop: '8px', display: 'flex', gap: '8px' }}>
        <button onClick={toggleScroll}>
          Scroll Zoom: {scrollEnabled ? 'ON' : 'OFF'}
        </button>
        <button onClick={toggleDrag}>
          Drag Pan: {dragEnabled ? 'ON' : 'OFF'}
        </button>
      </div>
    </div>
  );
};

export default ToggleInteractions;

For more information, visit the MapMetrics GitHub repository.