MapMetrics Atlas API Docs

Appearance

View a Fullscreen Map ​

Add a fullscreen button so users can expand the map to fill the entire browser window.

Click the ⤢ fullscreen button (top-right) to expand the map. Press Esc to exit.

Basic Usage ​

javascript
// Add fullscreen button to the map
map.addControl(new mapmetricsgl.FullscreenControl(), 'top-right');

Fullscreen a Specific Container ​

By default, FullscreenControl makes the map canvas fullscreen. You can instead fullscreen a parent container (useful if you have overlapping UI elements):

javascript
const container = document.getElementById('map-wrapper');

map.addControl(new mapmetricsgl.FullscreenControl({
  container: container   // fullscreen this element instead of the map canvas
}), 'top-right');

Listen to Fullscreen Events ​

javascript
map.on('resize', () => {
  // Map automatically resizes when entering/exiting fullscreen
  console.log('Map resized:', map.getCanvas().width, map.getCanvas().height);
});

Programmatic Fullscreen (without the control button) ​

You can trigger fullscreen programmatically using the browser Fullscreen API:

javascript
const mapCanvas = map.getCanvas();

// Enter fullscreen
mapCanvas.requestFullscreen();

// Exit fullscreen
document.exitFullscreen();

// Check if currently fullscreen
const isFullscreen = !!document.fullscreenElement;

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
      });

      map.addControl(new mapmetricsgl.NavigationControl(), 'top-right');
      map.addControl(new mapmetricsgl.FullscreenControl(), 'top-right');
    </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 FullscreenMap = () => {
  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
    });

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

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

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

export default FullscreenMap;

⚠️ Note: Fullscreen requires user interaction to trigger (browser security requirement). It will not work if called programmatically without a user gesture.

For more information, visit the MapMetrics GitHub repository.