Leaflet / Leaflet

πŸƒ JavaScript library for mobile-friendly interactive maps πŸ‡ΊπŸ‡¦
https://leafletjs.com
BSD 2-Clause "Simplified" License
41.23k stars 5.82k forks source link

Map Tries to Get Fractional Level Tiles When Change Tile Url #9400

Open ABPW10 opened 2 months ago

ABPW10 commented 2 months ago

Checklist

Steps to reproduce

  1. Load A Map with tile layer in Leaflet with Its zoomSnap option set to an decimal value, such as 0.25, and Set the Map Zoom to be a non-integer value, such as 1.5

        const map = L.map('map',{ zoomSnap: 0.25 }).setView([51.505, -0.09], 13.5);
    
    const l = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);
  2. Change the tile layer's URL to something else by using the setUrl() function for layers l.setUrl('http://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}')
  3. Errors pop up when the map is loading tiles that does not exist on the tile server.

Expected behavior

When using the setUrl() function for layers, the map will load new tiles of the same integer level tiles it loaded for the old tile set.

Current behavior

When using the setUrl() function for layers, the map tries to load new tiles of the fractional zoom level the map is currently at. image image

Minimal example reproducing the issue

https://plnkr.co/edit/v0dYEhnyhilUGDAk

Environment

ABPW10 commented 2 months ago

Workaround by temporarily overriding the map's getZoom() function :

        const originalZoom=map.getZoom()
        const originalGetZoom=map.getZoom
        if(originalZoom%1!==0){map.getZoom=()=>Math.round(originalZoom)}
        mapLyrImg.options=lyrImg.options
        mapLyrImg.setUrl(lyrImg._url)
        if(originalZoom%1!==0){map.getZoom=originalGetZoom;map.setZoom(originalZoom)}