How can I add leaflet support to a HuGo-driven Website or to an Obsidian-publish Site?

[SpocWeb]

Scope

AFAICS the leaflet plugin only works in obsidian Desktop.
I would like to see the maps also rendered in a hosted Obsidian Web-Site.

Can you give me some hints how you would go about that?
Thanks!

Discovery

For now I would like to know how to go about it. If it seems feasible, I could try to implement it.

Validate

Obsidian Vault published with HuGo both locally on Windows and published to github.io:
https://spocwiki.github.io/quartz-fork/geo/Continent/North-America/Canada/

Currently it just renders the ```leaflet Block unchanged.

Any suggestions are welcome.

[valentine195]

Converting a plugin for use on a published website is a big task, especially if it interfaces with the file api.

You will have to:

1. Create a browser bundle of the code that includes the leafletjs code, as well as either remove or mock any file API calls
2. If you have any file-based markers, they will need to be cached and included in the js bundle or removed from the maps
3. watch for DOM changes to detect a code block decorated as leaflet
4. Inject the leaflet map and create the markers

I did this for admonitions, which is a simple HTML code block replacement, and it was still hard and didn’t work consistently or like the plugin.

You are welcome to try but I will not be able to offer support.

[SpocWeb]

Thank you for this estimation. I think I'll maybe try to write a preprocessor to run before the Hugo-Engine starts.
It doesn't have to be completely dynamic.
Best Regards and again: Thank you for this marvelous plugin!