MapMetrics Atlas API Docs

Appearance

Getting Started with MapMetrics ​

What is MapMetrics? ​

MapMetrics is a next-generation mapping platform that leverages data contributed by users from all around the world. By gathering real-time information from the community, MapMetrics creates highly accurate, up-to-date, and dynamic maps — built by the community, for the community.

MapAtlas is the core technical foundation and mapping engine. MapMetrics is the community-powered layer where users contribute, validate, and benefit from the most up-to-date maps.

Why Choose MapMetrics? ​

  • Community-Driven — Maps constantly updated with data from users worldwide
  • Customizable — Style maps to match your brand using the intuitive Studio interface
  • Real-Time Updates — Latest map changes, traffic conditions, and points of interest
  • Powerful APIs — Map rendering, search, geocoding, directions, and more
  • Vector Tile Technology — Efficient, fully customizable client-side rendering

Step 1 — Create Your Style & API Key ​

  1. Visit portal.mapmetrics.org
  2. Go to Styles → create or customize a map style → save → copy the Style URL
  3. Go to Keys → click New Key → configure permissions → copy your API Key

Your Style URL looks like:

https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_ID/style.json&token=YOUR_TOKEN

The Style URL already contains your token — use it directly as the style option in the map.

Step 2 — Add MapMetrics to Your Project ​

Option A: CDN (Plain HTML — quickest) ​

Add these two lines to your <head>:

html
<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>

Then initialize the map:

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>
    body { margin: 0; }
    #map { height: 100vh; width: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    const map = new mapmetricsgl.Map({
      container: 'map',
      style: 'YOUR_STYLE_URL_WITH_TOKEN',
      center: [0, 20],
      zoom: 2
    });
    map.addControl(new mapmetricsgl.NavigationControl(), 'top-right');
  </script>
</body>
</html>

⚠️ Important: The global variable is mapmetricsgl — NOT maplibregl.

Option B: NPM / React ​

bash
npm install @mapmetrics/mapmetrics-gl
jsx
import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';

const map = new mapmetricsgl.Map({
  container: 'map',
  style: 'YOUR_STYLE_URL_WITH_TOKEN',
  center: [0, 20],
  zoom: 2
});

CDN Reference ​

FileURL
JavaScripthttps://cdn.mapmetrics-atlas.net/versions/latest/mapmetrics-gl.js
CSShttps://cdn.mapmetrics-atlas.net/versions/latest/mapmetrics-gl.css
NPM Package@mapmetrics/mapmetrics-gl
Global variablemapmetricsgl

Common Errors ​

ErrorCauseFix
mapmetricsgl is not definedUsing maplibregl or script loaded dynamically without onloadUse mapmetricsgl and put script in <head>
401 UnauthorizedInvalid or missing tokenGet a valid Style URL from portal.mapmetrics.org
Blank mapWrong style URL formatStyle URL must include ?token=YOUR_TOKEN

Next Steps ​