MapMetrics Atlas API Docs

Appearance

Google map to Mapmetrics ​

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://gateway.mapmetrics-atlas.net/assets/css/mapmetrics-gl.css"
      rel="stylesheet"
    />
    <script src="https://gateway.mapmetrics-atlas.net/assets/js/mapmetrics-gl.js"></script>
    <script src="https://gateway.mapmetrics-atlas.net/assets/js/pmtiles.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 protocol = new pmtiles.Protocol();
      mapmetrics.addProtocol("pmtiles", protocol.tile);
      const map = new mapmetrics.Map({
        container: "map",
        style: `https://gateway.mapmetrics-atlas.net/styles/?fileName=fe60a384-0e5a-4960-bf04-b6ca740bc20c/AtlasGlow.json&token=${accessToken}`,
        zoom: 2,
        center: [2.3210938, 48.7965913],
      }).addControl(new mapmetrics.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 protocol = new pmtiles.Protocol();
  mapmetrics.addProtocol("pmtiles", protocol.tile);

  const map = new mapmetrics.Map({
    container: "map",
    style: `https://gateway.mapmetrics-atlas.net/styles/?fileName=fe60a384-0e5a-4960-bf04-b6ca740bc20c/AtlasGlow.json&token=${accessToken}`,
    zoom: 2,
    center: [2.3210938, 48.7965913],
  }).addControl(new mapmetrics.NavigationControl(), "top-right");
</script>
  • container: HTML element to contain the map.
  • Style options:
    1. AtlasGlow (Light): https://gateway.mapmetrics-atlas.net/styles/?fileName=fe60a384-0e5a-4960-bf04-b6ca740bc20c/AtlasGlow.json&token=${accessToken}
    2. MoonTrace (Dark): https://gateway.mapmetrics-atlas.net/styles/?fileName=fe60a384-0e5a-4960-bf04-b6ca740bc20c/MoonTrace.json&token=${accessToken}
  • 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 mapmetrics.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 mapmetrics.Popup().setHTML(
    `<h3>Hello Mapmetrics</h3><p>A good coffee shop</p>`
  );

  new mapmetrics.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://gateway.mapmetrics-atlas.net/assets/css/mapmetrics-gl.css"
      rel="stylesheet"
    />
    <script src="https://gateway.mapmetrics-atlas.net/assets/js/mapmetrics-gl.js"></script>
    <script src="https://gateway.mapmetrics-atlas.net/assets/js/pmtiles.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 protocol = new pmtiles.Protocol();
      mapmetrics.addProtocol("pmtiles", protocol.tile);

      const map = new mapmetrics.Map({
        container: "map",
        style: `https://gateway.mapmetrics-atlas.net/styles/?fileName=fe60a384-0e5a-4960-bf04-b6ca740bc20c/MoonTrace.json&token=${accessToken}`,
        zoom: 10,
        center: [2.3210938, 48.7965913],
      }).addControl(new mapmetrics.NavigationControl(), "top-right");
    </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 GoogleToMapmetrics = () => {
  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: 10,
      center: [2.3210938, 48.7965913],
    });

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

    mapRef.current = map;

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

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

export default GoogleToMapmetrics;

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: