Search code examples
iframeopenstreetmapgithub-flavored-markdown

embed openstreetmap iframe in github markdown


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?


Solution

  • 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