Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

embed openstreetmap iframe in github markdown

Tags:

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?

like image 775
pseyfert Avatar asked Jan 23 '18 13:01

pseyfert


People also ask

Can you embed iframe in markdown?

An <iframe> is just an HTML tag, and Markdown supports inline HTML. You should be able to just use it.

How do I embed a map in markdown?

Go to google maps, search your location, go to 'share' and copy the embed link; paste it into your markdown file and voila!

Can I use HTML in GitHub markdown?

Wherever HTML is rendered on GitHub (gists, README files in repos, comments on issues and pull requests, ...) you can use any of the HTML elements that GitHub Flavored Markdown (GFM) provides syntactic sugar for.


1 Answers

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

like image 74
martin-martin Avatar answered Sep 21 '22 16:09

martin-martin