MapLibre GL JSOfficial

Core JavaScript library for interactive vector maps

Maintained by MapLibre

MapLibre GL JS is the foundational JavaScript library that powers interactive vector maps in web browsers. Built with WebGL for high-performance rendering, it supports custom map styles, real-time data visualization, and extensive customization options. Perfect for developers who want direct control over map functionality without framework abstractions.

Quick start

npm install maplibre-gl

import {Map, setWorkerUrl} from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';

// MapLibre GL JS v6 + a bundler: set the worker URL once (Vite shown)
setWorkerUrl(workerUrl);

const map = new Map({
  container: 'map', // <div id="map" style="height: 400px"></div>
  style: 'https://tiles.openfreemap.org/styles/liberty',
  center: [0, 20], // [lng, lat]
  zoom: 2
});

›No bundler (CDN, ES module)

<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@^6.11.2/dist/maplibre-gl.css" />
<div id="map" style="height: 400px"></div>
<script type="module">
  import * as maplibregl from 'https://unpkg.com/maplibre-gl@^6.11.2/dist/maplibre-gl.mjs';

  const map = new maplibregl.Map({
    container: 'map',
    style: 'https://tiles.openfreemap.org/styles/liberty',
    center: [0, 20],
    zoom: 2
  });
</script>

›Setup noteschecked with v6.11.2

Current release is maplibre-gl 6.11.2 (v6), not v5. v6 ships as ES modules only: use named imports (import {Map} from 'maplibre-gl') or a namespace import. The default import (import maplibregl from 'maplibre-gl') no longer works. With a bundler you must call setWorkerUrl() once before the first map is created. Without it the worker fails to load and no tiles render. The snippet shows the Vite setup from the official docs. Use ?worker&url, not ?url, because ?url leaves out the worker's sibling file maplibre-gl-shared.mjs in production builds. For webpack 5+ use setWorkerUrl(new URL('maplibre-gl/dist/maplibre-gl-worker.mjs', import.meta.url).toString()). For Next.js (Turbopack or webpack), esbuild and Rollup, copy maplibre-gl-worker.mjs and maplibre-gl-shared.mjs into your served output and point setWorkerUrl at the worker (see the Installation section of the docs). Loading from a CDN with <script type="module"> needs no setWorkerUrl (see the alternative snippet); pin the major version (e.g. @^6.11.2), because the v5 to v6 migration guide warns that a page pinned to @latest shows a blank gray map with a 404. Import the CSS: markers, popups and controls need it. The map container must have a height. v6 requires WebGL2.

More platforms on Get started.

Used by 103 products

See all →

Amazon Location Service

Developer Platform

Amazon Location's web components and examples are powered by MapLibre GL JS and Native.

GL JS + Native · Web, Android, iOS, Server

Bing Maps

Maps & Navigation

The 2023 redesign of Bing Maps moved to an open-source stack powered by MapLibre GL JS for its vector rendering.

GL JS · Web

OpenStreetMap

Community & Geodata

OpenStreetMap.org uses MapLibre GL JS for its vector tile map layer on the web and also runs MapLibre server-side to render raster tiles from vector data, serving millions of map views every day.

GL JS · Web, Server

FlixBus

Travel

FlixBus uses MapLibre GL JS to display its extensive bus route network and connections across Europe and beyond.

GL JS · Web

AccuWeather

Weather & Hazards

AccuWeather delivers precise weather forecasts and radar maps using MapLibre GL JS for interactive weather visualization and real-time tracking.

GL JS · Web

Parcel Track & Trace

Mobility & Delivery

DHL Paket's parcel tracking on dhl.de shows the delivery vehicle's live position on a MapLibre GL JS map, and its DHL location finder maps Packstations, Paketshops, and post offices with MapLibre.

GL JS · Web