maplibre-gl-js README

The project's README from github.com/maplibre/maplibre-gl-js. As one markdown file: README.md.

MapLibre Logo

MapLibre GL JS

License Version CI PRs codecov

MapLibre GL JS is an open-source library for publishing maps on your websites or webview based apps. Fast displaying of maps is possible thanks to GPU-accelerated vector tile rendering.

It originated as an open-source fork of mapbox-gl-js, before their switch to a non-OSS license in December 2020. The library's initial versions (1.x) were intended to be a drop-in replacement for the Mapbox’s OSS version (1.x) with additional functionality, but have evolved a lot since then.

Getting Started

Include the CSS file in the <head> of your HTML file.

<link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />

Include the following code in the <body> of your HTML file.

<div id='map' style='width: 400px; height: 300px;'></div>
<script type='module'>
import * as maplibregl from 'https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.mjs';

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://demotiles.maplibre.org/style.json', // stylesheet location
  center: [-74.5, 40], // starting position [lng, lat]
  zoom: 9 // starting zoom
});
</script>

Enjoy the map!


Documentation

Full documentation for this library is available here.

Check out the features through examples.

Showcases
Display a map Third party vector tile source
Animate a series of images Create a heatmap layer
3D buildings Visualize population density

Want an example? Have a look at the official MapLibre GL JS Documentation.

Use MapLibre GL JS bindings for React and Angular. Find more at awesome-maplibre.


Contribution

Getting Involved

Join the #maplibre slack channel at OSMUS: get an invite at https://slack.openstreetmap.us/ Read the CONTRIBUTING.md guide in order to get familiar with how we do things around here.

Avoid Fragmentation

If you depend on a free software alternative to mapbox-gl-js, please consider joining our effort! Anyone with a stake in a healthy community-led fork is welcome to help us figure out our next steps. We welcome contributors and leaders! MapLibre GL JS already represents the combined efforts of a few early fork efforts, and we all benefit from "one project" rather than "our way". If you know of other forks, please reach out to them and direct them here.

MapLibre GL JS is developed following Semantic Versioning (2.0.0).

Sponsors

We thank everyone who supported us financially in the past and special thanks to the people and organizations who support us with recurring donations!

Read more about the MapLibre Sponsorship Program at https://maplibre.org/sponsors/.

Gold:

Logo MSFT

Logo AWS

Silver:

Logo MIERUNE

Logo komoot

Logo JawgMaps

Logo Radar

Logo mapme

Logo maptiler

Logo Caltopo

Logo SmartMaps

Backers and Supporters:


Thank you Mapbox 🙏🏽

We'd like to acknowledge the amazing work Mapbox has contributed to open source. The open source community is sad to part ways with them, but we simultaneously feel grateful for everything they already contributed. mapbox-gl-js 1.x is an open source achievement that now lives on as maplibre-gl. We're proud to develop on the shoulders of giants, thank you Mapbox 🙇🏽‍♀️.

Please keep in mind: Unauthorized backports are the biggest threat to the MapLibre project. It is unacceptable to backport code from mapbox-gl-js, which is not covered by the former BSD-3 license. If you are unsure about this issue, please ask!


License

MapLibre GL JS is licensed under the 3-Clause BSD license.

maplibre-gl-js (maplibre/maplibre-gl-js)

visualization
Searching Database…

11.9K ·GitHub
Maplibre-gl-js
What is this?An open-source JavaScript library for embedding interactive vector tile maps in websites and webview-based apps, with GPU-accelerated rendering.
Is it a hosted map service I link to, or code I put in my own page?It's a client-side library you add to your own HTML — not a hosted service. It runs in the browser or a webview and draws vector tiles on the GPU via WebGL.
How do I put a map on a page?Add the MapLibre GL CSS file and the library code to your HTML page and the quickstart map is live; full docs and examples are on the official site.
Do I need Node.js or a build setup to use it?Nothing at runtime beyond a browser. Node.js 16.14+ and npm 8.1+ are only needed if you build the library itself from source.
Is there a catch coming from its Mapbox ancestry?The code itself is fully open under BSD-3-Clause, but the hard rule is for contributors: code from mapbox-gl-js may not be backported unless covered by its former BSD-3 license.
I'm a web developer using React — will it fit my stack?Yes: besides vanilla HTML/JS, there are official bindings for React and Angular, and the docs teach through examples.
How is it different from Mapbox GL JS?It forked from mapbox-gl-js in December 2020 when Mapbox dropped its open-source license. Early 1.x releases aimed to be a drop-in replacement for Mapbox's OSS 1.x, but the library has since evolved a lot on its own.
Where can I see what it can do before committing?The official documentation site has a large set of examples plus a showcases gallery, and the awesome-maplibre list collects even more demos and projects built with it.
What are similar projects?MapStage, Leaflet, cesium, turf, city-roads, mapbox-gl-js, kepler.gl, GeoLibre
Which topics is it in?maplibre, mapping, webgl2, map, gis, geospatial, maps, interactive, webgl, visualization, bsd, browser
Creator
maplibre
Size
1 GB
Stars
11.9K
Updated
CommitOct 17Releasev6.14.0Oct 11
Age
5y
Commits · 90 Days