Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Map content moves when zooming #4053

Closed
willemx opened this issue Nov 26, 2015 · 9 comments
Closed

Map content moves when zooming #4053

willemx opened this issue Nov 26, 2015 · 9 comments

Comments

@willemx
Copy link

willemx commented Nov 26, 2015

My simple test-app (created with V1 beta2) has some strange zooming behaviour: when zooming out, the drawn polygon moves south-east and returns to its correct postion when the zoom operation ends. When zooming in, the drawn polygon moves north-west and returns to its correct postion when the zoom operation ends.

this is my app:

var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution: "&copy; <a href='http://openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
}).addTo(map);
var polygon = L.polygon([
  [51.509, -0.08],
  [51.503, -0.06],
  [51.51, -0.047]
]).addTo(map);

I published the app to testmapw.meteor.com, have a look...
If I replace V1.0.0 beta2 with V0.7.3 everything is ok again.

@IvanSanchez
Copy link
Member

Cannot reproduce in beta2.

http://playground-leaflet.rhcloud.com/waj/edit?html,output

@willemx
Copy link
Author

willemx commented Nov 26, 2015

Did you try testmapw.meteor.com ?

@IvanSanchez
Copy link
Member

Yeah, but if I cannot reproduce the bug in a controlled minimal environment, I have to assume it's not a problem in the Leaflet core.

Also, I cannot know what's going on in your webpage, as all the JS is minified and I cannot trace code execution.

@willemx
Copy link
Author

willemx commented Nov 26, 2015

Thank you for looking into this! I understand your position.
I would like to debug this myself then; I just need some advice on how/where to start.
I made a minimal Meteor app (https://www.meteor.com/) using a meteor package that wraps the leaflet V1Beta2 library: https://atmospherejs.com/bevanhunt/leaflet and deployed this to maptestw.meteor.com.
This shows the error as you have seen.
If I just replace the leaflet library package with an older version (V0.7.3) the error goes away.
I notified the package author of this problem too (truemagic-coder/meteor-leaflet#61) and he suspects it could have to do with "the tile set not having fully loaded"
Could you point me in a direction to verify this or give me some other advice to start debugging this?

@willemx
Copy link
Author

willemx commented Nov 27, 2015

Not sure if this info is of any value diagnosing the problem, but If I set { zoomAnimation: false } for the map, the erratic content movement is gone (but alas, also the animation :{ )...

@tc33133
Copy link

tc33133 commented Apr 26, 2017

Sorry, I know this is closed, but I ran into this problem as well. My problem was due to using the old css file (0.7.3) instead of the current one (1.0.3). Hope this helps someone.

@ayozebarrera
Copy link

You helped me @tc33133, thanks!

@jdoblas
Copy link

jdoblas commented Jun 29, 2017

Dear @tc33133 , what css file did you update?

@tc33133
Copy link

tc33133 commented Jun 29, 2017

I was using the hosted version, and I didn't update the stylesheet link.
IE I was using

running version 1.0.3, so I should have been using

If you follow the directions to use the hosted version here http://leafletjs.com/download.html you should be fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants