Get a free key

MapLibre GL JS quickstart

On this page
The examples use YOUR_KEY. Get a free key to run them; it takes about a minute and needs no card.Get a free key

Vector maps with PinSharing styles in MapLibre GL JS: one HTML file, or npm.

  1. Start with this complete HTML page. MapLibre 6 is an ES module, so include it as module.

    <!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.css">
  <style>#map { height: 400px; }</style>
</head>
<body>
  <div id="map"></div>
  <script type="module">
    import { Map, NavigationControl } from "https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.mjs";
    const KEY = "YOUR_KEY";
    const map = new Map({
      container: "map",
      style: `https://api.pinsharing.com/v1/styles/light.json?key=${KEY}`,
      center: [-88.35, 41.68],
      zoom: 12
    });
    map.addControl(new NavigationControl());
  </script>
</body>
</html>

  2. Or install with npm: npm install maplibre-gl

    import { Map } from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";

new Map({
  container: "map",
  style: "https://api.pinsharing.com/v1/styles/light.json?key=YOUR_KEY",
  center: [-88.35, 41.68],
  zoom: 12
});

Styles: light, dark, white, grayscale. The style JSON already carries your key in tile, font and sprite URLs; the attribution control shows the OpenStreetMap credit automatically.

Custom styles: vector tiles use the Protomaps basemap schema (zoom 0–15). Styles, fonts and sprites don't count; each vector tile counts 1 tile.

https://api.pinsharing.com/v1/tiles/vector/{z}/{x}/{y}.pbf?key=YOUR_KEY
https://api.pinsharing.com/v1/tiles/vector.json?key=YOUR_KEY   (TileJSON)

Mobile: the same style URL works in MapLibre Native (iOS, Android), MapLibre React Native and Flutter MapLibre GL.

Attribution

OpenStreetMap credit is required; the MapLibre attribution control shows it automatically from the style.

Keys in web pages

Keys used in web pages are visible to visitors. In the dashboard, limit such a key to your websites; keep an unrestricted key on your servers. See Keys & websites.

Next

↑ Contents