[FRAGE] Leaflet Popup mit Inhalt füllen

[Mark Grade]

Hallo Alle,

ich habe mit Leaflet eine Karte erstellt. Das hat gut funktioniert.
Man kann zwischen verschiedenen Karten-Lyouts umschalten, als GPX hinterlegte Wege anzeigen lassen. Das ein-aus funktioniert auch bei gruppierten Markern.
Sowohl bei den Wegen als auch bei den Markern können über Popups weitere Infos angezeigt werden.
Wie gesagt: Das läuft so.

Jetzt sollen die bisherigen Platzhalter in den Popups durch richtige, d.h. ausführlichere Infos gefüllt werden.
Das möchte ich eigentlich nicht in der gleichen html-Datei tun, die dafür zuständig ist, dass alles läuft und angezeigt wird.

Ich wünsche mir etwas in der Art:

1. csv-Datei erstellen:
MarkerNr;Inhalt1;Inhalt2;Inhalt3
1001;<b>Auerberghalle</b><br>Ein Text 1001;<img alt=\"Parkplatz 1\" height=\"88\" src=\"http://meine.seite.dee/media/DS211_k.jpg\" style=\"float:right; margin: 5px;\" width=\"200\" /><br>;hier der letzte Text 1001.</p>
1002;<b>Teichparkplatz</b><br>Ein Text 1002;<img alt=\"Parkplatz 1\" height=\"88\" src=\"http://meine.seite.dee/media/DS212_k.jpg\" style=\"float:right; margin: 5px;\" width=\"200\" /><br>;hier der letzte Text 1002.</p>

2. einer Routine sagen: Wenn jemand auf den Marker "Auerberghalle" klickt, dann zeige im Popup den Inhalt der Zeile mit der Markernummer 1001 an.

z.Z. werden die Popups hierdurch angezeigt.

var Parken = new L.LayerGroup();

L.marker([50.4212, 9.6205], {icon: ParkplatzIcon}).bindPopup('Auerberghalle').addTo(Parken);
L.marker([50.4331, 9.6818], {icon: ParkplatzIcon}).bindPopup('Teichparkplatz').addTo(Parken);

Was müsste ich wie und wo einbauen, dass es so oder so ähnlich läuft?

Mit freundlichem Gruß

Mark Grade

 

[kkapsner]

Ich würde das CSV gleich am Anfang laden und weiterverarbeiten. Dann kannst du beim Erzeugen der Marker gleich das richtige HTML übergeben.

 

[Mark Grade]

Hallo kkapsner,

Danke für den Versuch.

Ich würde das CSV gleich am Anfang laden und weiterverarbeiten. Dann kannst du beim Erzeugen der Marker gleich das richtige HTML übergeben.

Leider verstehe ich nicht was damit gemeint sein könnte. Meine Java-Kenntnisse nach Schulnoten: 5
Das einfügen von fertigem Code klappt nach Anleitung meistens ganz gut. Daher habe ich mich für Leaflet entschieden.

Mit freundlichem Gruß

Mark Grade

 

[kkapsner]

Dann würde ich ein anderes Datenformat wählen. CSV wird von JS nicht nativ unterstützt. Verwende lieber JSON (bzw. direkt JS... also JSON mit einer Variablendeklaration davor). Dann kannst du deine Datendatei einfach per <script> vor deinem Hauptscript einbinden und hast die Daten sofort zur Verfügung.