My goal:
I exported some html notes from Obsidian.md (based on this: https://github.com/KosmosisDire/obsidian-webpage-export) and am now trying to include a fictional worldmap based on the leaflet.js script (not using the leaflet Plugin for Obsidian, since this didn’t work for me in the export).

My problem:
The map works fine when I reload the page, showing the typical leaflet zoom UI as well. But when first opening the page or navigating there from another note in the hierarchy, the map and UI are gone.

I looked on stackoverflow for similar questions and already tried solutions not only for leaflet but also for other problems with scripts not executing without a refresh/reload of the page. But nothing helped.

I included the script in a simpler html and played around with a link to another page and returning to the one with the map – it worked. So I guess it’s a problem with something the other scripts in the document do (there is some ajax and pixy included which I can’t remove since it’s needed for a graphview navigation which is part of Obsidian).

I’m testing everything locally with the help of VS Code and Five Server as local webserver. There are no errors in my code (I fixed some errors caused by the generated export from Obsidian). The same problem is visible when I upload it to my webspace or try it with different browsers.

Hoping that someone here can help me, since I’m pretty sure that others who would like to have such an interactive worldmap combined with an Obsidian based page as well might stumble on this problem as well and hopefully also find the solution for this here some day.

What i tried so far:
I searched on stackoverflow for solutions.
I tried using cache, defer, preload and placing the link to the script and the script (and css) itself into different places in the html file and different folders.
I tried removing other scripts in the html file to see if it helps.

But all of this didn’t change the behaviour, only caused more errors and problems on the page (or with the leaflet UI).

So far, I haven’t found any solution that helped me. I don’t get any error message, so there is nothing I can post here unfortunately.

And yes, I am no programmer/web dev, so unfortunately I am currently not able to come up with any more elaborate solutions. I was just looking for a way to present my writing/content in a nice way.

This is my map script itself:

<script> 
// Using leaflet.js to pan and zoom a big image. 
           const map = L.map('image-map', {
             minZoom: 1,
             maxZoom: 4,
             center: [0, 0],
             zoom: 1,
             maxBoundsViscosity: 1,
             crs: L.CRS.Simple
           });
           var image= L.imageOverlay("I removed the name of my asset here, but using a webp which works", [[0,0],[240,330]]); //initial size at zoom 1 )
           image.addTo(map);
// tell leaflet that the map is exactly as big as the image
map.setMaxBounds(new L.LatLngBounds([0,0], [240,330]));  // prevent panning outside the image area.
    //Note the viscosity setting keeps the image from being dragged outside this 
</script>