Thema: Interaktive Karte mit LeafletJS

[Skasi]

Ich wurde gebeten, die technische Seite zur Nutzung interaktiver Karten etwas zu erklären.
An dieser Stelle fange ich mal an... bei Fragen, fragen.

Zunächst mal: Ich verwende LeafletJS.
Wie man sehen kann, ist die Dokumentation ziemlich gut und vollständig, es gibt Tutorials und falls nötig auch Plugins.
Eine Beispiel-Implementierung mit etlichen Funktionen findet man hier.

HTML
Es handelt sich bei meinen Ansätzen jeweils um eine ganz simple HTML-Seite, in die erstmal nur ein div-Element für die Karte eingebunden wird.
Der Rest passiert im JavaScript.

Karte
Als Basis nutze ich eine nicht-geographische Karte - aus offensichtlichen Gründen (falls es nicht offensichtlich ist: Ich habe hier keine geographische Karte, sondern eher den Ausschnitt einer solchen).
Die Ausgangsgröße setze ich anhand der tatsächlichen Bilddatei. Das ist dann die Maximalgröße - man kann nicht weiter herauszoomen.
Die Marker sind als normale Popups eingebunden und werden je nach Typ einer Ebene (Layer) zugeordnet. So kann man dann alle Marker gleichen Typs ein- oder ausblenden, indem man den Layer ein- oder ausblendet.

Custom Icons
Um verschiedenartige Typen von Markern andersfarbig darzustellen, hole ich mir die entsprechenden Icons von außerhalb, z.B. grün.
Dazu wird ein Schatten-Icon verwendet, damit es nicht so platt aussieht.
Beides zusammen wird in einer Klasse zusammengefasst:

Code: [Auswählen]

