Add leaflet.js Map to markdown post

support
1

Hi!!

I would like to insert a leaflet.js map in a markdown. I did that:

  1. Add a place holder for the map sourcing my html file
<iframe src="map.html" width="750" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0">
</iframe>
{{< /rawhtml >}}```

2) the leaflet tile appears but my markers and all the javascript embed in **map.html** doesn't appear.

Thanks in advance for your help. I search the best solution to insert pieces of html/js in my markdown posts
2

Hi @fxchalet, I think there’s some code that isn’t in your post. Can you please give a bit more context to the snippet you’ve posted, or even better, share the full source of your project so we can help.

I maintain a theme which has a partial/shortcode which displays maps using leaflet. I think it’s a different approach from what you’re doing, but maybe having a look at its code may help.

3

Hi @funkydan2 ! Thanks for your help

To be more clear in my MD, I wrote:

{{< rawhtml >}}
<iframe src="/Welcome/map.html" width="750" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0">
</iframe>
{{< /rawhtml >}}

/Welcome/map.html is a folder in my static folder.
In the welcome folder, I have my html file “map.html”, my css file “map.css” and my images.
Finally, it managed to work and my leaflet map appeared but the style was static. Markers were to big and changing the css didn’t solve it. It seems that the css file had no influence.
I would like to share all the files (MD, map.html, map.css, img) but dropbox or Weshare seem more easy to do it.
In general I am super interested in learning how to integrate Leaflet.js, D3.js, Plotly projects (multiple js, html, css files) in Hugo posts MD. I am not clear on the hugo shortcodes ability to do such things.

I checked your theme looks great. How do you manage the style of your leaflet map, marker size and so on?

4

I’m not sure if this really a Hugo problem. It’s probably more to do with using leaflet.js itself.

That theme displays the map using JavaScript. I think I chose that over the iframe method to allow the site to be more responsive.

The partial which displays the map is https://github.com/funkydan2/alpha-church/blob/master/layouts/partials/map.html