MapMetrics Atlas API Docs

Appearance

Display a Popup on Click ​

Show a popup with information when the user clicks on the map.

👆 Click anywhere on the map to see coordinates, or click on Paris marker for details.

How It Works ​

There are two ways to show a popup on click:

  1. Attached to a Marker — popup always linked to that marker
  2. On map click — popup appears wherever user clicks
javascript
const popup = new mapmetricsgl.Popup({ closeButton: true });

map.on('click', (e) => {
  popup
    .setLngLat(e.lngLat)
    .setHTML(`
      <strong>You clicked here!</strong><br/>
      Lng: ${e.lngLat.lng.toFixed(5)}<br/>
      Lat: ${e.lngLat.lat.toFixed(5)}
    `)
    .addTo(map);
});
javascript
new mapmetricsgl.Marker()
  .setLngLat([2.349902, 48.852966])
  .setPopup(
    new mapmetricsgl.Popup({ offset: 25 })
      .setHTML('<h3>Paris</h3><p>Capital of France</p>')
  )
  .addTo(map);
OptionTypeDescription
closeButtonbooleanShow × close button (default: true)
closeOnClickbooleanClose when map is clicked (default: true)
offsetnumberPixel offset from anchor point
anchorstringAnchor position: 'top', 'bottom', 'left', 'right'
maxWidthstringMax CSS width (default: '240px')

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

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

      // Add a marker with an attached popup
      new mapmetricsgl.Marker({ color: '#3b82f6' })
        .setLngLat([2.349902, 48.852966])
        .setPopup(
          new mapmetricsgl.Popup({ offset: 25 })
            .setHTML('<h3>Paris</h3><p>Capital of France 🇫🇷</p>')
        )
        .addTo(map);

      // Show popup on any map click
      const popup = new mapmetricsgl.Popup({ closeButton: true, closeOnClick: true });

      map.on('click', (e) => {
        popup
          .setLngLat(e.lngLat)
          .setHTML(`
            <strong>Clicked Location</strong><br/>
            Lng: ${e.lngLat.lng.toFixed(5)}<br/>
            Lat: ${e.lngLat.lat.toFixed(5)}
          `)
          .addTo(map);
      });
    </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 PopupOnClick = () => {
  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: 11
    });

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

    // Marker with popup
    new mapmetricsgl.Marker({ color: '#3b82f6' })
      .setLngLat([2.349902, 48.852966])
      .setPopup(
        new mapmetricsgl.Popup({ offset: 25 })
          .setHTML('<h3>Paris</h3><p>Capital of France 🇫🇷</p>')
      )
      .addTo(map.current);

    // Popup on map click
    const popup = new mapmetricsgl.Popup({ closeButton: true });

    map.current.on('click', (e) => {
      popup
        .setLngLat(e.lngLat)
        .setHTML(`
          <strong>Clicked here!</strong><br/>
          Lng: ${e.lngLat.lng.toFixed(5)}<br/>
          Lat: ${e.lngLat.lat.toFixed(5)}
        `)
        .addTo(map.current);
    });

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

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

export default PopupOnClick;

For more information, visit the MapMetrics GitHub repository.