MapMetrics Atlas API Docs

Appearance

Display a Popup on Hover ​

Show a popup tooltip when the user hovers over a marker, then hide it when the mouse leaves.

🖱️ Hover over the markers to see popups appear.

How It Works ​

Listen to mouseenter and mouseleave events on marker elements to show/hide a popup.

Hover Popup on a Marker ​

javascript
const popup = new mapmetricsgl.Popup({
  closeButton: false,  // No × button for hover popups
  closeOnClick: false, // Don't close on map click
  offset: 25
});

const marker = new mapmetricsgl.Marker()
  .setLngLat([2.349902, 48.852966])
  .addTo(map);

// Show on hover
marker.getElement().addEventListener('mouseenter', () => {
  map.getCanvas().style.cursor = 'pointer';
  popup
    .setLngLat([2.349902, 48.852966])
    .setHTML('<strong>Paris</strong><br/>Capital of France')
    .addTo(map);
});

// Hide on mouse leave
marker.getElement().addEventListener('mouseleave', () => {
  map.getCanvas().style.cursor = '';
  popup.remove();
});

Hover Popup on a GeoJSON Layer ​

javascript
map.on('mouseenter', 'my-layer', (e) => {
  map.getCanvas().style.cursor = 'pointer';
  const props = e.features[0].properties;
  popup
    .setLngLat(e.lngLat)
    .setHTML(`<strong>${props.name}</strong>`)
    .addTo(map);
});

map.on('mouseleave', 'my-layer', () => {
  map.getCanvas().style.cursor = '';
  popup.remove();
});

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

      const cities = [
        { center: [2.349902, 48.852966], name: 'Paris',  desc: 'Capital of France 🇫🇷' },
        { center: [-0.1276, 51.5074],    name: 'London', desc: 'Capital of England 🇬🇧' },
        { center: [13.405, 52.52],       name: 'Berlin', desc: 'Capital of Germany 🇩🇪' },
      ];

      const popup = new mapmetricsgl.Popup({
        closeButton: false,
        closeOnClick: false,
        offset: 25
      });

      cities.forEach(city => {
        const marker = new mapmetricsgl.Marker({ color: '#3b82f6' })
          .setLngLat(city.center)
          .addTo(map);

        const el = marker.getElement();

        el.addEventListener('mouseenter', () => {
          map.getCanvas().style.cursor = 'pointer';
          popup
            .setLngLat(city.center)
            .setHTML(`<strong>${city.name}</strong><br/><span style="color:#666">${city.desc}</span>`)
            .addTo(map);
        });

        el.addEventListener('mouseleave', () => {
          map.getCanvas().style.cursor = '';
          popup.remove();
        });
      });
    </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 cities = [
  { center: [2.349902, 48.852966], name: 'Paris',  desc: 'Capital of France 🇫🇷' },
  { center: [-0.1276, 51.5074],    name: 'London', desc: 'Capital of England 🇬🇧' },
  { center: [13.405, 52.52],       name: 'Berlin', desc: 'Capital of Germany 🇩🇪' },
];

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

    const popup = new mapmetricsgl.Popup({
      closeButton: false,
      closeOnClick: false,
      offset: 25
    });

    cities.forEach(city => {
      const marker = new mapmetricsgl.Marker({ color: '#3b82f6' })
        .setLngLat(city.center)
        .addTo(map.current);

      const el = marker.getElement();

      el.addEventListener('mouseenter', () => {
        map.current.getCanvas().style.cursor = 'pointer';
        popup
          .setLngLat(city.center)
          .setHTML(`<strong>${city.name}</strong><br/><span style="color:#666">${city.desc}</span>`)
          .addTo(map.current);
      });

      el.addEventListener('mouseleave', () => {
        map.current.getCanvas().style.cursor = '';
        popup.remove();
      });
    });

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

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

export default PopupOnHover;

For more information, visit the MapMetrics GitHub repository.