🏠 back to Observable

propagate resize event to cell content (e.g. a leaflet map) instead of recalculating the cell

Community Help
#1

I have a leaflet map content defined in a cell with some interactive markers.

And every time when browser window (or cell itself?) get resized (or get fullscreen), the cell will be calculated again and map will be reset. It is not so ideal if I was just playing some map markers and switched back and forth from fullscreen mode.

Is it possible to prevent cell recalculation on resize event? and is it also possible to propagate the resize event to leaflet map content in order to update map accordingly?

#2

It’s always easier to answer questions when there’s a link to a shared notebook. Having said that, the logical guess is that your map depends on the built-in, dynamic variable width. Thus, every time the value of width changes (like when your browser window resizes), the map is regenerated.

The solution is to remove that dependency. The easiest way to do that is to set width=700, or whatever width you want. Alternatively, you can always make your map width depend on window.innerWidth. Here’s an example where I do that:

In that situation, I want the map to fit into the window properly on load, but I don’t really want it to auto-resize, since redrawing is rather expensive.

If you want finer control, so that the map resizes in some situations but not others, you might need to respond to window.onresize in the HTML file where your map is embedded.

1 Like
#3

@mcmcclur you are right, I forgot the very basic idea of Observable and the width was exactly the trigger.

update:
at the end I used .parentElement.offsetWidth; and windows.onresize
here is the example My Map / Cas Perl / Observable

1 Like