# calculating width in embedded Leaflet map

**URL:** <https://talk.observablehq.com/t/calculating-width-in-embedded-leaflet-map/2741>\
**Category:** Help\
**Created:** [January 14, 2020, 3:22am UTC](https://talk.observablehq.com/t/calculating-width-in-embedded-leaflet-map/2741 "2020-01-14T03:22:46Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [January 14, 2020, 7:15am UTC](https://talk.observablehq.com/t/calculating-width-in-embedded-leaflet-map/2741/2 "2020-01-14T07:15:06Z")

</div>

Sorry for not trying this earlier (and it doesn’t exactly answer my question), but:

if I change in the source notebook this style definition:

```auto
style: `width:${width}px;height:${width/1.6}px` })

```

to

```auto
style: `width:${800}px;height:${800/1.6}px` })

```

… then the map will render. It also will render if I start out the map cell by defining width explicitly as `let width = 800`. But in neither case does the map render responsively ☹

Also a bit confusing for me (and probably part of the issue) is that in the choropleth example, there is no defined `width` aside from the scale (unless it’s getting this from `viewBox`?). So is it not also getting the width from `window.innerWidth` as per the [standard library](https://github.com/observablehq/stdlib#width)?

Any insights?

* * *

I eventually found [this related discussion on overriding the standard library](https://talk.observablehq.com/t/embedded-width/), which resulted in Mike creating this demo:

> <https://gist.github.com/mbostock/e037a86ce69eb19f629eaebf70ebcd2e>

Mike’s resize pattern is very similar to Torben’s and results in the same error on ‘width’ when I try to update the code to fit the new embed pattern (the gist was returning the same `Uncaught TypeError: r is not iterable` error addressed [here](https://talk.observablehq.com/t/overcoming-r-is-not-iterable-with-new-runtime-or-another-mistake/2729)):

```auto
    <script type="module">
    // use static imports because top-level `await` isn’t yet supported in browsers
    import notebook from "https://api.observablehq.com/@tmcw/leaflet.js?v=3";
    // use a URL instead of a package reference because bare specifiers (like `@observablehq/runtime`) aren’t supported in browsers
    import { Runtime, Inspector, Library } from "https://unpkg.com/@observablehq/runtime@4/dist/runtime.js";

     const stdlib = new Library;

    const grandCentralMap = document.querySelector("#grandCentralMap");

    const library = Object.assign({}, stdlib, {width});

    function width() {
      return stdlib.Generators.observe(notify => {
        let width = notify(test.clientWidth);

        function resized() {
          let width1 = test.clientWidth;
          if (width1 !== width) notify(width = width1);
        }

        window.addEventListener("resize", resized);
        return () => window.removeEventListener("resize", resized);
      });
    }

function renderNotebook(notebook, cellNames) {
new Runtime(library).module(notebook, name => {
if (cellNames.includes(name)) {
  return new Inspector(document.querySelector(`#${name}`));
}
});
}

renderNotebook(notebook, ["grandCentralMap"])

</script>

```

* * *

I also remain a bit confused about what does and doesn’t carry-over into an embedded cell. CSS won’t carryover, as noted in [Jeremy’s primer on embedding](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks) (when I [learned to read it more carefully](https://talk.observablehq.com/t/embedding-leaflet-map-turns-wonky-requesting-help-to-diagnose/2728/2) thanks to @mootari ), but charts generated as the amalgams of multiple individual cells will render… except apparently when that cell is `width`?

* * *

Happy if someone can shed some light on what’s going on, and would greatly appreciate help in arriving at a responsive Leaflet map element. 🙏

---

_[View the full topic](https://talk.observablehq.com/t/calculating-width-in-embedded-leaflet-map/2741)._