Skip to content

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

MapMetrics GL (Web)

MapMetrics GL is the browser map library: it renders vector tiles on a <canvas> with WebGL, and gives you markers, popups, geometry, clustering and heatmaps on top. Use it for maps in a web page or web app. For mobile, see the Android, iOS or Flutter SDKs instead; to turn text into coordinates, see the geocoding SDKs.

Source: github.com/MapMetrics/mapmetrics-gl

Prerequisites

For all of our examples, you will need:

  • an API key,
  • basic knowledge of JavaScript and HTML,
  • one style (default)

Get the library

From a CDN:

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

That loads whatever version is latest on npm; pin one (@mapmetrics/mapmetrics-gl@1.0.0) for production.

Or from npm:

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

The package is @mapmetrics/mapmetrics-gl and the browser global is mapmetricsgl — not maplibre-gl / maplibregl. MapMetrics GL is built on MapLibre, but the upstream library does not carry the gateway authentication and style handling, so swapping it in will not work against MapMetrics style URLs.

Examples