MapMetrics Atlas API Docs

Appearance

Google Maps Migration Guide ​

Switch from Google Maps to Mapmetrics ​

Skill LevelLanguage
🟧🟧🟧 Intermediate🧠 JavaScript

📝 Prerequisite ​

Familiarity with front-end development concepts.

Are you using Google Maps and want to switch to Mapmetrics?
You’ve come to the right place!

This tutorial shows you how to use the
Mapmetrics GL JS
JavaScript library to:

  • ✅ Create a web map
  • 📍 Add a marker to the map
  • 💬 Attach a popup to the marker

All using methods similar to those in the Google Maps JavaScript API.

🌍 Live Demo ​

🧪 View the live map demo here:
Open Map Demo

Getting started ​

This guide assumes that you are already familiar with the Google Maps JavaScript API and with front-end web development concepts including HTML, CSS, and JavaScript.

To complete this tutorial, you will need:

🔧 Requirements ​

  • A Mapmetrics access token: Your access tokens are on the Access Token page of your Developer Console.
  • Mapmetrics GL JS: Mapmetrics GL JS is a JavaScript API for building web maps.
  • A text editor: Use the editor of your choice for writing HTML, CSS, and JavaScript.

Create a webpage ​

  1. Open your text editor and create a new file called index.html.
  2. Paste the following code to set up a map-enabled web page:
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>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
      }
      #map {
        min-height: 500px;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const accessToken = "<YOUR_ACCESS_TOKEN>";
 
      const map = new mapmetricsgl.Map({
        container: "map",
        style: `https://gateway.mapmetrics.org/styles/light.json?token=${accessToken}`,
        zoom: 2,
        center: [2.3210938, 48.7965913],
      }).addControl(new mapmetricsgl.NavigationControl(), "top-right");
    </script>
  </body>
</html>

Initialize a web map ​

Google Maps Example ​

html
<script>
  const map = new google.maps.Map(document.getElementById("map"), {
    mapTypeId: "roadmap",
    center: { lat: 64.1436456, lng: -21.9270884 },
    zoom: 13,
  });
</script>

Mapmetrics GL JS Example ​

html
<script>
  const accessToken = "YOUR_ACCESS_TOKEN";
   
   

  const map = new mapmetricsgl.Map({
    container: "map",
    style: `https://gateway.mapmetrics.org/styles/light.json?token=${accessToken}`,
    zoom: 2,
    center: [2.3210938, 48.7965913],
  }).addControl(new mapmetricsgl.NavigationControl(), "top-right");
</script>
  • container: HTML element to contain the map.
  • Style options:
    1. https://gateway.mapmetrics.org/styles/dark.json
    2. https://gateway.mapmetrics.org/styles/white.json
  • center and zoom define the map's starting position.

💾 Save your file and open it in a browser to preview.

🔗 Open Map Demo

Add a Marker ​

Google Maps Example ​

html
<script>
  const map = new google.maps.Map(document.getElementById("map"), {
    mapTypeId: "roadmap",
    center: { lat: 64.1436456, lng: -21.9270884 },
    zoom: 13,
  });

  const marker = new google.maps.Marker({
    position: { lat: 64.1436456, lng: -21.9270884 },
    title: "Reykjavik Roasters - Coffee Shop",
    map: map,
  });
</script>

Mapmetrics GL JS Example ​

html
<script>
  new mapmetricsgl.Marker().setLngLat([2.349902, 48.852966]).addTo(map);
</script>
  • setLngLat(): Set the marker location.
  • addTo(): Attach marker to the map.

Add interactivity ​

Google Maps: Using InfoWindow ​

html
<script>
  const infowindow = new google.maps.InfoWindow({
    content: `<h3>Reykjavik Roasters</h3><p>A good coffee shop</p>`,
  });

  marker.addListener("click", () => {
    infowindow.open(map, marker);
  });
</script>

Mapmetrics GL JS: Using Popup ​

html
<script>
  const popup = new mapmetricsgl.Popup().setHTML(
    `<h3>Hello Mapmetrics</h3><p>A good coffee shop</p>`
  );

  new mapmetricsgl.Marker()
    .setLngLat([2.349902, 48.852966])
    .setPopup(popup)
    .addTo(map);
</script>

🔗 Open Popup Demo

Final Product 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>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
      }
      #map {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const accessToken = "YOUR_ACCESS_TOKEN";
 

      const map = new mapmetricsgl.Map({
        container: "map",
        style: `${accessToken}`,
        zoom: 10,
        center: [2.3210938, 48.7965913],
      }).addControl(new mapmetricsgl.NavigationControl(), "top-right");
    </script>
  </body>
</html>

Next Steps ​

🎉 Congratulations!

You've built a fully interactive map using Mapmetrics GL JS.

✅ Recap ​

  • Map setup using Mapmetrics GL JS
  • Marker and Popup creation

📚 Keep Exploring ​

Visit the official documentation: