Limit map zooms to integer zoom level after initial fractional zoom in Leaflet?

Question

I have a map that defaults to a fractional zoom level for a particular reason. (I need to keep it this way if at all possible.)

However, whenever the user zooms in or out by any means, I want the map to zoom to an integer zoom level, but without zooming twice (e.g., leaflet zooms to a fractional level and then my code zooms a second time to an integer level).

I have set zoomDelta and zoomSnap to 1 after setting the map view, but doing this has not achieved what I want: zooming in or out still just changes the zoom level by 1, so the result is still a fractional value.

(To clarify, let's say default zoom is 2.25. If the first zoom is a zoom out, it should result in 1, because that's 2.25 rounded to 2 and then minus 1. If the first zoom is a zoom in, it should result in 3, which is 2.25 rounded to 2 then plus 1. Any further zooming would just be +/- 1 as usual because we would be starting from an integer.)

        map = L.map('map', {
            maxBoundsViscosity: 1.0,
            zoomControl: false
        }).setView([defLat, defLon], 2.25);

        L.setOptions(map, { zoomDelta: 1, zoomSnap: 1 });

        //coded this way because the variable is needed elsewhere
        let zoomControls = L.control.zoom({ position: 'bottomright' }).addTo(map);

I have tried listening for 'zoomstart', 'zoom', and 'zoomend', then putting a setZoom() in these listeners, but the setZoom() causes the double-zoom that I'm trying to avoid.

    map.on('zoomend', function (e) {
        let level = map.getZoom();
        let levelAsInteger = Math.round(level);

        if (level !== levelAsInteger) {
            map.setZoom(levelAsInteger);
        }
    });

So is there some way to ensure the map always zooms to an integer zoom level even though it starts at a fractional zoom level?

Note that the solution has to work for all zooming - whether by mousewheel or zoom buttons on the map - so I can't just customize the zoom button onclicks.

Answer 1

Solution to allow initial fractional zoom is to initially set map zoomSnap option to a value that allows desired fractional zoom. After initial setView this option is then set to 1 to prevent fractional zooms.

Code could then look like this:

map = L.map('map', {
  zoomSnap: 0.01,
  maxBoundsViscosity: 1.0,
  zoomControl: false
}).setView([defLat, defLon], 2.25);

L.setOptions(map, {
  zoomSnap: 1
});