KML Dateien in leaflet darstellen

firechhe · November 11, 2018, 7:20pm

Hallo,

ich möchte mir eine leaflet Karte erstellen auf der ich auf verschiedenen Ebene Marker anzeigen lassen kann.
Ich bin bisher soweit, dass ich mehrere Marker auf der Karte gesetzt habe, allerdings manuell im Script.

Mithilfe dieses Scriptes: https://github.com/mapbox/leaflet-omnivore möchte ich nun verschiedene KML Dateien einlesen und jede Datei soll eine eigene Ebene darstellen, die ich ein- und ausblenden kann.

Bisher sieht mein HTML Code wie folgt aus:

<!DOCTYPE html>
<html>
<head>
    <title>Meine Karte</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"/>
</head>
<body>
    <div id="map" style="height: 900px"></div>
    <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
	<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>	
    <script>
		var planes = [
			["Punkt1", X,Y],
			["Punkt2", X,Y],
			["Punkt3", X,Y]
			];
	
        var map = L.map('map').setView([51.864, 8.615], 13);
        mapLink = 
            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; ' + mapLink,
            maxZoom: 20,
            }).addTo(map);
		for (var i = 0; i <planes.length; i++) {
			marker = new L.marker([planes[i][1],planes[i][2]])
				.bindPopup(planes[i][0])
				.addTo(map);
		}

		var runLayer = omnivore.kml('/kml/Dateiname.kml')
    .on('ready', function() {
        map.fitBounds(runLayer.getBounds());
    })
    .addTo(map);

		
</script>
</body>
</html>

Die .kml liegt in einem Ordner “kml” der sich in dem Ordner befindet in dem diese Karte.html sich befindet. Es geschieht aber nichts.
Was mache ich falsch?

kreuzschnabel · November 11, 2018, 7:30pm

Der Pfad /kml/Dateiname.kml funktioniert mit ziemlicher Sicherheit nicht – außer du hast direkt im Root ein Directory namens kml angelegt (mit passenden Rechten).
Probiers mal mit ./kml/Dateiname.kml. Oder kml/Dateiname.kml.

–ks

firechhe · November 11, 2018, 7:34pm

Keine von dir beschriebene Variante brachte einen Erfolg.
Ist das Plugin denn richtig eingebunden? Und ist der Code zum Einbinden der KML auch korrekt?

axelr · November 11, 2018, 11:54pm

Deine Punktkoordinaten X,Y erzeugen einen Fehler, da sie nicht definiert sind.
Wenn ich Koordinaten einsetze funktioniert es
Mein kml-Datensatz steht im Unterverzeichnis /kml/ der html-Seite

<!DOCTYPE html>
<html>
<head>
    <title>Meine Karte</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"/>
</head>
<body>
    <div id="map" style="height: 300px"></div>
    <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
	<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>	
    <script>
		var planes = [
			["Punkt1",46.7, 7.4],
			["Punkt2", 46.8,8],
			["Punkt3", 46.9,8]
			];
	
        var map = L.map('map').setView([51.864, 8.615], 13);
        mapLink = 
            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; ' + mapLink,
            maxZoom: 20,
            }).addTo(map);
		for (var i = 0; i <planes.length; i++) {
			marker = new L.marker([planes[i][1],planes[i][2]])
				.bindPopup(planes[i][0])
				.addTo(map);
		}

//		var runLayer = omnivore.kml('/kml/Dateiname.kml')
//		var runLayer = omnivore.kml('./kml/2012-02-10.kml')// funktioniert
		var runLayer = omnivore.kml('kml/2012-02-10.kml')// funktioniert
    .on('ready', function() {
        map.fitBounds(runLayer.getBounds());
    })
    .addTo(map);

		
</script>
</body>
</html>

Das Ergebnis ist aber dürftig, da keine kml-Formatierungen übernommen werden.

firechhe · November 12, 2018, 9:54am

Funktioniert bei mir auch nicht. Habe 1:1 deinen Code genommen und meine KML Datei in einem Unterverzeichnis /kml/ der HTML Seite geschoben.

Allerdings befindet sich in meiner KML Datei keine Pfade sondern nur Punkte (Marker). Ich versuche es mal mit einer CSV Datei, muss der Code dann viel anders lauten oder kann ich einfach die Zeilen

//		var runLayer = omnivore.kml('/kml/Dateiname.kml')
//		var runLayer = omnivore.kml('./kml/2012-02-10.kml')// funktioniert
		var runLayer = omnivore.kml('kml/2012-02-10.kml')// funktioniert

durch

//		var runLayer = omnivore.csv('/csv/Dateiname.csv')
//		var runLayer = omnivore.csv('./csv/2012-02-10.csv')// funktioniert
		var runLayer = omnivore.csv('csv/2012-02-10.csv')// funktioniert

ersetzen?

axelr · November 12, 2018, 10:09am

Wenn du noch meinen Dateinamen ‘./kml/2012-02-10.kml’ durch deinen eigenen Dateinamen ersetzt sollte es passen.

Harald_Hartmann · November 12, 2018, 11:04am

Ich kenne das omnivore Plugin zwar nicht, aber ich kann min nicht vorstellen, dass omnivore.kml csv Dateien entgegen nimmt. Ließ dir doch dazu mal die Dokumentation zum Plugin durch
Bzw. Hast du vorher nachgeschaut, ob es die csv Methode überhaupt gibt?

Harald_Hartmann · November 12, 2018, 11:13am

