I’m trying to slowly convert my Obsidian notes to a Hugo website, and I’m playing around with the obsidian-leaflet blocks. I have made some exciting progress (exciting for me, at least) but I’m hitting a wall and I’m not sure what’s going on. I felt great success after following the mermaid usage instructions and would like to keep the roll going!
I’m using the ananke theme with some basic markdown files in the repository. In one of them is a markdown block with leaflet in the header right after the triple block quotes.
I’ve added a small layout snippet (unsure if this is the correct term) in a file layouts/_default/_markup/render-codeblock-leaflet.html
In the theme’s baseof.html file I’ve included the following template code:
{{ if .Store.Get "hasLeaflet" }}
<script src="/obsidian_leaflet.js"></script>
{{ end }}
and Finally, I’ve added a file static/obsidian_leaflet.js with the following code:
var parms = jsyaml.load(obsidian_leaflet_parms)
// pull the heihgt parameter out and modify the div
if ("height" in parms) {
document.getElementById("map").style.height = parms["height"]
}
console.log('t=r') //Testing to see if the change has registered
var map = L.map("map").setView([51.505, -0.09], 13);
The console logs any change I make, and the map seems to initialize… but its blank! I tried swapping CSS and Leaflet.js imports around (the leaflet quickstart guide makes a fuss over it ) as well as initializing the map from within the console.
Any tips, thoughts, or tricks would be very helpful!
I wouldn’t be too surprised if the fact that you put your script tags INSIDE of the div you are using for a map is the reason. move them out, after the div.
You’re on the right track with the render hook, but you’re missing a lot of pieces. Try this:
git clone --single-branch -b hugo-forum-topic-53298 https://github.com/jmooring/hugo-testing hugo-forum-topic-53298
cd hugo-forum-topic-53298
hugo server
Hey thanks for the comment. I tried making the div its own element with no benefit. Additionally tried moving it before/after the script elements but no effect.
This works, though I am trying to understand why this works and my version doesn’t. Mine gets the leaflet map to initially render (see photo), but the map just doesn’t show up.
As a note I’m trying to parse most of my data with javascript, but I see you are doing it with the Go templates. Is there a reason you prefer one vs another?
If you look at the render hook you’ll see that your version is missing a lot of things.
Yes. I can detect and handle errors when unmarshaling the YAML, set defaults, allow params to have aliases, etc. Also, why do something client-side when I can handle it during the build?
I don’t get why you say it is missing a lot of things; it was a silly mistake forgetting a tileLayer, sure, but otherwise it works? I will now work on parsing the YAML.
I do appreciate build vs. client side, that’s a good point