Leaflet broken after print preview in Chrome and Firefox

Question

This applies only to Chrome and FireFox

I have angular project that displays map using leaflet. Workflow is simple:

1. Show map
2. Hide map and show some other info
3. Select Print (which brings 'print preview')
4. Show map again - it will be broken

Here's jsFiddle exmaple: http://jsfiddle.net/fRe3f/

no code needed

In case this helps somebody (tested in Chrome): I attached bunch of events to see what happens with the map (http://jsfiddle.net/cxZRM/).

(When you zoom/move the map I see moveStart, move, moveEnd events triggering in that order.)

When the map is visible and you print, no events trigger (leaflet doesn't get broken). When the map is not visible and you print, there's no moveStart event logged, then only move and moveEnd are triggered. Also, break point in move event looking at call stack shows that leafLet was calling invalidateSize method).

Thanks for helping!

Answer 1

If you simply re-size browser it will get fixed automagically :-) But this is not the fix

I was able to incorporate in my logic to call invalidateSize() (https://github.com/Leaflet/Leaflet/issues/2826) which fixed the map (actually, I had to call with a setTimeout(function(){map.invalidateSize();},100) - I think angular was "choking" it a bit and I needed setTimeout because of angular).

Hope this helps somebody...