Ansonsten ist es auch sehr hilfeich, wenn du in deinem Btowser mit F12 mal den Debugger startest und uns die Ausgaben vom console-Log und der Netzwerkansicht gibst. Bei letzterem könnte es ja sein, dass z.B. ein 404 vorliegt, weil er doch an der falschen Stelle sucht.

axelr · November 12, 2018, 11:37am

Geht im Prinzip beides
http://www.roeltgen.com/foren/firechheForum64423.html
http://www.roeltgen.com/foren/firechheForum64423-csv.html
ABER
csv erwartet wohl eine bestimmte Datenstruktur. Die Gipfel in meinem Beispiel liegen eigentlich im Alpenraum.

firechhe · November 12, 2018, 3:41pm

Ich erhalte in der Console folgende Meldung:

Was bedeutet das?

axelr · November 12, 2018, 3:53pm

Das bedeutet, dass du #6 noch nicht gelesen hast. Die Meldung kommt u.a., wenn die Datei nicht vorhanden ist.

Harald_Hartmann · November 12, 2018, 3:58pm

Unter chrome kann sie aber auch dann kommen, wenn die irgendwas.html Datei auch via file:// geöffnet wird.

@firechhe: magst du uns auch mal dein Systemsetup (Windows, Linux, Webserver, etc.) verraten? Liege ich mit meiner Vermutung richtig, dass du z.B. die html(-Datei) per Doppelklick öffnest?

kreuzschnabel · November 12, 2018, 4:00pm

Zu CORS: https://de.wikipedia.org/wiki/Cross-Origin_Resource_Sharing
Das Javascript fühlt sich nicht dazu berechtigt, einen file:-Link auf diesem Pfad zu öffnen.

Wieso wird die kml mit einem absoluten Pfad von D:/ aus angesprochen?

–ks

kreuzschnabel · November 12, 2018, 4:02pm

Also,

sieht mir doch sehr nach Windows aus

–ks

firechhe · November 12, 2018, 4:05pm

Ich arbeite momentan zu 100% lokal unter Windows 10. Webbrowser Google Chrome. Ja, die html Datei öffne ich per Doppelklick.

Liegt da der Fehler?

Harald_Hartmann · November 12, 2018, 4:22pm

Ja … die Zeiten, als man HTML Dateien direkt vom Explorer geöffnet und dann auch noch Dat(ei)en (und dann auch noch per file://) nachgeladen hat sind definitiv schon länger vorbei. Schonmal was von XAMPP gehört?

kreuzschnabel · November 12, 2018, 4:43pm

Das läuft nicht. Das läuft auch in ganz vielen anderen Fällen nicht (PHP oder so was). Zur Web-Entwicklung brauchst du zwingend einen lokalen Webserver, damit eine HTTP-Umgebung vorliegt.

Lokaler Webserver ist kein Hexenwerk, es muss gar kein Apache sein (obwohl das 2fellos der beste ist), ich hatte zu Zeiten meiner HTML-Entwicklung einen Janaserver laufen. Ist schnell installiert, Konfig lässt sich durchklicken, in zehn Minuten haste das Ding am Start.

Die Seite öffnest du dann in deinem Browser mit http://127.0.0.1/relativer/pfad/zum/ordner/ab/document/root/des/servers/seite.html.

Wenn das nicht gleich klappt, spuckt Google dir sicher Millionen Tutorials zur Einrichtung eines lokalen Webservers aus.

–ks

firechhe · November 12, 2018, 5:13pm

Okay, alles klar danke für den Tipp.
Hab das gesamte Verzeichnis nun mal testweise auf einen “richtigen” Webserver hochgeladen. Und siehe da, es funktioniert!

Eine .csv Datei konnte ich gerade einlesen. KML funktioniert noch nicht - schade. Ich generiere mir über Excel .kml Dateien die ich anschließend in der App maps.me einlese. Wäre natürlich schön, wenn ich die gleiche .kml auch in leaflet einlesen könnte.

Hat da jemand schon mit gearbeitet? Oder kann mir beim CSV Import weiterhelfen? Momentane erstellt mir leaflet nur die Marker. Ich würde aber gern noch per Mausklick Informationen hinterlegen (im besten Fall eine Tabelle).
Zudem würde ich gerne die einzelnen importieren DSV oder KML Dateien über solch einen Ebenenbutton ein- und ausblenden können.

ikonor · November 12, 2018, 5:26pm

Es gibt auch ganz einfache Server, die man in der Kommandozeile im gewünschten Verzeichnis starten kann:
https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally#run-local-server

ikonor · November 13, 2018, 10:41am

axelr hat ja in #4 und #9 schon gezeigt, dass es prinzipiell geht. Wenn es bei dir nicht funktioniert, muss man eben schauen warum nicht, siehe #8.

Das nennt sich Popup und kann auch HTML enthalten. Hier ein Beispiel, das ich gefunden habe (ist zwar für Mapbox JS, der omnivore-Teil müsste aber so auch mit Leaflet gehen):
https://www.mapbox.com/mapbox.js/example/v1.0.0/omnivore-kml-tooltip/
Siehe auch
https://leafletjs.com/reference-1.3.4.html#layer-bindpopup

Dazu einen Layer Switcher anlegen und z.B. den/die KML-Layer (“runLayer”) in der “.on(‘ready’, function() {” als Overlay hinzufügen, siehe:
https://leafletjs.com/reference-1.3.4.html#control-layers-addoverlay

Edit: Oder einfacher, den Layer Switcher zum Schluß anlegen und die KML-Layer als “overlays” eintragen (warten auf ‘ready’ sollte dazu nicht nötig sein):
https://leafletjs.com/reference-1.3.4.html#control-layers