question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Map shaking after setMaxBounds and setMinZoom

See original GitHub issue

Checklist

  • I’ve looked at the documentation to make sure the behavior isn’t documented and expected.
  • I’m sure this is an issue with Leaflet, not with my app or other dependencies (Angular, Cordova, React, etc.).
  • I’ve searched through the current issues to make sure this hasn’t been reported yet.
  • I agree to follow the Code of Conduct that this project adheres to.

Steps to reproduce

  1. Create a map.
  2. Set its maximum borders and minimum zoom to those currently visible on the screen.

const map = L.map('map').setView([50.450036, 30.5241361], 13)

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', }).addTo(map)

map.setMaxBounds(map.getBounds()).setMinZoom(map.getZoom())

Expected behavior

The map is limited by the maximum borders and the minimum zoom without any unexpected behavior.

Current behavior

Map is limited by the maximum borders and the minimum zoom, but the map is moving (shaking). I have looked at these issues: #1946, #2107, #2011, #2081, #1866, #2187. But it seems that there is no solution to my problem there, so I don’t think it’s a duplicate to any of previous issues. If it is, could you please help me to resolve this issue? Thank you!

Minimal example reproducing the issue

https://jsfiddle.net/fd3mertj/1/

Environment

  • Leaflet version: 1.8.0, 1.9.1
  • Browser (with version): Mozilla 105.0.1 (64 bit), Opera 90.0.4480.84
  • OS/Platform (with version): Windows 10 laptop

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:13 (6 by maintainers)

github_iconTop GitHub Comments

3reactions
rjacksoncommented, Oct 6, 2022

This seems to be an intermittent problem, but I can repeat it. It takes a bit of adjusting the screen to figure out a screen size that does reproduce the issue – and even then it can seemingly fix itself without intervention.

We have Map._panInsideMaxBounds set up as a moveend event listener, and at certain screen / view sizes it seems to infinitely re-trigger itself.

We are supposed to break out of this recursion in Map.panInsideBounds by checking if a recalculated center is identical to the current center:

https://github.com/Leaflet/Leaflet/blob/4372a9fcadce23d23a21370439179c09d1118ab3/src/map/Map.js#L503-L514

But our centers do not match up. Here are the center and newCenter values I’ve logged across many ticks of this recursive loop:

center newCenter
LatLng {lat: 50.450036, lng: 30.5241361} LatLng {lat: 50.450036000000004, lng: 30.524307761376956}
LatLng {lat: 50.45007183381818, lng: 30.52431106567383} LatLng {lat: 50.45007183381818, lng: 30.52413940429688}
LatLng {lat: 50.450036, lng: 30.5241361} LatLng {lat: 50.450036000000004, lng: 30.524307761376956}
LatLng {lat: 50.45007183381818, lng: 30.52431106567383} LatLng {lat: 50.45007183381818, lng: 30.52413940429688}
LatLng {lat: 50.450036, lng: 30.5241361} LatLng {lat: 50.450036000000004, lng: 30.524307761376956}
LatLng {lat: 50.45007183381818, lng: 30.52431106567383} LatLng {lat: 50.45007183381818, lng: 30.52413940429688}

Taking a look at Map._limitCenter, here are logged values for centerPoint, viewHalf, viewBounds.min, viewBounds.max, offset:

centerPoint viewHalf viewBounds.min viewBounds.max offset
Point {x: 1226393, y: 707140} Point {x: 220, y: 200} Point {x: 1226173, y: 706940} Point {x: 1226613, y: 707340} Point {x: -1, y: 0}
Point {x: 1226391.9807510755, y: 707140.3278318285} Point {x: 220, y: 200} Point {x: 1226171.9807510755, y: 706940.3278318285} Point {x: 1226611.9807510755, y: 707340.3278318285} Point {x: 1, y: 0}
Point {x: 1226393, y: 707140} Point {x: 220, y: 200} Point {x: 1226173, y: 706940} Point {x: 1226613, y: 707340} Point {x: -1, y: 0}
Point {x: 1226391.9807510755, y: 707140.3278318285} Point {x: 220, y: 200} Point {x: 1226171.9807510755, y: 706940.3278318285} Point {x: 1226611.9807510755, y: 707340.3278318285} Point {x: 1, y: 0}
Point {x: 1226393, y: 707140} Point {x: 220, y: 200} Point {x: 1226173, y: 706940} Point {x: 1226613, y: 707340} Point {x: -1, y: 0}
Point {x: 1226391.9807510755, y: 707140.3278318285} Point {x: 220, y: 200} Point {x: 1226171.9807510755, y: 706940.3278318285} Point {x: 1226611.9807510755, y: 707340.3278318285} Point {x: 1, y: 0}

I believe this might be related to floating point precision between the map bounds and its projected center. Each new projected center throws the bounds off slightly, leading to a different projected center.

I think we already have code that’s attempting to fix this in Map._limitCenter for sub-pixel offsets:

https://github.com/Leaflet/Leaflet/blob/4372a9fcadce23d23a21370439179c09d1118ab3/src/map/Map.js#L1545-L1550

I’d propose expanding that to ignore up to 1px offsets, as we seem to be seeing here.

I’ll put a PR together with that proposal, if nobody objects?

1reaction
mournercommented, Oct 6, 2022

@rjackson great analysis! Please submit a PR of course.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Leaflet - map.fitBounds() / map.getBoundsZoom() BROKEN ...
But fitBounds seems to be broken after resizing the map. Same problem with map.getBoundsZoom(). To reproduce the buggy behaviour, start with a ...
Read more >
Leaflet map keeps moving infinitely when using maxbounds
I created a crs leaflet map and I'm trying to set its maxbounds to the bounds of the crs image. When I add...
Read more >
mapbox-gl | Yarn - Package Manager
Mapbox GL JS is a JavaScript library for interactive, customizable vector maps on the web. It takes map styles that conform to the...
Read more >
Map shaking after setMaxBounds and setMinZoom - Leaflet/Leaflet ...
Map is limited by the maximum borders and the minimum zoom, but the map is moving (shaking). I have looked at these issues:...
Read more >
Restrict the map extend to geographical bounds ... - Drupal
I like to restrict the map so that it is not possible to pan outside a given map extend. It should be possible...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found