MapMetrics Atlas API Docs

Appearance

Fit Map to a LineString ​

Automatically zoom and pan to fit a LineString or route using fitBounds().

Fit to a Set of Coordinates ​

Use LngLatBounds to compute the bounding box, then call fitBounds():

javascript
const coordinates = [
  [2.3499, 48.853],   // Paris
  [-0.1276, 51.5074], // London
  [13.405, 52.52],    // Berlin
];

// Build bounds from all coordinates
const bounds = coordinates.reduce(
  (bounds, coord) => bounds.extend(coord),
  new mapmetricsgl.LngLatBounds(coordinates[0], coordinates[0])
);

// Fit map to bounds
map.fitBounds(bounds, {
  padding: 60,      // pixels of padding on each side
  duration: 1000,   // animation duration in ms
});

fitBounds Options ​

javascript
map.fitBounds(bounds, {
  padding: { top: 50, bottom: 50, left: 50, right: 50 }, // or just a number
  maxZoom: 15,       // don't zoom in more than this
  duration: 1000,    // animation ms (0 = instant)
  bearing: 0,        // target bearing
  pitch: 0,          // target pitch
});

From a GeoJSON Feature ​

javascript
// Given a LineString feature
const feature = {
  type: 'Feature',
  geometry: {
    type: 'LineString',
    coordinates: [[lng1, lat1], [lng2, lat2], ...]
  }
};

const bounds = feature.geometry.coordinates.reduce(
  (b, c) => b.extend(c),
  new mapmetricsgl.LngLatBounds(
    feature.geometry.coordinates[0],
    feature.geometry.coordinates[0]
  )
);

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

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: [5, 50],
        zoom: 2
      });

      const route = [
        [2.3499, 48.853],
        [-0.1276, 51.5074],
        [13.405, 52.52],
        [16.3738, 48.2082],
        [12.4964, 41.9028],
      ];

      map.on('load', () => {
        map.addSource('route', {
          type: 'geojson',
          data: { type: 'Feature', geometry: { type: 'LineString', coordinates: route } }
        });
        map.addLayer({
          id: 'route', type: 'line', source: 'route',
          paint: { 'line-color': '#3b82f6', 'line-width': 3 }
        });

        // Fit to route
        const bounds = route.reduce(
          (b, c) => b.extend(c),
          new mapmetricsgl.LngLatBounds(route[0], route[0])
        );
        map.fitBounds(bounds, { padding: 60 });
      });
    </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 route = [
  [2.3499, 48.853],
  [-0.1276, 51.5074],
  [13.405, 52.52],
  [16.3738, 48.2082],
  [12.4964, 41.9028],
];

const FitToLineString = () => {
  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: [5, 50],
      zoom: 2
    });

    map.current.on('load', () => {
      map.current.addSource('route', {
        type: 'geojson',
        data: { type: 'Feature', geometry: { type: 'LineString', coordinates: route } }
      });

      map.current.addLayer({
        id: 'route',
        type: 'line',
        source: 'route',
        paint: { 'line-color': '#3b82f6', 'line-width': 3 }
      });

      // Fit the map to the route
      const bounds = route.reduce(
        (b, c) => b.extend(c),
        new mapmetricsgl.LngLatBounds(route[0], route[0])
      );

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

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

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

export default FitToLineString;

For more information, visit the MapMetrics GitHub repository.