2

I'm unable to force my leaflet map to use only integer zoom levels. As long as I use only the -/+ control buttons it's fine, but as soon as I use the mouse wheel or a function like map.fitBounds(some polygon) I always end up with a fractional zoom level.

This is bad for me because I use tiles for levels 0 to 17 and when I end up with a fractional zoom level in between two levels, like 10.5, the tiles are scaled and blurry.

The documentation says the default for zoomSnap and zoomDelta is 1. So I don't get why I end up with a fractional zoom level anyway. How can I prevent this?

I'm using these

<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>

<!-- L.esri for Leaflet -->
<script src="https://unpkg.com/esri-leaflet@2.0.4"></script>

<!-- Elevation plugin for Leaflet -->
<link rel="stylesheet" href="/app/libs/leaflet-elevation/dist/leaflet.elevation-0.0.4.css" />
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!--<script src="app/libs/leaflet-elevation/dist/leaflet.elevation-0.0.4.min.js"></script>-->
<script src="/app/libs/leaflet-elevation/dist/leaflet.elevation-0.0.4.src.js"></script>

<!-- Marker Cluster plugin for Leaflet -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.Default.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.css">
<script src="https://unpkg.com/leaflet.markercluster@1.0.0/dist/leaflet.markercluster.js"></script>

<!-- zoomhome plugin for Leaflet -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="/app/libs/leaflet-zoomhome/leaflet.zoomhome.css"/>
<script src="/app/libs/leaflet-zoomhome/leaflet.zoomhome.js"></script>

and here's how I init my map:

    this.map = L.map(this.config.domNode, {
        center: [50.13466432216696, -72.72949218750001],
        zoom: 6,
        zoomSnap: 1,
        zoomDelta: 1,
        zoomControl: false,
        minZoom: 3,
        maxZoom: 17,
        scrollWheelZoom: this.config.scrollWheelZoom,
        wheelDebounceTime: 20,
        wheelPxPerZoomLevel: 50
    });

    L.Control.zoomHome({ position: 'topright' }).addTo(this.map);
greenkarmic
  • 429
  • 4
  • 17
  • 1
    Can you make sure that the `zoomSnap` option is `1` after you've loaded all plugins? Do a `console.log(map.options.zoomSnap)` after everything has loaded. – IvanSanchez Nov 02 '16 at 19:37
  • I actually just found the culprit. I suspected, like you say, that the valueof zoomSnap was changed after initialisation, maybe by one of the plugins I load through CDNs. It turns out that the tangram library from mapzen we use for our basemap is setting the zoomSnap to 0 in a function called "modifyScrollWheelBehavior". I'm not sure why yet, I'll investigate, but I'm just happy I finally figure out the actual reason. They probably don't care about this because they use vector tiles, but it definitely screws with other tile layers in the map. – greenkarmic Nov 02 '16 at 19:43

2 Answers2

3

The tangram library was setting the zoomSnap to 0 after adding our basemap to the map. Which basically enables fractional zoom levels for the map.

After digging through the tangram documentation, I found this little nugget of information:

modifyScrollWheel

By default, Tangram modifies Leaflet’s scrollwheel behavior, for better synchronization with its own render loop while zooming. If this interferes with your application, you can disable this behavior with the optional modifyScrollWheel option:

var layer = Tangram.leafletLayer({
    modifyScrollWheel: false,
    ...
});

I tried it, and indeed it fixed my issue.

IvanSanchez
  • 18,272
  • 3
  • 30
  • 45
greenkarmic
  • 429
  • 4
  • 17
0

Fractional zooming was added as an enhancement you can disable it using zoomStep= 1

Chandan Rai
  • 9,879
  • 2
  • 20
  • 28
  • I tried adding zoomStep: 1 in my options but no change. Also in the code you link to, the default for zoomStep is also 1. It should be integers by default. I don't get it. – greenkarmic Nov 02 '16 at 19:30
  • 2
    Please note that the option is `zoomSnap`, and is [documented in the Leaflet API docs](http://leafletjs.com/reference-1.0.0.html#map-zoomsnap). `zoomStep` simply does not exist. – IvanSanchez Nov 02 '16 at 19:39