I use Leaflet to display some map. I would like the user to be able to resize the map by dragging its borders as she likes. I would like to do this without additional Javascript libraries, instead by using the CSS resize property: https://developer.mozilla.org/en/docs/Web/CSS/resize .

For this, I added resize:both;overflow:auto; to my div#map. It now has some ugly scrollbars (a problem for later) and I can resize it by dragging the corners.

How can I make Leaflet recognise the changed size of the div now and make it update the map contents accordingly (fetch tiles, fire some event so I can request some POIs via AJAX)?

https://stackoverflow.com/questions/24412325/resizing-a-leaflet-map-on-container-resize has some hints but I am too dumb with Javascript to apply them.


Outside of polling for size changes, there isn't a way to detect a resize of a <div>.

I usually use absolute positioning on the map container and let Leaflet handle resize automatically. Like this: http://jsfiddle.net/asnyder14/0gsfdxeg/

  • Thanks! I tried implementing it but failed to get my code to work like your example, like before, the map outside the previously extends is grey. Can you show me an example with the map div inside a parent div? My map is not filling the whole window so I have to wrap it for absolute positioning. I updated the fiddle: jsfiddle.net/0gsfdxeg/5 – bugmenot123 Jul 23 '15 at 9:19
  • I don't believe it will work if any of the parent divs have relative positioning. It has to be absolute to the document/window because that is where resize events are fired. – adam Jul 23 '15 at 13:21
  • As it behaves the same if I set the parent div to absolute I guess there is no way to have a div inside another div for this? – bugmenot123 Jul 24 '15 at 9:22
  • Are you still wanting to use the resize: both? That will not work without some javascript. You have to have absolute positioning all the way up the tree to the document for this to work. Here is a div in a div: jsfiddle.net/asnyder14/0gsfdxeg/8 – adam Jul 24 '15 at 10:03
  • I would not know how to let the user resize the map without that. She is not supposed to need to resize the browser window (that would complicate other things as well) – bugmenot123 Jul 24 '15 at 11:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.