MapMetrics Atlas API Docs

Appearance

Fly to a Location ​

Smoothly animate the map camera to fly to any location using flyTo.

How It Works ​

Use map.flyTo() to animate the camera to any location. The map smoothly zooms out, pans across, then zooms back in.

Basic Usage ​

javascript
map.flyTo({
  center: [-74.006, 40.7128], // [longitude, latitude]
  zoom: 12,
  speed: 1.5,   // Animation speed (default: 1.2)
  curve: 1.42   // Animation curve (default: 1.42)
});

Options ​

OptionTypeDescription
center[lng, lat]Target coordinates
zoomnumberTarget zoom level
speednumberAnimation speed (higher = faster)
curvenumberZoom out curve during flight
bearingnumberTarget bearing in degrees
pitchnumberTarget pitch in degrees
essentialbooleanIf true, animation persists even with prefers-reduced-motion

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%; }
      .controls { margin-top: 10px; display: flex; gap: 8px; }
      button { padding: 8px 16px; background: #3b82f6; color: white; border: none; border-radius: 6px; cursor: pointer; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div class="controls">
      <button onclick="flyTo([-74.006, 40.7128], 12)">New York</button>
      <button onclick="flyTo([-0.1276, 51.5074], 12)">London</button>
      <button onclick="flyTo([139.6917, 35.6895], 12)">Tokyo</button>
      <button onclick="flyTo([2.349902, 48.852966], 12)">Paris</button>
    </div>
    <script>
      const map = new mapmetricsgl.Map({
        container: 'map',
        style: '<StyleFile_URL_with_Token>',
        center: [2.349902, 48.852966],
        zoom: 3
      });

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

      function flyTo(center, zoom) {
        map.flyTo({
          center: center,
          zoom: zoom,
          speed: 1.5,
          curve: 1.42,
          essential: true
        });
      }
    </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 locations = [
  { name: 'New York', center: [-74.006, 40.7128], zoom: 12 },
  { name: 'London',   center: [-0.1276, 51.5074], zoom: 12 },
  { name: 'Tokyo',    center: [139.6917, 35.6895], zoom: 12 },
  { name: 'Paris',    center: [2.349902, 48.852966], zoom: 12 },
];

const FlyToLocation = () => {
  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: 3
    });

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

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

  const flyTo = ({ center, zoom }) => {
    map.current?.flyTo({ center, zoom, speed: 1.5, curve: 1.42, essential: true });
  };

  return (
    <div>
      <div ref={mapContainer} style={{ height: '500px', width: '100%' }} />
      <div style={{ display: 'flex', gap: '8px', marginTop: '10px' }}>
        {locations.map((loc) => (
          <button
            key={loc.name}
            onClick={() => flyTo(loc)}
            style={{ padding: '8px 16px', background: '#3b82f6', color: 'white', border: 'none', borderRadius: '6px', cursor: 'pointer' }}
          >
            {loc.name}
          </button>
        ))}
      </div>
    </div>
  );
};

export default FlyToLocation;

For more information, visit the MapMetrics GitHub repository.