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.
Best Answer
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/