nuǝɯ pǝɥsᴉꞁod mǝu

    TypeScript icon, indicating that this package has built-in type declarations

    0.0.18 • Public • Published

    MapLibre GL Leaflet

    This is a binding from MapLibre GL JS to the familiar Leaflet API. It was originally developed for Mapbox ( and was migrated to MapLibre after Mapbox changed its license.

    Code example

    var map ='map').setView([38.912753, -77.032194], 15);
    L.marker([38.912753, -77.032194])
        .bindPopup("Hello <b>Leaflet GL</b>!<br>Whoa, it works!")
    var gl = L.maplibreGL({
        style: 'mapbox://styles/mapbox/bright-v8'

    Note that you can use any vector tile source useable by maplibre-gl. For instance, you can use OSM2VectorTiles with:

    var gl = L.maplibreGL({
    	style: '<YOUR_MAPTILER_API_KEY>'

    Once you have created the leaflet layer, the maplibre-gl map object can be accessed using

    // add a source to the maplibre-gl layer

    Live examples

    Basic example

    Cluster example

    Map events example

    Code for these examples is hosted in the examples folder


    Add a script tag referencing maplibre-gl-leaflet after adding leaflet and maplibre-gl-js in your website:

    <!-- Leaflet -->
    <link rel="stylesheet" href="" />
    <script src=""></script>
    <!-- Maplibre GL -->
    <link href="" rel='stylesheet' />
    <script src=""></script>
    <script src=""></script>


    This project makes it possible to easily add a maplibre-gl-js layer in your Leaflet map. When using maplibre-gl-leaflet, you won't be able to use some of the maplibre-gl-js features. Here are the main differences between a "pure" maplibre-gl-js map and a Leaflet map using maplibre-gl-leaflet:

    • No rotation / bearing / pitch support
    • Slower performances: When using maplibre-gl-leaflet, maplibre-gl-js is set as not interactive. Leaflet receives the touch/mouse events and updates the maplibre-gl-js map behind the scenes. Because maplibre-gl-js doesn't redraw as fast as Leaflet, the map can seem slower.

    On the bright side, the maplibre-gl-leaflet binding will allow you to use all the leaflet features and plugins.

    If you only need the maplibre-gl-js features (adding a map with a mapbox-style, adding a GeoJSON, etc.), you are probably better off using it directly.

    API Reference

    API Reference

    Bug Reports & Feature Requests

    Please use the issue tracker to report any bugs or file feature requests. You can fork this jsfiddle template to reproduce a bug, then share the URL of your fork in the GitHub issue.


    ISC © MapLibre © Mapbox


    npm i @maplibre/maplibre-gl-leaflet

    DownloadsWeekly Downloads






    Unpacked Size

    29.5 kB

    Total Files


    Last publish


    • maplibreorg
    • nyurik
    • klokan