MapMetrics Atlas API Docs

Appearance

Add a Popup ​

Click on the marker for a popup ​

Prerequisites ​

Before you begin, ensure you have:

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <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>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
      }
      #map {
        min-height: 500px;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // Don't forget to replace <YOUR_ACCESS_TOKEN> by your own access token
      const accessToken = "<YOUR_ACCESS_TOKEN>";

      const map = new mapmetricsgl.Map({
        container: "map",
        style: `${accessToken}`,
        zoom: 11,
        center: [2.349902, 48.852966],
      }).addControl(new mapmetricsgl.NavigationControl(), "top-right");
      // This plugin is used for right to left languages
      const popup = new mapmetricsgl.Popup().setHTML(
        `<h5 style='color:#000; margin-bottom:8px'>Hello Mapmetrics</h5><p style='color:#000; margin:0'>A good coffee shop</p>`
      );

      const marker = new mapmetricsgl.Marker()
        .setLngLat([2.349902, 48.852966])
        .setPopup(popup)
        .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 AddPopup = () => {
  const mapContainerRef = useRef(null);
  const mapRef = useRef(null);

  useEffect(() => {
    if (!mapContainerRef.current || mapRef.current) return;

    const accessToken = "<YOUR_ACCESS_TOKEN>";

    const map = new mapmetricsgl.Map({
      container: mapContainerRef.current,
      style: `${accessToken}`,
      zoom: 11,
      center: [2.349902, 48.852966],
    });

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

    // Create popup
    const popup = new mapmetricsgl.Popup().setHTML(
      `<h5 style='color:#000; margin-bottom:8px'>Hello Mapmetrics</h5><p style='color:#000; margin:0'>A good coffee shop</p>`
    );

    // Add marker with popup
    new mapmetricsgl.Marker()
      .setLngLat([2.349902, 48.852966])
      .setPopup(popup)
      .addTo(map);

    mapRef.current = map;

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

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

export default AddPopup;