Resizing a leaflet map on container resize

Question

I have a <div> containing a leaflet map. Upon certain events the height of the <div> will be altered. I'd like for the map to resize to the new dimensions of its surrounding <div> so that the old center is centered in the resized smaller or larger map. I tried using the invalidateSize() function, but it doesn't seem to work at all. How can I resize and center the map after that map-container-resize event?

$mapContainer.on('map-container-resize', function () {
   map.invalidateSize(); // doesn't seem to do anything
});

Edit to give more context:

The map container is styled initially as

#map-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    transition: height 0.5s ease-in-out;
}

After a user clicks a certain button, another panel shows at the bottom of the page and the map-container's height will be reduced to something less than 100% (say 80%).

Upon click on this button, the map-container-resize event is triggered so that I can make the map resize and center on its old (i.e. before the resizing happened) center. The map itself should then also be resized to 80% of its initial height.

The APi doc for invalidateSize seemed to be what I wanted:

"Checks if the map container size changed and updates the map if so [...]"

But having a look with the output of the getSize function before and after the call to invalidateSize, nothing is different, the map remains at its old size.

This needs more context. Are you actually firing a `map-container-resize` event? How is the map sized in CSS? — tmcw, Jun 25 '14 at 22:13
`on('resize')` only applies to WINDOW resizing, and `map-container-resize` does not exist. so what was the actual event here? — phil294, Aug 01 '16 at 13:49

score 106 · Accepted Answer · edited Mar 22 '16 at 14:24

106

The problem is that the resizing of the #map-container div is done via a css transition. The transition hasn't started yet, let alone ended, when the call to invalidateSize happens so the leaflet map cannot recognize any change of dimensions of its surrounding div.

Triggering the map-container-resize event with a delay solved the problem. This way :

setTimeout(function(){ map.invalidateSize()}, 400);

edited Mar 22 '16 at 14:24

Igor Beaufils

848
2
12
29

answered Jul 02 '14 at 09:20

Sandra

3,560
5
24
31

2

working example: [https://stackoverflow.com/a/29787856/2471632](https://stackoverflow.com/a/29787856/2471632) – Barbarossa Aug 23 '19 at 02:24
3

A better solution might be to listen for [the `transitionend` event](https://kapeli.com/dash_share?docset_file=JavaScript&docset_name=JavaScript&path=developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event.html&platform=javascript&repo=Main&source=developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event). – diachedelic Feb 03 '22 at 04:47

score 22 · Answer 2 · answered Aug 08 '20 at 18:46

I came across this question today and wanted to provide an updated answer based on 2020 Browser API. This example uses the Browser's ResizeObserver to monitor the size of the div that Leaflet is mounted too. Assuming the following HTML Snippet:

<div id="map" />

With the following JavaScript:

const mapDiv = document.getElementById("map");
const map = L.map(mapDiv).setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

const resizeObserver = new ResizeObserver(() => {
  map.invalidateSize();
});

resizeObserver.observe(mapDiv);

This should monitor the map div, and call the invalidateSize() method on the Leaflet map when the map div size changes. This approach allows you to handle the resizing "closer" to the map code, rather than trying to rely on window resize events or listening for changes triggered elsewhere in the application.

Obviously the CSS for the map div itself will need to ensure that it resizes in whatever way you want it to. This code snippet will ensure the Leaflet is appropriately updated when that happens.

this answer was Very helpful with some edition on angular 8 or above const resizeObserver = new (window as any).ResizeObserver(() => { map.invalidateSize(); }); resizeObserver.observe(mapDiv); — taha mosaad, Dec 06 '21 at 14:19
perfect answer! saved me a huge headache! Leaflet centering seems good even I transition it's size with grid columns. — Benny Jobigan, Mar 20 '23 at 10:00
This answer worked perfectly for me as well! I had Leaflet in a flex container containing the map and a toolbar. Before this fix, the leaflet center would be totally off whenever the toolbar changed size. Now it correctly stays centered! Thanks for this — UrbenLegend, Apr 08 '23 at 00:25

score 20 · Answer 3 · answered Jun 26 '14 at 11:54

20

L.Map.invalidateSize() only informs leaflet map object that its container size has been changed, and therefore is should draw less or more map tiles. It does not actually change any dimensions, e.g. of its containing <div>, and does not move the map. You should do it yourself.

answered Jun 26 '14 at 11:54

Ilja Zverev

954
4
9

This should be the best answer ! Thanks – eightball Aug 29 '19 at 15:46
It does move the map – Hayden Thring Jun 24 '21 at 02:50

Mahdi Bashirpour · Answer 4 · 2021-05-11T22:39:58.457

13

You can use below code after resize that

map.invalidateSize()

https://github.com/Leaflet/Leaflet/issues/690

edited May 11 '21 at 22:39

answered Dec 18 '18 at 16:07

Mahdi Bashirpour

17,147
12
117
144

score 7 · Answer 5 · answered Mar 31 '21 at 18:17

7

Just call resize window event rather than timing the map to load.

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

window.dispatchEvent(new Event('resize'));  


// Triggers a window resize 
// Thus your map automatically triggers invalidateSize().

answered Mar 31 '21 at 18:17

Srinadh

386
4
11

This solution is really clean and is working great for me so far, are there any drawbacks to this approach? – Grant Humphries Apr 23 '21 at 23:26
Yes. Say in future if you want to detect real window resize events at the main application level. Above process will create one false signal. That is during it’s time of initiation or depending on how many times you are calling the above process. – Srinadh Apr 25 '21 at 00:08
Thank you! This solved my problem using ionic 7 inside a tab component – Doug Apr 01 '23 at 19:34

score 6 · Answer 6 · edited May 23 '17 at 12:26

6

the accepted answer is a bit hacky in that it relies on the sleep being longer than the transition.

I have found this to work well:

$("body").on($.support.transition.end, '#main-navbar .nav-collapse', function(event){    
    console.log("end of the animation");
});

edited May 23 '17 at 12:26

Community

1
1

answered Nov 04 '16 at 19:55

more urgent jest

362
4
11

3

Note that [`jQuery.support` is deprecated](http://api.jquery.com/jquery.support/). – sameers May 16 '17 at 00:47

score 1 · Answer 7 · edited Sep 03 '17 at 22:20

1

Ran into this problem running VueJS, Leaflet 1.2.0. The resizing didn't appear complete as others mentioned above. My solution within VueJS was to call the nextTick function:

  var vm = this
  var container = vm.$refs.container
  vm.mapStyle.width = `${vm.getElementContentWidth(container)}px`
  vm.mapStyle.height = `${vm.getElementContentHeight(container)}px`
  vm.$nextTick(() => {
    if (vm.map) vm.map.invalidateSize()
    if (vm.layerBase) vm.layerBase.redraw()
  })

I believe pure javascript would be

edited Sep 03 '17 at 22:20

Vega

27,856
27
95
103

answered Sep 03 '17 at 21:55

Disarticulate

21
4

Thanks the nextTick with invalidateSize solved my issue ! – Dan Jul 09 '19 at 13:39

Resizing a leaflet map on container resize

7 Answers7

Linked