# embedding Leaflet map turns wonky | requesting help to diagnose

**URL:** <https://talk.observablehq.com/t/embedding-leaflet-map-turns-wonky-requesting-help-to-diagnose/2728>\
**Category:** Help\
**Created:** [January 9, 2020, 10:25am UTC](https://talk.observablehq.com/t/embedding-leaflet-map-turns-wonky-requesting-help-to-diagnose/2728 "2020-01-09T10:25:07Z")\
**Posts on this page:** 4\
**Page:** 1

<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 9, 2020, 10:25am UTC](https://talk.observablehq.com/t/embedding-leaflet-map-turns-wonky-requesting-help-to-diagnose/2728/1 "2020-01-09T10:25:07Z")

</div>

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

Following Jeremy’s [primer on embedding a notebook](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks), I can get the whole page to render out beautify as follows:

```auto
<!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](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/3/3cc8741a9e3fa2808ab6c580c8046d11b88a41c7.jpeg)

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

```auto
<!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](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/3/375905260107223ad51ac3fc87305b62632158a5.png)

The console gives me some warnings about cookies from [wikimedia.org](http://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?

---

<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 9, 2020, 12:57pm UTC](https://talk.observablehq.com/t/embedding-leaflet-map-turns-wonky-requesting-help-to-diagnose/2728/2 "2020-01-09T12:57:57Z")

</div>

Note: I get the same buggy behavior when using the [auto-generated embed code](https://talk.observablehq.com/t/easier-embedding/2382). Also, the same thing happens when I try using the auto-generated code from Tom’s [leaflet example](https://observablehq.com/@tmcw/leaflet).

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [January 9, 2020, 1:32pm UTC](https://talk.observablehq.com/t/embedding-leaflet-map-turns-wonky-requesting-help-to-diagnose/2728/3 "2020-01-09T13:32:34Z")

</div>

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:

```auto
<link href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" rel="stylesheet">

```

---

<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 9, 2020, 1:45pm UTC](https://talk.observablehq.com/t/embedding-leaflet-map-turns-wonky-requesting-help-to-diagnose/2728/4 "2020-01-09T13:45:45Z")

</div>

Awesome! Simple as that. Thank you Fabian!
