Question

I would like to create a map with some pins on it (using leaflet). When the user clicks on one of them, the map should move until the pin is at the bottom of the map in the horizontal center.

My map is 400 pixels hight, so I’m using this code:

map.panTo(new L.LatLng(lat, lng));
map.panBy(new L.Point(0, -200));

It’s working like a charm – only the IE has some problems with it: It starts to move towards the center of the map (panTo), but as soon as it stats to move towards the bottom as well (panBy) it stops to perform the moving towards the center.

How can I combine these two movements? I can’t wait until panTo has centered the map, because this would cause the map to jump up and down if the pin is in the lower half of the map.

Answer 1

From the leaflet docs, you can get the lat/long point as pixels using:

latLngToPoint( <LatLng> latlng, <Number> zoom )

modify that, then convert it back to lat/long with:

pointToLatLng( <Point> point, <Number> zoom )

source: http://leaflet.cloudmade.com/reference.html#icrs