calculating width in embedded Leaflet map

Community Help
2

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:

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

to

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 :frowning:

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?

Any insights?

I eventually found this related discussion on overriding the standard library, which resulted in Mike creating this demo:

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):

    <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 (when I learned to read it more carefully 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. :pray: