embed openstreetmap iframe in github markdown

iframe openstreetmap github-flavored-markdown
pseyfert picture pseyfert · Jan 23, 2018 · Viewed 7.9k times · Source

From the share tab on the openstreetmap page, I can export a map view as HTML e.g.:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=6.047544479370118%2C46.23053702499607%2C6.061706542968751%2C46.23821801159735&amp;layer=mapnik" style="border: 1px solid black"></iframe>
<br/><small><a href="https://www.openstreetmap.org/#map=17/46.23438/6.05463">View Larger Map</a></small>

I would like to embed this in a README.md page on github e.g.

Searching around, the closest to embedding iframes in markdown was the gitlab guide. Following which I tried the <figure class="video_container"> tag, but don't see that working either on gitlab or github.

# how to find us?

we will be here:
<figure class="video_container">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=6.047544479370118%2C46.23053702499607%2C6.061706542968751%2C46.23821801159735&amp;layer=mapnik" style="border: 1px solid black"></iframe>
</figure>

Am I missing something, or is this something better left to real HTML and beyond what markdown can/should do?

Answer

martin-martin picture martin-martin · Feb 10, 2019

Not supported in GFM

Embedding an <iframe> into GitHub-flavored Markdown (GFM) is not supported. Here's the official stance on it from their specs:

6.11 Disallowed Raw HTML (extension)

GFM enables the tagfilter extension, where the following HTML tags will be filtered when rendering HTML output:

<title> <textarea> <style> <xmp> <iframe> <noembed> <noframes> <script> <plaintext>

[...] These tags are chosen in particular as they change how HTML is interpreted in a way unique to them [...], and this is usually undesireable in the context of other rendered Markdown content.

All other HTML tags are left untouched.

Possible Work-around

Similar to solutions mentioned for videos in other answers, you could embed a screenshot of your map, and make it a link to the URL of your OSM map section:

detail of map section of Hanoi, Vietnam

Related questions

How to apply CSS to iframe?

I have a simple page that has some iframe sections (to display RSS links). How can I apply the same CSS format from the main page to the page displayed in the iframe?

Read More
Make iframe automatically adjust height according to the contents without using scrollbar?

For example: <iframe name="Stack" src="http://stackoverflow.com/" width="740" frameborder="0" scrolling="no" id="iframe"> ... </iframe> I want it to be able to adjust its height according to the contents inside it, without using scroll.

Read More
SecurityError: Blocked a frame with origin from accessing a cross-origin frame

I am loading an <iframe> in my HTML page and trying to access the elements within it using Javascript, but when I try to execute my code, I get the following error: SecurityError: Blocked a frame with origin "…

Read More