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

mouse zoom doesn't preserve mouse location #3737

Open
Sumbera opened this Issue Aug 11, 2015 · 6 comments

Comments

Projects
None yet
3 participants
@Sumbera

Sumbera commented Aug 11, 2015

While I am doing some experimental SVG rendering I found that leaflet doesn't preserve same location of mouse pointer when I zoom in/out with mouse. It is easy to reproduce:

  1. zoom deep in
  2. move mouse for example to the center of your map, or where is your POI
    (or go to http://leafletjs.com/ and move your mouse on the markup there.)
  3. do not move mouse, only scroll far out and then back in
  4. you will arrive back somewhere else (shifted) than before

would be great to preserve mouse location when zooming as for example google maps or OL 2.x do.

@IvanSanchez

This comment has been minimized.

Member

IvanSanchez commented Aug 11, 2015

Right now Leaflet uses the map center as a reference. Making that variable (and coincidental with the mouse pointer) might be nice, but I'm afraid that it requires a lot of refactoring to do. Big refactors = not something we want this close to 1.0.

@IvanSanchez IvanSanchez added the feature label Aug 11, 2015

@IvanSanchez IvanSanchez added this to the future milestone Aug 11, 2015

@Sumbera

This comment has been minimized.

Sumbera commented Aug 12, 2015

thanks for response, FYI, in in Map.js I have removed rounding in two conversion functions to get it work correctly:

latLngToLayerPoint: function (latlng) { // (LatLng)
    var projectedPoint = this.project(L.latLng(latlng)); // -- SSU removed  ._round();
        return projectedPoint._subtract(this.getPixelOrigin());
    }, 

_getNewPixelOrigin: function (center, zoom) {
        var viewHalf = this.getSize()._divideBy(2);
        return this.project(center, zoom)._subtract(viewHalf)._add(this._getMapPanePos());// --  SSU removed ._round();
    },

please re-consider to fix this for 1.0, if possible.

@IvanSanchez

This comment has been minimized.

Member

IvanSanchez commented Aug 12, 2015

@Sumbera Wow, I didn't expect such a concise solution (somehow I was expecting floating point arithmetic to be the culprit). Could you please make a pull request for that?

I guess that the round() is there for some reason, maybe setting integer CSS offsets in IE8. Probably will need some testing.

@mourner

This comment has been minimized.

Member

mourner commented Aug 12, 2015

The round is there because we need to position stuff on round coordinates, otherwise map will get blurry in many browser/device combinations. And yeah, they may break in legacy browsers.

@IvanSanchez

This comment has been minimized.

Member

IvanSanchez commented Aug 12, 2015

Moving the round() to DomUtil.setTransform and DomUtil.setPosition might just do the trick.

@Sumbera

This comment has been minimized.

Sumbera commented Aug 13, 2015

I have put sample of what I am doing with SVG here:
http://bl.ocks.org/Sumbera/7e8e57368175a1433791
without monkey patching above two functions I wouldn't be able to get this aligned with base map. SVG has only initial view-coord translations from LatLong and from there performs relative transforms based on the map position (scale, translate).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment