3

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.

Improve this question

1 Answer 1

Reset to default
5

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/

Improve this answer
7
  • 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
    Commented Jul 23, 2015 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
    Commented Jul 23, 2015 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
    Commented Jul 24, 2015 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
    Commented Jul 24, 2015 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
    Commented Jul 24, 2015 at 11:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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