embedding Leaflet map turns wonky | requesting help to diagnose

Community Help
1

I have created a map that I now wish to embed in an HTML webpage.

Following Jeremy’s primer on embedding a notebook, I can get the whole page to render out beautify as follows:

<!DOCTYPE html>
<body>
<script type="module">

// Load the Observable runtime and inspector.
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";

// Your notebook, compiled as an ES module.
import notebook from "https://api.observablehq.com/d/310b9c62aec0e434@462.js?v=3";

// Load the notebook, observing its cells with a default Inspector
// that simply renders the value of each cell into the provided DOM node.
new Runtime().module(notebook, Inspector.into(document.body));

</script>

Here’s a snapshot:

image
image1159×861 461 KB

When I try, however, to render out only the map cell, things go haywire:

<!DOCTYPE html>
<body>
  <div id="map"></div>
<script type="module">

// Load the Observable runtime and inspector.
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";

// Your notebook, compiled as an ES module.
import notebook from "https://api.observablehq.com/d/310b9c62aec0e434@462.js?v=3";

// Load the notebook, observing its cells with a default Inspector
// that simply renders the value of each cell into the provided DOM node.
new Runtime().module(notebook, name => {
  if (name === "map") {
    return new Inspector(document.querySelector("#map"));
  }
});

</script>

Specifically, tiles don’t load in, I can’t see the layer toggle, etc.

Here’s a snapshot:

image
image1159×839 119 KB

The console gives me some warnings about cookies from wikimedia.org and CORS, as well as a message that Node cannot be found in the current page., but no errors.

Any insights into why I can’t properly render the cell and how to correct for it?

2

Note: I get the same buggy behavior when using the auto-generated embed code. Also, the same thing happens when I try using the auto-generated code from Tom’s leaflet example.

3

That’s because the Leaflet styles are missing (in Tom’s example they get embedded globally as <link> element in a separate cell).

Add the following to your embed code:

<link href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" rel="stylesheet">
1 Like
4

Awesome! Simple as that. Thank you Fabian!