Shaking raster map after easeTo\flyTo

[aliir74]

Hi all.
I use raster tiles and want to keep the user in integer zoom level for prevent from blurry tiles.
on moveend event I call map.easeTo to nearest integer zoom level but after the end of the animation, my map and marker start shaking.
See this video for seeing this shaking:
https://vimeo.com/314318425

mapbox-gl-js version:
0.52.0
browser:
Google Chrome

Steps to Trigger Behavior

1. Source raster tiles
2. Use easeTo for keeping zoom level integer

map.on('moveend', _u.debounce(function() {
            map.easeTo({
                zoom: Math.round(map.getZoom()),
                speed: 0.3
            })
        }, 1000));

Link to Demonstration

https://docs.mapbox.com/mapbox-gl-js/api/#map#flyto

Expected Behavior

Change zoom to integer zoom level and fix map without shaking.

Actual Behavior

Easeto desire zoom level but with shaking after the end of easing

[asheemmamoowala]

@aliir74 The moveend event is called after an easeTo even when the zoom doesn't actually change. This is what is causing the continuous map shake in your case. It can be easily addressed with a guard for a integer zoom, with something like:

        let currZoom = map.getZoom();
            if (Math.round(currZoom) !== currZoom) {

#7426 addresses a different form of raster shaking, and can be tested in the 0.53 beta

[aliir74]

Thanks, @asheemmamoowala. I added your code and use 0.53 beta and this work fine and map didn't shake anymore. But my pin is shaking yet.

I use this code for adding the marker to map:

var geojson = {
    type: 'FeatureCollection',
    features: [{
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [{{ lon }}, {{ lat }}]
        }
    }]
};

function marker_load() {

    geojson.features.forEach(function (marker) {
        var el = document.createElement('div');
        el.className = 'marker';
        new mapboxgl.Marker(el)
            .setLngLat(marker.geometry.coordinates)
            .addTo(map);
    });
}

and call marker_load() after the creatation of mapboxgl.Map object.
and the css:

.marker {
    background-image: url('https://raah.ir/static/locator.png');
    position: absolute;
    background-size: cover;
    width: 67px;
    height: 165px;
    cursor: pointer;
}

[ivjia]

anyone can help? I still suffer this issue