Interaktive Weltkarte mit Leaflet

Ich versuche ja gerade, meine Welten-Website basierend auf Obsidian.md, einem Markdown-Editor, neu aufzusetzen (aus dem ich dann html exportiere).

Es gibt ein leaflet-Map-Plugin für Obsidian, mit dem man eine "interaktive" Map dort einbinden kann. Also da kann man rein- und rauszoomen und Marker setzen, die wiederum bei Klick ein Popup über den markierten Ort anzeigen können. Schön. ABER: Das lässt sich nicht zu einer Website exportieren. Das Plugin funktioniert im Editor selbst ganz gut - also wer mit Obsidian arbeiten möchte und gar keine Website daraus generieren möchte, bitte sehr: https://github.com/javalent/obsidian-leaflet (findet man auch aus Obsidian heraus, wenn man dort nach "externen" Plugins sucht).

Ich habe dann versucht, stattdessen die Map nachträglich mit dem regulären leaflet.js in die exportierte html-Seite einzubinden. An sich funktioniert das ... theoretisch. Also ich habe sie zoombar und kann auch Marker setzen etc.

Leider wird das Script anscheinend erst nach Reload (sei es Refresh per F5 oder einem automatisierten Reload der Seite, wo ich aber nicht rausgefunden habe, wie ich das notfalls nur einmalig direkt beim Laden der Seite tun könnte, um auf hässliche Weise das Problem zu umgehen ...) der betreffenden Seite tatsächlich geladen. Vorher wird weder die Map, noch die Steuerelemente angezeigt. Und so ist das natürlich komplett unbrauchbar.

Da es nach Refresh ja funktioniert, habe ich leider überhaupt keine Idee, woran das liegen und wie ich es fixen könnte.

Auf Stackoverflow gibts ein paar Threads zu ähnlichen Themen, aber keiner der da genannten Ansätze funktioniert. Die beziehen sich natürlich auch alle nicht auf die Kombination mit einem aus Obsidian exportierten html-file, dessen Code sicher nicht so clean ist, wie er sein könnte. Also ich kann nur vermuten, dass irgendwas aus diesem Code dazwischenfunkt. Irgendwelche Pfade & Serversettings werden es ja wohl nicht sein, wenn es nach Reload funktioniert ...?

Testen tu ich das ganze übrigens via VSCode mit Five Server, also mit einem lokalen Webserver (sonst wird die exportierte html-Seite nicht korrekt dargestellt). Auf meinem Webspace verhält sich das genauso, es ist also eine zuverlässige Vorschau des Problems.

Kennt sich hier irgendwer noch mit aktueller Webentwicklung aus und hat ne Idee, wie ich so ein Problem lösen könnte? Leider zeigt Firefox mir in seinem Webentwickler-Tool keine Fehlermeldungen dazu an.

Ist hier im Forum eigentlich überhaupt noch jemand unterwegs, der sich mit Javascript bzw aktuellerem Web Development auskennt?

Hochgeladen ist es tatsächlich unter https://www.yrdanea.de/kompendium - Klick auf Kartenwerk > Weltkarte der Vergangenheit, um das Elend zu sehen. Dann Reload, um die Karte in Aktion zu sehen. Navigiert man von der Karte wieder woanders hin und dann wieder zurück zur Karte, ist es wieder kaputt.

Aktuell sind das einfach nur ein paar beispielhafte Obsidian-Notes, da ich mich gerade auf dieses Kartenproblem konzentriere. Separat funktionierte das Ding auch, nur halt nicht in genau dieser Umgebung zusammen mit den anderen Scripten.

Ein Script ist zB über 300 Zeilen groß und auf eine Zeile minified. Aber ich konnte nicht rausfinden, ob das der "Schuldige" ist. Oder ob mein Script einfach irgendwelche Eigenschaften braucht, um mit den anderen Sachen im Zusammenspiel auf Anhieb funktionieren zu können.

Aus dem generierten Mega-Bandwurm-Script (was nichts mit Leaflet zu tun hat) ergeben sich 33 Fehler oder so. Die habe ich bei mir lokal schon behoben, aber das hat keinen Effekt auf mein Problem.

Das ist schonmal interessant, das war mir nicht aufgefallen. Könnte ja evtl mal probieren, den Kram von vornherein da schon reinzuschreiben.

Eru

Weil ich faul bin: Könntest du mir die nachträglich per Script eingefügte Zeile mal hier als Text reinkopieren?

Danke sehr! Muss ich nach ... der Walpurgis-Aktion heut gleich ausprobieren.

Habs doch schon ausprobiert - schade, zu früh gefreut.

Wenn ich das obige einfüge, wird zwar die Karte auch direkt inklusive aller Bedienelemente richtig dargestellt, allerdings haben sie dann keine Funktion. Wenn ich also beispielsweise dann auf das + klicke, wird stattdessen die Seite neu geladen, und ich kann nicht mehr reinzoomen/innerhalb der Map scrollen. Hmmm.

Meine Hoffnung ist ja immer noch, hierfür endlich mal eine Lösung zu finden, die dann auch für andere Weltenbastler als technisches Template dienen kann, welches universell für verschiedene Welten nutzbar ist.

Klar, das kann nur für Leute interessant sein, die überhaupt irgendeine Form von Website betreiben. Aber ich denk mir halt - wenn sich das in diesem Obsidian-Rahmen zum Laufen bringen ließe, dann ginge das ja vielleicht auch in WordPress … und auf einer selbst gebastelten html-Seite natürlich sowieso.

Hm, sieht leider nicht danach aus. Evtl. bezieht sich das auch bloß auf Scripting innerhalb der App, aber es funktioniert nicht im Export (und der Quellcode sieht ganz übel aus).

Stattdessen bekomme ich beim Export eine nette Ansicht des Codes, den ich auch komfortabel kopieren kann ... hilft mir nur leider nicht.

Kann natürlich sein, dass ich es falsch benutze

edit: Hm nee, selbes Problem - die gehen alle davon aus, dass man das innerhalb der Obsidian App nutzen möchte.

Hm nee ... tut wirklich nichts. Das ist ein Screenshot von dem, was exportiert wird und was ich im Browser sehe. Einfach nur Text, der so wie ich ihn geschrieben habe (und wie es auch in der app schon zu sehen war) ins Layout integriert wird.

Wenn ich wiederum das wieder in die bereits exportierte Seite schreibe, funktioniert das - aber halt natürlich auch wie gewohnt erst nach Page Reload.