MapMetrics Atlas API Docs

Appearance

Customize Camera Animations ​

Fine-tune how the map camera moves using animation options like duration, easing, curve, and speed with flyTo() and easeTo().

flyTo — Flight Animation ​

flyTo zooms out, pans, and zooms back in, simulating a flight arc.

javascript
map.flyTo({
  center: [lng, lat],
  zoom: 12,
  speed: 1.2,       // how fast to fly (default 1.2)
  curve: 1.42,      // arc height (higher = more zoom-out)
  duration: 3000,   // ms (overrides speed if set)
  essential: true,  // not affected by prefers-reduced-motion
});

easeTo — Smooth Pan/Zoom ​

easeTo smoothly transitions all camera properties simultaneously.

javascript
map.easeTo({
  center: [lng, lat],
  zoom: 10,
  bearing: 45,
  pitch: 30,
  duration: 2000,
  easing: t => t * (2 - t), // ease-out quadratic
});

jumpTo — Instant Move ​

jumpTo moves the camera immediately with no animation.

javascript
map.jumpTo({
  center: [lng, lat],
  zoom: 12,
  bearing: 0,
  pitch: 0,
});

Custom Easing Functions ​

The easing option takes a function (t) => number where t goes from 0 to 1:

javascript
// Linear (no easing)
easing: t => t

// Ease-in (slow start)
easing: t => t * t

// Ease-out (slow end)
easing: t => t * (2 - t)

// Ease-in-out
easing: t => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t

// Bounce
easing: t => {
  if (t < 1 / 2.75) return 7.5625 * t * t;
  if (t < 2 / 2.75) { t -= 1.5 / 2.75; return 7.5625 * t * t + 0.75; }
  if (t < 2.5 / 2.75) { t -= 2.25 / 2.75; return 7.5625 * t * t + 0.9375; }
  t -= 2.625 / 2.75;
  return 7.5625 * t * t + 0.984375;
}

Animation Events ​

javascript
map.on('movestart', () => console.log('camera started moving'));
map.on('move', () => console.log('camera moving'));
map.on('moveend', () => console.log('camera stopped'));
map.on('zoomend', () => console.log('zoom finished'));

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="flyFast()">Fast Fly</button>
    <button onclick="flySlow()">Slow Fly</button>
    <button onclick="easeTo()">Ease To</button>
    <script>
      const map = new mapmetricsgl.Map({
        container: 'map',
        style: '<StyleFile_URL_with_Token>',
        center: [2.35, 48.85],
        zoom: 4
      });

      function flyFast() {
        map.flyTo({ center: [-74, 40.7], zoom: 10, speed: 3 });
      }
      function flySlow() {
        map.flyTo({ center: [139.7, 35.7], zoom: 10, speed: 0.3, duration: 5000 });
      }
      function easeTo() {
        map.easeTo({
          center: [2.35, 48.85], zoom: 10,
          duration: 2000,
          easing: t => t * (2 - t)
        });
      }
    </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 CustomizeCameraAnimations = () => {
  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.35, 48.85],
      zoom: 4
    });
    return () => { map.current?.remove(); map.current = null; };
  }, []);

  const flyFast = () => map.current?.flyTo({ center: [-74, 40.7], zoom: 10, speed: 3 });
  const flySlow = () => map.current?.flyTo({ center: [139.7, 35.7], zoom: 10, speed: 0.3, duration: 5000 });
  const easeTo = () => map.current?.easeTo({
    center: [2.35, 48.85], zoom: 10,
    duration: 2000,
    easing: t => t * (2 - t)
  });
  const jumpTo = () => map.current?.jumpTo({ center: [-43.2, -22.9], zoom: 10 });

  return (
    <div>
      <div ref={mapContainer} style={{ height: '500px', width: '100%' }} />
      <div style={{ marginTop: 10, display: 'flex', gap: 8 }}>
        <button onClick={flyFast}>Fast Fly</button>
        <button onClick={flySlow}>Slow Fly</button>
        <button onClick={easeTo}>Ease To</button>
        <button onClick={jumpTo}>Jump To</button>
      </div>
    </div>
  );
};

export default CustomizeCameraAnimations;

For more information, visit the MapMetrics GitHub repository.