Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
530 views
in Technique[技术] by (71.8m points)

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...