var coloredIcon = L.Icon.extend({
options: {
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
iconSize: [25, 41],
shadowSize: [41, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34]
}
});
var greenIcon = new coloredIcon({iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png'});

Linien und Flächen
Leaflet bietet dafür Bordmittel, die letztlich nichts anderes als SVG sind. Siehe Polyline und Polygon.
Die Daten dafür hole ich aus JSON-Arrays, die als Array an Polyline oder Polygon übergeben werden. Eine Linie oder Fläche kann dabei auch aus mehreren Teilen bestehen (unterbrochene Linie bzw. mehrere Flächen, die inhaltlich zusammengehören). Dazu übergibt man einfach ein Array von Arrays an Polyline oder Polyon.

Code: [Auswählen]

var line = [];

if (data.ways[i].show){
for (wp in data.ways[i].waypoints) {
line.push(data.ways[i].waypoints[wp]);
}
L.polyline(line, {color: "black"}).bindTooltip(name).addTo(legionWay);
}
Daten
Wie geschrieben kommen die Daten aus simplen JSON-Dateien.
Die baue ich je nach Bedarf der Karten (nicht jede Karte benötigt Linien oder Flächen). Einfache Informationen werden flach abgelegt.
Im JavaScript lese ich sämtliche Daten und baue sie nach Bedarf zusammen. Einige werden zur Anzeige von Elementen genutzt (z.B. die Wegpunkte einer Linie), andere dienen der Anzeige-Steuerung (z.B. "show":true), andere werden direkt als auszugebender Text verwendet und an der entsprechenden Stelle beispielsweise als Tooltip zu einer Fläche eingebunden.

Code: [Auswählen]

{
"name":"Assault Mission",
"opponent":"",
"addinfo":"",
"positionLat":20,
"positionLng":850,
"type":"legend",
"missiontype":"assault",
"missionpriority":"",
"outcome":""
}
Gelesen werden die Daten mittels AJAX (XMLHttpRequest).

Hosting
Derzeit hoste ich die Karten noch auf einem lokalen Tomcat. Ich betreibe keinen Webspace und habe auch keinen eingekauft.
Wenn wir online spielen können die Mitspieler derzeit also noch nicht selbst darauf zugreifen. Das regeln wir aber, wenn ich soweit mit der Alpha-Version zufrieden bin.

Fehlende Funktionen
Da ist noch einiges zu tun, aber am wichtigsten ist wohl, daß man die Daten nicht manuell in den JSON-Dateien anlegen muß.
Dafür fehlt mir aber noch ein vernünftiges Konzept zur Eingabe der verschiedenen Arten von Informationen.

Soweit erstmal als Einstiegsübersicht...
Eine komplette Beispiel-Implementierung zeige ich hier jetzt mal nicht - ist ja kein Entwickler-Forum und ich bin kein Web-Entwickler (komme aus der Datenbank-Ecke und daher sieht mein Quellcode für Profis wahrscheinlich wie Hühnergescharre aus) Wenn es konkrete Fragen gibt, kann ich gern detaillierter darauf eingehen.

[Ruhrpottspieler]

Sehr interessant. 
Abonniert!

[schneeland]

Was die Erzeugung der JSON-Daten angeht: theoretisch solltest Du QGIS verwenden können, um GeoJSON zu exportieren (siehe z.B. hier). Hab's allerdings selbst noch nicht ausprobiert, da ich bisher nur mit ArcGIS/ArcGIS-Server gearbeitet habe (und das ist jetzt auch schon wieder ein paar Jahre her).

[Shihan]

Vielen Dank für die Erläuterungen!
Hatte tatsächlich auch mal überlegt, die Rollenspielsitzungen mit solcherart Technik zu unterstützen, aber noch wenig Gelegenheit, mich wirklich mal in Leaflet einzuarbeiten. Die Idee, die Daten aus einem GIS zu erhalten, kam mir dann auch. Allerdings sind diese Tools nicht sonderlich intuitiv, sodass die ganze Sache doch nicht so einfach war.

Kann das Leaflet auch eine große SVG-Karte als Hintergrund nehmen?

[JS]

LeafletJS?
Kriege ich dafür Tantiemen?

[Skasi]

Mit GIS habe ich mich nicht beschäftigt.
Als Grundlage dienen ja nicht-geographische Karten. Im Prinzip sind das einfache Koordinatensysteme mit einer Bilddatei als Hintergrund. Folglich sind die Positionsangaben keine Geo-Koordinaten.
Keine Ahnung, ob man das irgendwie zum Laufen kriegen kann. Aber normale Geo-Karten (Google Maps, Open Streetmap etc.) kann man "beliebig" weit rauszoomen und verschieben. Das fand ich für Rollenspiel-Karten, die ich nicht in beliebiger Größe vorliegen habe, als nicht zielführend und habe da relativ schnell keine Zeit mehr investiert.

SVG als Hintergrund habe ich noch nicht ausprobiert, kann ich aber mal machen.
Ich hatte bisher nur JPG / PNG als Beilage zu den Rollenspielen...

@JS:
Bitte mit den Machern klären. Vielleicht geht da ja was. Könnte aber sein, daß das "JS" in diesem Kontext für "JavaScript" steht

[JS]

Woher weißt du, daß es bei mir nicht auch für JavaScript steht?

[Skasi]

@Shihan
SVG als Karte geht auch... Hätte mich auch gewundert, wenn nicht

[Shihan]

Mit SVG als Basemap wird das ganze natürlich deutlich interessanter bei riesigen Karten (Stichwort Zoomeffekt).

Habe ein wenig in der Doku herumgelesen, aber noch nicht so das Gefühl für die Möglichkeiten entwickeln können.

Was mir vorschwebt, wäre ein Layering nach Bedeutung/Priorität. Als nehmen wir mal als Beispiel eine Karte eines großen Landes (als CRS, auf GIS habe ich keine Lust). Die Städte mit >10.000 Einwohner sind in einer Liste, die Städte mit 1.000 < x < 9.999 Einwohnern sind in einer zweiten und alle kleineren Orte < 1.000 in einer dritten Liste.

Könnte man das Leaflet so pimpen, dass bei unterschiedlichen Zoomstufen unterschiedliche Layer angezeigt werden? So dass auf der Gesamtansicht nur die größten Orte sichtbar sind und erst beim Zoom die anderen dann nach und nach eingeblendet werden?

[Skasi]

@Shihan
Die Frage kann ich leider nicht beantworten, da ich eine solche Funktion für mich noch nicht brauchte.
Sollte aber funktionieren. Siehe dazu das Zoom-Tutorial - Sektion "Controlling the zoom". Da blenden sie beim Reinzoomen zusätzliche Texte ein.

Ansonsten kleines Update:

• in den Missionsdetails kann ich nun Bilder hinterlegen, in diesem Beispiel eine Handzeichnung eines Mitspielers
• Clocks für die Jahreszeiten und Chosen-Entwicklung (nächste Fertigkeit des Auserwählten) oben rechts auf der Karte

Beides wird direkt durch JSON-Daten gesteuert.

(Klicke zum Anzeigen/Verstecken)

[Ruhrpottspieler]

Ich hab mich im Zuge unserer gerade anlaufenden Kampagne in den Verlorenen Landen auch mal mit LeafletJS beschäftigt. Aktuell wird zwar in Roll20 gespielt und die Karte dort auch mit den entsprechenden Informationen gefüttert, aber ich finde es noch besser, die Karte ebenfalls in unserem Kampagnen-Wiki vorliegen zu haben.

Über entsprechende Layer kann eine Karte mit den erkundeten Gebieten angezeigt werden, unter Domänen, sollen später mal einzelne Herrschafts- und Einflussgebiete eingeblendet werden. Zusätzlich lassen sich noch die unterschiedlichen Marker ein- und ausblenden. 

Ansonsten ... work in progress...