MapMetrics Atlas API Docs

Appearance

Disable Scroll Zoom ​

Disable scroll wheel zooming to prevent the map from accidentally zooming when users scroll the page.

Try scrolling over the map — scroll zoom is disabled. Use the +/− buttons or pinch to zoom.

Disable Scroll Zoom ​

javascript
// Disable scroll wheel zoom
map.scrollZoom.disable();

// Re-enable later if needed
map.scrollZoom.enable();

Disable at Initialization ​

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

Disable All Zoom Interactions ​

javascript
// Disable scroll wheel zoom
map.scrollZoom.disable();

// Disable double-click zoom
map.doubleClickZoom.disable();

// Disable touch pinch zoom (keeps rotation)
map.touchZoomRotate.disable();

Common Use Case: Embed in a Scrollable Page ​

When embedding a map in a long scrollable page, scroll zoom causes a frustrating experience. The recommended pattern is to only enable scroll zoom when the user clicks/focuses the map:

javascript
map.scrollZoom.disable();

// Enable on map focus
map.getCanvas().addEventListener('focus', () => {
  map.scrollZoom.enable();
});

// Disable when leaving map
map.getCanvas().addEventListener('blur', () => {
  map.scrollZoom.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>
    <script>
      const map = new mapmetricsgl.Map({
        container: 'map',
        style: '<StyleFile_URL_with_Token>',
        center: [2.349902, 48.852966],
        zoom: 5,
        scrollZoom: false   // disable at init
      });

      map.addControl(new mapmetricsgl.NavigationControl(), 'top-right');

      // Focus/blur pattern for embedded maps
      map.getCanvas().addEventListener('focus', () => map.scrollZoom.enable());
      map.getCanvas().addEventListener('blur', () => map.scrollZoom.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 DisableScrollZoom = () => {
  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,
      scrollZoom: false
    });

    map.current.addControl(new mapmetricsgl.NavigationControl(), 'top-right');

    const canvas = map.current.getCanvas();
    canvas.addEventListener('focus', () => map.current.scrollZoom.enable());
    canvas.addEventListener('blur', () => map.current.scrollZoom.disable());

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

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

export default DisableScrollZoom;

For more information, visit the MapMetrics GitHub repository.