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>