MapMetrics Atlas API Docs

Appearance

Both copy text to your clipboard — Build with AI copies a setup prompt to paste into Claude Code, Cursor, Codex or Copilot; Copy page as Markdown copies this page to paste into a chat. How it works

Mapbox migration guide ​

This part of the docs is dedicated to the migration from mapbox-gl to MapMetrics GL.

This guide might not be accurate depending on the current version of mapbox-gl but should be fairly straight forward.

The libraries are very similar but diverge with newer features happening from v2 in both libraries where Mapbox turned proprietary.

The overall migration is: uninstall mapbox-gl, install @mapmetrics/mapmetrics-gl (or use the CDN links below), then replace mapboxgl with mapmetricsgl throughout your TypeScript, JavaScript and HTML/CSS.

The global is mapmetricsgl, not mapmetrics

The UMD bundle defines exactly one global, mapmetricsgl. Writing new mapmetrics.Map(...) throws mapmetrics is not defined. The CSS classes follow the same name — mapmetricsgl-ctrl, not mapmetrics-ctrl.

bash
npm uninstall mapbox-gl
npm install @mapmetrics/mapmetrics-gl
dif
-    var map = new mapboxgl.Map({
+    var map = new mapmetricsgl.Map({

-    <button class="mapboxgl-ctrl">
+    <button class="mapmetricsgl-ctrl">

For an ES module build, the import is:

js
import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';

Mapmetrics gives you custom links

dif
-  <script src="https://api.mapbox.com/mapbox-gl-js/v#.#.#/mapbox-gl.js"></script>
-  <link href="https://api.mapbox.com/mapbox-gl-js/v#.#.#/mapbox-gl.css" rel="stylesheet" />

+  <script src="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.js"></script>
+  <link  href="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css" rel="stylesheet" />