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} …

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">

embedding Leaflet map turns wonky | requesting help to diagnose

Community Help

aaronkyle January 9, 2020, 12:57pm 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.

calculating width in embedded Leaflet map

Topic		Replies	Views
Embed Showing Observable Cells? Community Help	4	814	January 16, 2020
Can't embed live version of notebook	2	445	September 19, 2019
trouble embedding cells into HTML page Community Help	6	1438	August 16, 2019
Leaflet and JSON: Understanding differences between Observable and standard JS Community Help	9	1929	September 14, 2018
Embedded notebook lacks interactive controls	2	575	May 24, 2018

embedding Leaflet map turns wonky | requesting help to diagnose

Related topics