Description
When panning the map using the left mouse button, I experience a noticeable stutter or choppy movement in the map rendering. The issue occurs consistently when using the @maplibre/maplibre-gl-leaflet library to render vector tiles.
Steps to Reproduce
- Load a simple map using Leaflet and MapLibre-GL-Leaflet.
- Use the following code snippet:
`<!doctype html>
<title>WebGL with PBF</title>
<style>
html,
body,
#map {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<!-- Leaflet -->
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
crossorigin=""
/>
<script
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
crossorigin=""
></script>
<!-- Maplibre GL -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/maplibre-gl/4.7.1/maplibre-gl.min.css"
crossorigin="anonymous"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/maplibre-gl/4.7.1/maplibre-gl.min.js"
crossorigin="anonymous"
></script>
<script src="https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.0.20/leaflet-maplibre-gl.js"></script>
<script>
var leafletMap = L.map('map').setView([10.770325, 106.705436], 12);
var gl = L.maplibreGL({
padding: 0.1,
style: 'http://localhost:8000/html/vector-tiles/style_tileserver.json',
interactive: true,
minZoom: 0,
maxZoom: 16,
}).addTo(leafletMap);
var maplibreMap = gl.getMaplibreMap();
maplibreMap.on('load', () => {
maplibreMap.addSource('demolayer', {
type: 'vector',
tiles: ['http://localhost:8080/data/openmaptiles/{z}/{x}/{y}.pbf'],
minzoom: 0,
maxzoom: 16,
});
maplibreMap.addLayer({
id: 'demolayer',
type: 'fill',
minzoom: 0,
maxzoom: 16,
source: 'demolayer',
'source-layer': 'wld_cities',
paint: {
'fill-opacity': 1,
},
});
});
</script>
`
- Run a local TileServer-GL instance to serve the style_tileserver.json file and vector tiles.
- Open the map in a browser.
- Use the left mouse button to pan the map.
Observed Behavior
The map movement while panning is not smooth and appears jittery, as if the rendering is not keeping up with the mouse movement.
Expected Behavior
Map panning should be smooth without any visible stuttering.
Description
When panning the map using the left mouse button, I experience a noticeable stutter or choppy movement in the map rendering. The issue occurs consistently when using the @maplibre/maplibre-gl-leaflet library to render vector tiles.
Steps to Reproduce
`<!doctype html>
<title>WebGL with PBF</title> <style> html, body, #map { width: 100%; height: 100%; margin: 0; } </style>Observed Behavior
The map movement while panning is not smooth and appears jittery, as if the rendering is not keeping up with the mouse movement.
Expected Behavior
Map panning should be smooth without any visible stuttering.