explaingit

maplibre/maplibre-gl-js

10,611TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

An open-source JavaScript library for embedding fast, interactive maps into websites, renders maps using the GPU so users can pan, zoom, rotate, and tilt smoothly in their browser without reloading images.

Mindmap

mindmap
  root((MapLibre GL JS))
    What it does
      Interactive web maps
      GPU-rendered tiles
      Pan, zoom, tilt
    Data types
      Heatmaps
      3D buildings
      Custom overlays
    Framework bindings
      React
      Angular
    Tech
      TypeScript
      WebGL
      Vector tiles
    License
      BSD 3-Clause
      Open source
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Embed an interactive map with pan, zoom, and tilt on a website using just a few lines of JavaScript.

USE CASE 2

Visualize geographic data as heatmaps, custom overlays, or 3D building extrusions on a web map.

USE CASE 3

Replace Mapbox GL JS with a fully open-source alternative that keeps the same API and works without a commercial license.

USE CASE 4

Build a React or Angular app with an interactive map using the official MapLibre framework bindings.

Tech stack

TypeScriptJavaScriptWebGL

Getting it running

Difficulty · easy Time to first run · 5min

Add two script/link tags to any HTML page, needs a tile source URL, free options available from providers like MapTiler or OpenFreeMap.

BSD 3-Clause license, use freely for any purpose including commercial, just keep the copyright notice and don't use the project name to endorse your product.

In plain English

MapLibre GL JS is an open-source JavaScript library for embedding interactive maps into websites and web-based apps. It renders maps using the GPU, which means maps can display large amounts of geographic data smoothly and allow users to pan, zoom, rotate, and tilt in real time directly in a browser tab, without loading new images from a server. The project started as a community fork of a popular commercial mapping library called mapbox-gl-js after that library's developers changed its license in December 2020 to restrict open-source use. MapLibre GL JS keeps the same core approach and is designed to be a compatible replacement, though it has since grown and changed on its own path. To add a map to a web page, you include two small files (a stylesheet and a script), create a div element to hold the map, and write a few lines of JavaScript specifying the map center coordinates and zoom level. The library handles the rest: fetching map tile data, drawing roads and buildings and labels, and responding to user interaction. The README shows the complete working example in about ten lines of code. Beyond basic maps, the library supports 3D terrain, animated layers, heatmaps, building extrusion, population density visualization, and custom data overlays. There are official bindings for React and Angular if you are using those frameworks. Sponsors include Microsoft and AWS, which fund ongoing development. The project is community governed and welcomes contributors. It uses a three-part open-source license (BSD 3-Clause) and has full API documentation and a large example gallery available at maplibre.org.

Copy-paste prompts

Prompt 1
Using MapLibre GL JS, show me the complete HTML and JavaScript to embed an interactive map centered on Paris that lets users zoom and tilt, using a free tile source.
Prompt 2
How do I add a GeoJSON layer to a MapLibre GL JS map that shows city locations as colored circles where the circle size scales with a population value in my data?
Prompt 3
I'm migrating from Mapbox GL JS to MapLibre GL JS. What do I need to change in my existing code and are there any API differences I should watch out for?
Prompt 4
Show me how to add 3D building extrusion to a MapLibre GL JS map using a free vector tile source and let users toggle it on and off with a button.
Open on GitHub → Explain another repo

← maplibre on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.