CODEWITHSUNDEEP
htmld3.jsleaflethugohugo-shortcode
François-Xavier Chalet
François-Xavier Chalet

Reputation: 1

How do I insert an html leafletmap into a blog post (hugo website)?

I created a leaflet map in R that I exported in the static folder of my website.

What chunk of code (shortcode) should I use to insert the html map into one of my blog posts?

I already tried <iframe seamless src="/static/leaflet/leafmap.html" width="100%" height="500"></iframe> but nothing shows up

By the way, I would like to learn more about html and css coding to manage my Hugo website (not at the point of building my own website from scratch), do you have any recommendation of books or methods ? Same I like data vizualization and D3 js looks a nice tool to have, how can I learn it pedagogically?

Thanks for your answers:)

Upvotes: 0

Views: 768

Answers (1)

tastatham
tastatham

Reputation: 90

When building the site, Hugo converts the "leafMap.html" to "leafMap/index.html". Therefore, you simply need to change the following from;

<iframe seamless src="/static/leaflet/leafmap.html" width="100%" height="500"></iframe>

to

<iframe seamless src="/static/leaflet/index.html" width="100%" height="500"></iframe>

This is supported by the following blog post: https://waterdata.usgs.gov/blog/leaflet/

Please mark this is the given answer if this solves your problem.

Upvotes: 3

Related Questions