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

**URL:** https://talk.observablehq.com/t/propagate-resize-event-to-cell-content-e-g-a-leaflet-map-instead-of-recalculating-the-cell/4700
**Category:** Help
**Created:** [February 24, 2021, 10:28am UTC](https://talk.observablehq.com/t/propagate-resize-event-to-cell-content-e-g-a-leaflet-map-instead-of-recalculating-the-cell/4700 "2021-02-24T10:28:48Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![easz](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/easz/32/4446_2.png) [@easz](https://talk.observablehq.com/u/easz)
#### Post date: [February 24, 2021, 10:28am UTC](https://talk.observablehq.com/t/propagate-resize-event-to-cell-content-e-g-a-leaflet-map-instead-of-recalculating-the-cell/4700/1 "2021-02-24T10:28:48Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)
#### Post date: [February 24, 2021, 12:14pm UTC](https://talk.observablehq.com/t/propagate-resize-event-to-cell-content-e-g-a-leaflet-map-instead-of-recalculating-the-cell/4700/2 "2021-02-24T12:14:03Z")

</div>

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:

> **[Canadian Elections 3D](https://observablehq.com/@mcmcclur/canadian-elections-3d)**
>
> The 3D map below illustrates relative dominance of the major political parties in each Canadian province. You can select the party you're interested in using the radio buttons below the map. The height of each region is proportional to percentage of...

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.

---

<div class="post-metadata">

### Author: ![easz](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/easz/32/4446_2.png) [@easz](https://talk.observablehq.com/u/easz)
#### Post date: [February 24, 2021, 4:46pm UTC](https://talk.observablehq.com/t/propagate-resize-event-to-cell-content-e-g-a-leaflet-map-instead-of-recalculating-the-cell/4700/3 "2021-02-24T16:46:01Z")

</div>

@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](https://observablehq.com/@easz/my-map)
