MapMetrics Atlas API Docs

Appearance

Fit a Map to a Bounding Box ​

Automatically adjust the map camera to fit any set of coordinates or a region into view using fitBounds.

How It Works ​

Use map.fitBounds() to fit the map view to any rectangular area defined by two corners [southwest, northeast].

Basic Usage ​

javascript
// Fit to a bounding box [southwest corner, northeast corner]
map.fitBounds([
  [-74.1, 40.6], // Southwest corner [lng, lat]
  [-73.9, 40.9]  // Northeast corner [lng, lat]
], {
  padding: 40    // Padding in pixels around the bounds
});

Fit to a Set of Markers ​

javascript
// Calculate bounds from a set of points
const bounds = new mapmetricsgl.LngLatBounds();

const points = [
  [-74.006, 40.7128],   // New York
  [-0.1276, 51.5074],   // London
  [2.349902, 48.852966] // Paris
];

points.forEach(point => bounds.extend(point));

map.fitBounds(bounds, { padding: 60 });

Options ​

OptionTypeDescription
paddingnumber or objectPadding in pixels. Can be { top, bottom, left, right }
maxZoomnumberMaximum zoom level to use
animatebooleanWhether to animate (default: true)
durationnumberAnimation duration in milliseconds
bearingnumberMap bearing after fitting
pitchnumberMap pitch after fitting

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="fitToMarkers()">Fit to All Markers</button>
      <button onclick="fitEurope()">Fit Europe</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');

      // Example locations
      const locations = [
        { center: [-74.006, 40.7128], label: 'New York' },
        { center: [-0.1276, 51.5074], label: 'London' },
        { center: [2.349902, 48.852966], label: 'Paris' },
      ];

      // Add markers
      locations.forEach(loc => {
        new mapmetricsgl.Marker()
          .setLngLat(loc.center)
          .setPopup(new mapmetricsgl.Popup().setHTML(`<b>${loc.label}</b>`))
          .addTo(map);
      });

      // Fit to all markers
      function fitToMarkers() {
        const bounds = new mapmetricsgl.LngLatBounds();
        locations.forEach(loc => bounds.extend(loc.center));
        map.fitBounds(bounds, { padding: 60 });
      }

      // Fit to Europe
      function fitEurope() {
        map.fitBounds([[-10, 35], [30, 70]], { padding: 40 });
      }
    </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 = [
  { center: [-74.006, 40.7128], label: 'New York' },
  { center: [-0.1276, 51.5074], label: 'London' },
  { center: [2.349902, 48.852966], label: 'Paris' },
];

const FitToBounds = () => {
  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');

    // Add markers for each location
    locations.forEach(loc => {
      new mapmetricsgl.Marker()
        .setLngLat(loc.center)
        .setPopup(new mapmetricsgl.Popup().setHTML(`<b>${loc.label}</b>`))
        .addTo(map.current);
    });

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

  const fitToMarkers = () => {
    const bounds = new mapmetricsgl.LngLatBounds();
    locations.forEach(loc => bounds.extend(loc.center));
    map.current?.fitBounds(bounds, { padding: 60 });
  };

  const fitEurope = () => {
    map.current?.fitBounds([[-10, 35], [30, 70]], { padding: 40 });
  };

  return (
    <div>
      <div ref={mapContainer} style={{ height: '500px', width: '100%' }} />
      <div style={{ display: 'flex', gap: '8px', marginTop: '10px' }}>
        <button onClick={fitToMarkers} style={{ padding: '8px 16px', background: '#3b82f6', color: 'white', border: 'none', borderRadius: '6px', cursor: 'pointer' }}>
          Fit to All Markers
        </button>
        <button onClick={fitEurope} style={{ padding: '8px 16px', background: '#3b82f6', color: 'white', border: 'none', borderRadius: '6px', cursor: 'pointer' }}>
          Fit Europe
        </button>
      </div>
    </div>
  );
};

export default FitToBounds;

For more information, visit the MapMetrics GitHub repository.