leaflet Marker-Popups mit Inhalt füllen

Communities Deutschland (Germany)
1

Hallo alle,

nachdem die Anzahl der Marker auf meiner Karte und derern Inhalt immer umfangreicher wird, suche ich nach einem Weg die Inhalte der Popups “auszulagern”.

Zur Zeit läuft das z.B. so:

// Die Gruppe der ÖPNV Marker
var oepnv = new L.LayerGroup();

L.marker([50.67522, 9.45806], {icon: HaltestelleIcon}).bindPopup(‘Stadthalle’).addTo(oepnv);
L.marker([50.68226, 9.46117], {icon: HaltestelleIcon}).bindPopup(‘Stadtmitte’).addTo(oepnv);

Anstatt: Stadthalle/Stadtmitte soll nun ein umfangreicher (ca. 30 Worte) HTML-Text, ein Bild mit Link, u.ä. in dem Popup angezeigt werden.

Ich wollte das mit <?php include("Stadthalle.txt"); ?> erreichen.
Leider waren meine Versuche das einzubauen vergebens.
Wie muss das gemacht werden? Geht es überhaupt?

Danke im Voraus

Mit freundlichem Gruß

Franz Luwein

2

Hallo Franz,

so gehts:

var popupInhalt = {
	"Stadthalle" : "Ich bin ein ganz langer Text",
  "Bahnhof" : "Ich bin ein ganz langer Text, und habe noch viel mehr Inhalt",
}

var map = L.map("map").setView([50.67522, 9.45806], 14);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
{attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'}
).addTo(map);


L.marker([50.67522, 9.45806]).bindPopup(popupInhalt["Stadthalle"]).addTo(map);
L.marker([50.68226, 9.46117]).bindPopup(popupInhalt["Bahnhof"]).addTo(map);

Hier in Aktion zu sehen: http://jsfiddle.net/u2bvn3m1/1/

…und um den 2. Teil der Frage auch noch zu beantworten:

Den Teil der das popupInhalt definiert kannst du in eine Javascript-Datei auslagern, und die dann per

<script src="..."/>

einbinden.

Grüße,
gormo

3

Hallo gormo,

Danke!
Du hast mir sehr geholfen. Mit deiner Beschreibung konnte ich das auch ohne gute Javascript-Kenntnisse gut zum Laufen bringen.
Textauszeichnung, Bilder, Links usw. läuft. Ich bin ganz happy.
Leider kommt es immer mal wieder vor, dass z.B. ein \ von einem " im HTML-Bereich vergessen wird.
Gibt es eine Möglichkeit, dass sich solche Fehler nur auf den Marker auswirken, wo der Fehler verzapft worden ist?
Momentan bleibt die Karte leer - keine Marker, keine GPX-Linien, kein Auswahlmenue, kein …
Etwa nach dem Motto: In dem Marker “Stadthalle” ist etwas falsch, Pech gehabt - dieses eine Popup wird nicht oder leer angezeigt.

Gruß
Franz

4

Hallo Franz,

nach dem was ich über Javascript weiss, geht das nicht. Denn dein falsch formatiertes Objekt wird einen Laufzeitfehler in Javascript erzeugen, der dazu führt, dass dein ganzes Skript abbricht.

Ich glaube du kannst das umgehen, indem du jeden Marker in eine einzelne Datei auslagerst.

Also:

(Datei bahnhof.js)
popupInhalt["Bahnhof"] = "Der Bahnhofstext";


(Datei stadthalle.js)
popupInhalt["Stadthalle"] = "Der fehlformatierte Text " für die Stadthalle";

und in deiner Hauptdatei dann


<script>
var popupInfo = {}
</script>
<script src="bahnhof.js"/>
<script src="stadthalle.js"/>
<script>
...Kartencode...
</script>

Aber das ist ungetestet. Musst du selbst gucken, ob dann bei einem Fehler nur die eine js-Datei abbricht, und/oder ob das für jeden Browser konsistentes Verhalten ist.

Ich find die Lösung aber auch ein bisschen unschön. Auf ein sauberes JSON kannst du doch wohl achten :wink:

Tipp: HTML akzeptiert auch einzelne Anführungszeichen. Dann wird das alles einfacher.

popupInfo["Bahnhof"] = "<a href='//www.bahn.de'><img src='bahnhof.jpg'/></a>";
5

Nutze doch die Test-/ Debugfunktionen der Browser. Im FF - und auch in anderen Browsern - macht man halt die Konsole auf (FF: STRG_SHIFT I oder auch STRG SHIFT J), ruft “seine” Seite auf und dann sieht man meistens schon, was Sache ist.

Gruss
walter

6

Eine weitere Möglichkeit wäre, die Popup-Inhalte jeweils als separate .html Datei in einem iframe zu laden:


L.marker([49.412222, 8.699722]).bindPopup('<iframe src="stadthalle.html"></iframe>').addTo(map);

Beispiel: http://jsfiddle.net/p0khayvf/6/

Bei nicht zu langen Texten und wenig Html könnte es auch Sinn machen, stattdessen die Daten mit Koordinaten als CSV Datei auszulagern, z.B. mit dem Plugin:

Es gibt auch komplexere Vorlagen mit mehr Funktionalität: