I'm facing the issue following issue:

null is not an object (evaluating 'this._map.containerPointToLayerPoint')

as seen in the original mapbox-package (https://github.com/mapbox/mapbox-gl-leaflet/blob/master/leaflet-mapbox-gl.js)
on:
https://github.com/mapbox/mapbox-gl-leaflet/blob/df9c10ccf4fe92238f97ea0d64d8366ec709d5d3/leaflet-mapbox-gl.js#L159-L1

the _update method will return, if this._map is not null.

in the current release of

this part is missing
if (!this._map) { return; }

Currently the README.md points to minified files hosted at the following two locations:

<!-- Maplibre GL -->
<link href="https://media.seventhsense.ai/maplibre-gl-js/v1.14.0/maplibre-gl.css" rel='stylesheet' />
<script src="https://media.seventhsense.ai/maplibre-gl-js/v1.14.0/maplibre-gl.js"></script>

I suggest that we move away from my org CDN to a publicly available CDN like https://cdnjs.com/

This will allow you to keep the files in sync with any updates in this repository.

What is left to do with this repo before we publish on NPM?

Hi I am using this package to get the vector tiles for my leaflet map. But I see the in the pbf files that is being called the zoom level is 1 less than the map actual zoom level. Which is causing issues for me. It should be in sync with mapzoom Right.

The demo as linked in the readme gives a gray background - maybe an incompatibility with current leaflet?

We want to use this in MapComplete...

While re-implementing the tile layer with maplibre-gl-leaflet I noticed the quality of the tiles dropped due to blurriness.

I hope the difference is recognisable in the screenshots 😅

With leaflet on its own with raster tiles (or maplibre-gl on its own with vector tiles), the map looks sharp and crisp:

But when I try to use maplibre-gl-leaflet, it's not as clean:

The reason is that tile layer gets a transform css rule with fractions:

So if the style were transform: translate3d(-107px, -50px, 0px) instead, we would not have the problem.

Can we round the translate properties?

How do we have to handle the LICENSE file @lseelenbinder ?

Hello there,

I've been trying to use maplibre-gl with react-leaflet to display satellite and roadmap layers from an external provider. I noticed a random behaviour when switching from one to another.

As you can notice from the screenshot below, when switching from satellite to roadmap the map / layers are shifted to the left and not correctly loading. Interacting with the map however will make it work again.

React Leaflet tile layer:

import L from 'leaflet';

import '@maplibre/maplibre-gl-leaflet';

const MapLibreTileLayer = createTileLayerComponent(
    function createTileLayer({ url, attribution, ...options }, context) {
        const instance = L.maplibreGL(
            { style: url, attribution: attribution, noWrap: true },
            withPane(options, context),
        );
        return Object.freeze({ instance, context });
    },
    function updateTileLayer(layer, props, prevProps) {
        updateGridLayer(layer, props, prevProps);

        const { url, attribution } = props;
        if (url != null && url !== prevProps.url) {
            layer.getMaplibreMap().setStyle(url);
        }

        if (attribution != null && attribution !== prevProps.attribution) {
            layer.options.attribution = attribution;
        }
    },
);

export default MapLibreTileLayer;

versions:

@maplibre/maplibre-gl-leaflet": "0.0.19",
react-leaflet: "3.2.5",
maplibre-gl: "3.3.1",
leaflet: "1.9.3",

Thank you @codespree for migrating mapbox-gl-leaflet to maplibre-gl-leaflet. As you have suggested in maplibre/maplibre-gl-js#123 we can now continue maintaining this project in the maplibre organization on GitHub.

Maybe you can add a link to this repository here at the top of the README in your repo.

I use this way to import, but there is Error: L.maplibreGL is not a function

If you drag the map out of the window, the maplibre-gl-leaflet layer gets stuck in view while other leaflet layers (like markers) continue to get pulled, causing the two layers not to be aligned correctly.

Replication case

https://jsbin.com/vepuyeqoyo/3/edit?html,output

1. Open the demo case
2. Drag the map down
   • Expected: point stays in its place relative the maplibre-gl-leaflet layer (in the ocean above greenland)
   • Actual: when the maplibre-gl-leaflet layer reaches the bottom of the window, as the map continues to be drug down, the point moves relative to the maplibre-gl-leaflet layer, moving all the way off screen.

Thanks for this great project.

I've just noticed that Arabic words are rendered without ligature (letters not connected) and with the letters in the reverse order.

I can get this library working with all versions of maplibre-gl-js upto and including 2.05.
After that I get TypeError error:
Uncaught TypeError: Cannot read properties of undefined (reading 'Map')
leaflet-maplibre-gl.js:128

I am I doing something wrong, or is there a fundamental change in maplibre-gl-js?
Jim

Hello,
based on this example: https://raw.githack.com/maplibre/maplibre-gl-leaflet/aa06e210ab8f8ea136407a8f1481b4b8077c3d5a/examples/events.html

it has numerous issues:

1. tilt + zoom is janky
2. marker is misplaced upon tilting + rotation
3. tilt + rotate + drag is working as without any change to tilt + rotate

Could this be fixed please?

Hi,

Sorry, I'm new to maplibre-gl-leaflet and I'm testing it on an Android device. It seems that TouchPitchHandler is not active by default or it is not working.

For instance in the example:
https://raw.githack.com/maplibre/maplibre-gl-leaflet/main/examples/events.html

• on desktop I can rotate and tilt map with mouse right button;
• on android, I can't rotate or tilt map by dragging up and down with two fingers, as described in https://maplibre.org/maplibre-gl-js-docs/api/handlers/#touchpitchhandler
• The double click to zoom (https://maplibre.org/maplibre-gl-js-docs/api/handlers/#doubleclickzoomhandler) seems to work.

Is this the expected behaviour with maplibre-gl-leaflet? Using pure maplibre-gl-js I can use the two fingers to tilt and rotate.

Thank you very much!

Hi,

I'd like to use this leaflet plugin, but I"m having trouble trying to figure out how to set this up in Vue3 components.

I import the Leaflet plugin like this:
import L from "leaflet"

I have added maplibre-gl to the project, but i'm not sure how to import this and the maplibre-gl-leaflet plugin in my component.

I tried the standard approach of adding the cdn package sin the , but that wasn't working for me. Any suggestions here?

After updating from 0.0.17 to 0.0.18 the example in README won't compile with typescript because style property is missing in the type.

L.maplibreGL({
	style: 'https://api.maptiler.com/maps/topo/style.json?key=<YOUR_MAPTILER_API_KEY>'
})

This is a minimal example showing the problem and a quick fix.

<!DOCTYPE html>
<html>
  <head>
    <title>WebGL</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      html, body, #map {
        width: 100%;
        height: 100%;
        margin: 0;
      }

      /* this is the quick fix */
      /*
      .maplibregl-map.leaflet-gl-layer {
        z-index: 2;
        position: absolute;
      }
      */
    </style>

    <!-- Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

    <!-- Maplibre GL -->
    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js" integrity="sha256-DZX5P4DwrMTAQcrxknJKB7yvckwa5gw12lN0KL+Qz/Q=" crossorigin="anonymous"></script>
    <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" integrity="sha256-Ql8WB81mu27BVBng2iDbDN28cueGCEnDWtZ5U/fKIBA=" crossorigin="anonymous" />
    <script src="https://unpkg.com/@maplibre/[email protected]/leaflet-maplibre-gl.js" integrity="sha256-eUY3Ak8dlanzgNHMl6V+uOFMR6y6PIgdArTaG/dqn2k=" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var leafletMap = L.map('map').setView([0,0], 2);

      var gl1 = L.maplibreGL({
        style: {
          "version": 8,
          "name": "blah",
          "sources": {
            "points": {
              "type": "geojson",
              "data": {
              "type": "Feature",
              "geometry": {
                "type": "Polygon",
                "coordinates": [[
                  [10,10],
                  [20,10],
                  [20,20],
                  [10,20]]]
                }
              }
            }
          },
          "layers": [
            {
              "id": "points",
              "source": "points",          
              "type": "fill",
              "paint": {
                "fill-color": "#800",
                "fill-opacity": 0.8
              }
            }
          ]
        }
      }).addTo(leafletMap);
      
      var gl2 = L.maplibreGL({
        style: {
          "version": 8,
          "name": "blah",
          "sources": {
            "points": {
              "type": "geojson",
              "data": {
              "type": "Feature",
              "geometry": {
                "type": "Polygon",
                "coordinates": [[
                  [30,10],
                  [40,10],
                  [40,20],
                  [30,20]]]
                }
              }
            }
          },
          "layers": [
            {
              "id": "points",
              "source": "points",          
              "type": "fill",
              "paint": {
                "fill-color": "#008",
                "fill-opacity": 0.8
              }
            }
          ]
        }
      }).addTo(leafletMap);

      var layerCtrl = new L.Control.Layers({}, {gl1, gl2}, {collapsed: false});
      layerCtrl.addTo(leafletMap);

    </script>
  </body>
</html>

The root of the problem is that the .leaflet-gl-layer container has position: relative; which causes the second layer to be placed just outside of the viewport. It also seems that the zIndex option is not working, which causes problems when combining maplibre-gl layer with other leaflet layers. But I would consider this a separate issue.

The examples linked from the readme (e.g. https://raw.githack.com/maplibre/maplibre-gl-leaflet/main/examples/basic.html ) all fail to load.

I can see the following error message in my browser's console:

Error: AJAXError: Forbidden (403): https://api.maptiler.com/maps/topo/style.json?key=[snip]

...which tells me the Maptiler API key has expired, or has the wrong referrers set up.

Hi,
firstly, thanks for maintaining this!

This package currently lists "maplibre-gl": "^2.4.0" as peer dependency. Is there anything stopping it from moving to 3.x ?

The demo links linked from the readme are not working

• https://raw.githack.com/maplibre/maplibre-gl-leaflet/aa06e210ab8f8ea136407a8f1481b4b8077c3d5a/examples/basic.html
• https://raw.githack.com/maplibre/maplibre-gl-leaflet/aa06e210ab8f8ea136407a8f1481b4b8077c3d5a/examples/cluster.html
• https://raw.githack.com/maplibre/maplibre-gl-leaflet/aa06e210ab8f8ea136407a8f1481b4b8077c3d5a/examples/events.html

Possible cause

It looks like the SSL cert is invalid on https://media.seventhsense.ai/maplibre-gl-js/v1.14.0/maplibre-gl.js and https://media.seventhsense.ai/maplibre-gl-js/v1.14.0/maplibre-gl.css

Possible solution

Can we switch those URLs to unpkg? e.g. https://unpkg.com/[email protected]/dist/maplibre-gl.js (or the latest version https://unpkg.com/[email protected]/dist/maplibre-gl.js)

I discovered that by default MapLibre GL's layers are added to the bottom of the leaflet canvas。
Is there any way to control the overlay order of layers?

Detailed explanation: Leaflet/Leaflet#8089

mapbox-gl-leaflet issue: mapbox/mapbox-gl-leaflet#151

So far everything appears to be working; if there are no known issues, could 4.x be added to the version spec? Thank you