Interaktive Weltkarte mit Leaflet

Yrda · 1. Mai 2024

Hehe klassisch. Ja das mit dem iframe kann ich mal noch probieren, interessante Idee.

Eine andere Idee, die mir grad noch kam, war, bei Klick auf einen der Links in der Hierarchie gleichzeitig auch einen reload zu erzwingen. Aber da kenn ich mich zu wenig mit Javascript um a) zu wissen, ob das ginge, und b) wie ich das integriere, dass gleichzeitig das gewünschte Ziel (Unterseite) angesteuert, aber auch neu geladen wird.

edit: ich hab jetzt einfach die Seite selbst nochmal in den iFrame eingebunden, um möglichst schnell was zu sehen - und ja, das sieht vielversprechend aus!

Werde trotzdem nach der anderen Idee auch nochmal forschen, einfach um zu gucken ob sowas geht. Ansonsten könnte ich mich daran machen, zu versuchen, den Inhalt des iFrames so zu stylen, dass es funktioniert. Habe wirklich lange nicht damit gearbeitet.

Wobei ... eigentlich wäre meine andere Lösung blöd. Weil ich dann WIRKLICH jedes Mal beim Export jeden einzelnen Link dadurch ergänzen müsste, während es bei deiner iFrame-Lösung nur die Karten-Seite ist, die ich nachträglich anpassen muss bzw. wo ich beim Export drauf achten muss.

Yrda · 1. Mai 2024

Ich denke ich komme voran - danke für den Tipp mit dem iFrame, Veria! Das sieht soweit ganz gut aus, ich hab da aktuell bloß grad noch ein hoffentlich lösbares Problem mit dem Pfad zum Bild. Da aber immerhin schonmal die Controls und der Marker angezeigt werden (und das Bild vorhin auch schonmal im iframe sichtbar war) gebe ich da definitiv noch nicht auf.

Yrda · 1. Mai 2024

Jippie, es funktioniert! https://www.yrdanea.de/kompendium

Vielen vielen Dank, Veria!

Ich muss natürlich jetzt vorsichtig sein, mich zu früh zu freuen, aber aktuell sieht es wirklich so aus, als sei mein Problem hiermit gelöst.

Falls jemand sowas auch irgendwo benutzen möchte (natürlich mit Anpassung des Weltnamens und eigener Karte :D) - muss ja auch gar nicht Obsidian-basierend sein, denn an sich hat's damit gar nichts zu tun ... Codesnippets siehe unten. Da ist auch ein Marker dabei, den müsste man dann nur sinnvoll platzieren und mit Content bestücken und wer kann, auch individueller stylen.

Der Code, den ich in die mit Obsidian exportierte html-Seite integriert habe, sieht folgendermaßen aus:

Code

<iframe src="kartenwerk/yrdanea-past-leaflet.html" title="Weltkarte der Vergangenheit" style="width: 650px; height: 480px; border: 1px solid #AAA; display: block;" scrolling="no"></iframe>

und der iframe Content so:

HTML

<!DOCTYPE html> 
<html>
<head>
<title>Weltkarte der Vergangenheit</title>
<link type="text/css" rel="stylesheet" href="../js/leaflet/leaflet.css"/>
<meta id="root-path" root-path="..">
<meta name="description" content="Yrdanea - Weltkarte der Vergangenheit">
<meta property="og:title" content="Weltkarte der Vergangenheit">
<meta property="og:description" content="Yrdanea - Weltkarte der Vergangenheit">
<meta property="og:type" content="website">
<meta property="og:url" content="kartenwerk/weltkarte-der-vergangenheit.html">
<meta property="og:image" content="undefined">
<meta property="og:site_name" content="Yrdanea">
<script src="../js/leaflet/leaflet.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=1.0, maximum-scale=5.0">
<meta charset="UTF-8">
<meta name="description" content="Yrdanea - Weltkarte der Vergangenheit">
<style>html, body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    width: 100%;
    height: 100%;
}</style>
    <div id="image-map" style="width: 650px; height: 480px; border: 1px solid #AAA;"></div>

    <script> 
       // Using leaflet.js to pan and zoom a big image. 
       const map = L.map('image-map', {
         minZoom: 1,
         maxZoom: 4,
         center: [2000, 1446],
         zoom: 1,
         maxBoundsViscosity: 1,
         crs: L.CRS.Simple
       });
       var image= L.imageOverlay("assets/yrdanea-worldmap-past.webp", [[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
       let myMarker = L.marker([80, 40]).addTo(map);
       myMarker.bindPopup("<b>Hello world!</b><br>I am a popup.").addTo(map);
</script></div>
</body></html>

Alles anzeigen

Ich hatte jetzt auch bei der Gelegenheit die Zentrierung korrigiert, damit die Map nicht so komisch in den Rahmen springt.

***Veria*** · 1. Mai 2024

Schön, dass es jetzt klappt.

Yrda · 1. Mai 2024

Zitat von Veria

Einen Vorschlag, der dran vorbei zielt, hätte ich noch: Stopf die Karte in ein Iframe. Da drin sollte es ein echtes Pageload geben.

Ach, das wollte ich noch fragen: warum meintest du „der dran vorbei zielt“?

***Veria*** · 1. Mai 2024

Das "eigentliche" Problem ist ja, dass Obsidian kein Event liefert, auf das Leaflet hört. Es wäre daher herauszufinden, ob es ein Obisidian-Pageload-Event gibt oder sich eines einbauen lässt (mit dem Plugin oder einem anderen oder wasauchimmer) und wie man darauf hört.

YouTube zum Beispiel lädt auch so nach, dass keine Pageload-Events kommen, dort muss man auf das Event "yt-navigate-finish" hören, und das muss man auch erst mal wissen.

Yrda · 1. Mai 2024

Auf jeden Fall ist das eigentliche Problem dann kein leaflet-Spezifisches, da das reine console.log ja auch betroffen war. Also forschen könnte man da unabhängig davon noch.

Sollte ich irgendwann mal was rausfinden, würde ich das aber auch hier posten, weil die Problematik in diesem Zusammenhang aufgefallen war.

Interaktive Weltkarte mit Leaflet

Yrda 1. Mai 2024

Jetzt mitmachen!