How to use: In detail

How to load MapLibre?

Include MapLibre GL JS in the `<head>`. If you are using npm, you can install the `maplibre-gl` package. Make sure to import the CSS as well.

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

Initialize it to a div like this:

    <div id="map" style="width: 100%; height: 500px"></div>
    <script>
      const map = new maplibregl.Map({
        style: 'https://tiles.openfreemap.org/styles/liberty',
        center: [-0.114, 51.506],
        zoom: 14.2,
        container: 'map'
      })
    </script>

Using Mapbox?

If you are currently using Mapbox, please change your libraries to MapLibre GL JS. MapLibre is based on the last open-source version of Mapbox GL JS before it went closed-source. Migrating should be as simple as changing the libraries, as long as you are not using any features specific to the 2.x or later releases.

Using Leaflet?

A Leaflet-based snippet is coming soon.

Mobile Apps

For mobile apps, you can use the same styles with MapLibre Native.

Custom styles

You can customize the styles using the Maputnik editor. For example, you can remove labels, POIs, or change colors.

When you use a customized style, you need to host the style JSON yourself and use its URL in MapLibre.

Customize Bright

Customize Liberty

Customize Positron

Self-hosting

You can also download our processed planet MBTiles and Btrfs images if you want to self-host yourself. Details can be found on GitHub.