Medien & Phantastik > Multimedia - Software & Betriebsysteme

Interaktive Karte mit LeafletJS

(1/3) > >>

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: ---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'});

--- Ende Code ---

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: ---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);
}
--- Ende Code ---

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: ---{
"name":"Assault Mission",
"opponent":"",
"addinfo":"",
"positionLat":20,
"positionLng":850,
"type":"legend",
"missiontype":"assault",
"missionpriority":"",
"outcome":""
}
--- Ende Code ---

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.  :d
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?
:D

Navigation

[0] Themen-Index

[#] Nächste Seite