CODEWITHSUNDEEP
leaflet
user310988
user310988

Reputation:

When resizing a leaflet map how can I keep the map centered?

I'm using leaftlet to create a map on a web page.

On the left hand side of the map is a panel that slides out.

When the panel slides out the map is resized to fill the remaining space on the page.

As the panel slides out to the left map resizes the centre point moves to the left.

Ideally the centre point of the map should remain in the relative centre.

Dodgy ASCII representation: (The '.' represents the initial centre point of the map.)

Panel closed:          [][    .    ]

Panel open (current):  [  ][     . ]

Panel open (desired):  [  ][   .   ]

And here's a jsFiddle that reproduces the issue.

Upvotes: 7

Views: 9730

Answers (2)

lee penkman
lee penkman

Reputation: 1238

I solved this by calling $(window).resize() after the leaflet map size changes

Update: Looks like you need to call map.invalidateSize() instead

Updated fiddle http://jsfiddle.net/YwbLg/11/ (animation isn't pretty)

Upvotes: 12

sfletche
sfletche

Reputation: 49704

Looking at your JSFiddle, if you Inspect Element (right click option on Chrome) on the DIV that holds the map, #map-containerDiv, you'll see that when the options DIV, #mapOptions, slides right, the map div is actually pushed to the right and not resized.

In other words, the center point of the map is not actually changing.
The map div is just sliding to the right, and the right side of the div becomes hidden.

Upvotes: 0

Related Questions