Leaflet.js refusing to render

Hey All,

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

<div id="map" class="leaflet" style="height: 200px">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
  <link
    rel="stylesheet"
    href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
    crossorigin=""
  />
  <script
    src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
    crossorigin=""
  ></script>
  <script>
    let obsidian_leaflet_parms = {{- .Inner | htmlEscape | safeHTML }}
  </script>
</div>
{{ .Page.Store.Set "hasLeaflet" true }}

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 haven’t read your whole post…but I maintain a theme that has an option to use OpenStreetMaps via Leaflet.js.

The partial it uses is here: alpha-church/layouts/partials/map.html at master · funkydan2/alpha-church · GitHub

It may point you in the right direction.

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.

<div id="map-container"></div>
<script src="your scripts">

Further: with script issues you should open your browsers console and look for error messages and let us know those.

1 Like

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

Files of interest:

  • layouts/_default/_markup/render-codeblock-leaflet.html
  • layouts/_default/baseof.html (lines 9-13)
  • content/_index.md (example)

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?

…wow. It’s because I didn’t add a tile layer. Adding this to my obsidian_leaflet.js

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

and I get an actual map!

Well, thanks y’all for watching me make a very silly mistake!

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?

1 Like

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

tile layer, scale control, marker

Do what works best for you. I just wanted a clean, working example for anyone else who searches for “leaflet” on this forum.

I appreciate the help!

Slightly off topic, as I understand that you might not want to drag React into the mix, but there’s a Leaflet shortcode built with Hugo here:

Demo site:

https://hugojsbatchdemo.netlify.app/leaflet/