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 bine 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.

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 bine 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.

• javascript
• leaflet

• 1 Adjust the lat/lng value to include the translation? This might be overplicated though; you'd have to calculate the resultant value based on the current zoom setting of the widget. – Shmiddty Commented Sep 17, 2012 at 16:51
• This sounds very plicated to me. Do you know a page with an example? – Christopher Commented Sep 17, 2012 at 16:53
• 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: leaflet.cloudmade./reference.html#icrs – Shmiddty Commented Sep 17, 2012 at 17:03
• Shmiddty, this was the solution! Could you please write your hint as an answer? I would like to mark it as accepted. – Christopher Commented Sep 20, 2012 at 16:42

2 Answers 2

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./reference.html#icrs

You could also use these two functions, that you can call directly on your map object:

// get your coordinates from marker or map.getCenter() or something else
let pixelPosition = map.latLngToLayerPoint(coord);
// edit pixel coordinates in pixelPosition object
let latLng = map.layerPointToLatLng(point);
map.setView(latLng);