Embedded Notebook requires CSS, while Observable Hosted Notebook Did Not

Community Help
1

Issue — Mapbox CSS elements don’t appear in Embedded Notebook, unless explicit call made to link Mapbox CSS in embed. Mapbox CSS elements work fine in Observable Notebook.

I have a workaround in the HTML that wraps the Embedded Notebook, I simply include the same link to the Mapbox CSS that is already in the Observable cell. It feels like I’m doing something wrong in the Observable Notebook which is forcing me to include the Mapbox CSS a second time.

Background

I have a Notebook that uses Mapbox GL JS, which I’m now trying to port to an Embedded Notebook. Following the lead from @jashkenas and notes on how to embed, https://beta.observablehq.com/@jashkenas/downloading-and-embedding-notebooks.

The Observable Notebook has a cell that includes Mapbox CSS, and everything works fine. But the Embedded Notebook does not show the Mapbox CSS elements (such as Mapbox logo, Full Screen & Zoom controls), unless an explicit call is made.

Observable Notebook

index-no-mapbox-css.html

index.html

2 Likes
2

Hi Rob,

The issue here is:

  • When you embed a notebook, you explicitly choose which cells to output on the page and where they go.
  • This notebook outputs the map cell, but it doesn’t output the CSS cell.

So, the CSS doesn’t get included. Here’s a fixed example, that refers to a fork of your notebook that names the CSS cell, so that we can map it to a DOM element.

2 Likes
3

Thank you for quick reply and support. I now see that you updated the notebook to output the CSS cell. I did not explicitly include the CSS in the embed.

const notebookCellsToRender = {
  "mapContainer": "#mapContainer",
  "mapboxCss": "#mapboxCss"
};

I also needed to include a <div> for the mapboxCss.

  <div class="wrapper">
    <div id="mapContainer"></div>
    <div id="mapboxCss"></div>
  </div>

Problem solved. Thanks!