You are not logged in.

#1 2018-11-11 20:20:39

firechhe
Member
Registered: 2018-07-17
Posts: 45

KML Dateien in leaflet darstellen

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?

Offline

#2 2018-11-11 20:30:23

kreuzschnabel
Member
Registered: 2015-07-03
Posts: 6,640

Re: KML Dateien in leaflet darstellen

firechhe wrote:

Was mache ich falsch?

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

Offline

#3 2018-11-11 20:34:58

firechhe
Member
Registered: 2018-07-17
Posts: 45

Re: KML Dateien in leaflet darstellen

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

Last edited by firechhe (2018-11-11 20:37:30)

Offline

#4 2018-11-12 00:54:13

axelr
Member
Registered: 2014-03-18
Posts: 270

Re: KML Dateien in leaflet darstellen

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.

Offline

#5 2018-11-12 10:54:48

firechhe
Member
Registered: 2018-07-17
Posts: 45

Re: KML Dateien in leaflet darstellen

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?

Offline

#6 2018-11-12 11:09:14

axelr
Member
Registered: 2014-03-18
Posts: 270

Re: KML Dateien in leaflet darstellen

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

Offline

#7 2018-11-12 12:04:41

Harald Hartmann
Member
From: 98667 Schönbrunn
Registered: 2014-04-02
Posts: 3,123
Website

Re: KML Dateien in leaflet darstellen

firechhe wrote:

Ich versuche es mal mit einer CSV Datei, muss der Code dann viel anders lauten oder kann ich einfach die Zeilen

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 wink
Bzw. Hast du vorher nachgeschaut, ob es die csv Methode überhaupt gibt?

Last edited by Harald Hartmann (2018-11-12 12:05:49)


Mein aktives Gebiet: Gemeinde Schleusegrund
Fingerprint meines Schlüssels: 71F7 3CD9 B647 9079 6B88 326E 8B8B 72AE 34F9 5AAD

Offline

#8 2018-11-12 12:13:18

Harald Hartmann
Member
From: 98667 Schönbrunn
Registered: 2014-04-02
Posts: 3,123
Website

Re: KML Dateien in leaflet darstellen

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.


Mein aktives Gebiet: Gemeinde Schleusegrund
Fingerprint meines Schlüssels: 71F7 3CD9 B647 9079 6B88 326E 8B8B 72AE 34F9 5AAD

Offline

#9 2018-11-12 12:37:32

axelr
Member
Registered: 2014-03-18
Posts: 270

Re: KML Dateien in leaflet darstellen

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

Last edited by axelr (2018-11-12 12:38:27)

Offline

#10 2018-11-12 16:41:53

firechhe
Member
Registered: 2018-07-17
Posts: 45

Re: KML Dateien in leaflet darstellen

Ich erhalte in der Console folgende Meldung:

leaflet-omnivore.min.js:1 Access to XMLHttpRequest at 'file:///D:/TresorIt%20Daten/Ordner/Ordner/Ordner%20Desktop/kml/2012-02-10.kml' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.


Was bedeutet das?

Offline

#11 2018-11-12 16:53:33

axelr
Member
Registered: 2014-03-18
Posts: 270

Re: KML Dateien in leaflet darstellen

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

Last edited by axelr (2018-11-12 16:55:06)

Offline

#12 2018-11-12 16:58:20

Harald Hartmann
Member
From: 98667 Schönbrunn
Registered: 2014-04-02
Posts: 3,123
Website

Re: KML Dateien in leaflet darstellen

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?


Mein aktives Gebiet: Gemeinde Schleusegrund
Fingerprint meines Schlüssels: 71F7 3CD9 B647 9079 6B88 326E 8B8B 72AE 34F9 5AAD

Offline

#13 2018-11-12 17:00:43

kreuzschnabel
Member
Registered: 2015-07-03
Posts: 6,640

Re: KML Dateien in leaflet darstellen

firechhe wrote:

Was bedeutet das?

Zu CORS: https://de.wikipedia.org/wiki/Cross-Ori … ce_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

Offline

#14 2018-11-12 17:02:09

kreuzschnabel
Member
Registered: 2015-07-03
Posts: 6,640

Re: KML Dateien in leaflet darstellen

Harald Hartmann wrote:

magst du uns auch mal dein Systemsetup (Windows, Linux, Webserver, etc.) verraten?

Also,

firechhe wrote:

file:///D:/

sieht mir doch sehr nach Windows aus smile

--ks

Offline

#15 2018-11-12 17:05:24

firechhe
Member
Registered: 2018-07-17
Posts: 45

Re: KML Dateien in leaflet darstellen

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

Liegt da der Fehler?

Offline

#16 2018-11-12 17:22:55

Harald Hartmann
Member
From: 98667 Schönbrunn
Registered: 2014-04-02
Posts: 3,123
Website

Re: KML Dateien in leaflet darstellen

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?


Mein aktives Gebiet: Gemeinde Schleusegrund
Fingerprint meines Schlüssels: 71F7 3CD9 B647 9079 6B88 326E 8B8B 72AE 34F9 5AAD

Offline

#17 2018-11-12 17:43:45

kreuzschnabel
Member
Registered: 2015-07-03
Posts: 6,640

Re: KML Dateien in leaflet darstellen

firechhe wrote:

Ja, die html Datei öffne ich per Doppelklick.

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/ord … seite.html.

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

--ks

Offline

#18 2018-11-12 18:13:22

firechhe
Member
Registered: 2018-07-17
Posts: 45

Re: KML Dateien in leaflet darstellen

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! smile

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.

Offline

#19 2018-11-12 18:26:35

ikonor
Member
Registered: 2010-11-08
Posts: 593
Website

Re: KML Dateien in leaflet darstellen

Es gibt auch ganz einfache Server, die man in der Kommandozeile im gewünschten Verzeichnis starten kann:
https://github.com/mrdoob/three.js/wiki … cal-server

Offline

#20 2018-11-13 11:41:04

ikonor
Member
Registered: 2010-11-08
Posts: 593
Website

Re: KML Dateien in leaflet darstellen

firechhe wrote:

KML funktioniert noch nicht - schade.

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.

firechhe wrote:

Momentane erstellt mir leaflet nur die Marker. Ich würde aber gern noch per Mausklick Informationen hinterlegen (im besten Fall eine Tabelle).

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/exampl … l-tooltip/
Siehe auch
https://leafletjs.com/reference-1.3.4.h … -bindpopup

firechhe wrote:

Zudem würde ich gerne die einzelnen importieren DSV oder KML Dateien über solch einen Ebenenbutton ein- und ausblenden können.

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.h … 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.h … rol-layers

Last edited by ikonor (2018-11-13 12:22:19)

Offline

#21 2018-11-13 21:37:18

firechhe
Member
Registered: 2018-07-17
Posts: 45

Re: KML Dateien in leaflet darstellen

Okay, bin schon wieder eine Ecke weiter.
KML Dateien kann ich nun auch importieren.

Habe nun das Problem, dass ich wohl so einen layer switch hinzufügen kann, aber ich habe direkt zwei untereinander? Brauch eigtl. nur einen big_smile Zudem habe ich keine Boxen zum "anhaken" sondern nur dieses kleinen Kreise. Ich glaube man nennt sie checkboxes und radioboxes.

Ich möchte aber durchaus mehrere KML Ebenen einblenden und nicht nur eine.

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



		
		var pumpenstationen = omnivore.kml('/desktop/kml/pumpenstationen.kml')
		var ansaugstellen = omnivore.kml('/desktop/kml/ansaugstellen_google.kml')

			.on('ready', function() {
			map.fitBounds(pumpenstationen.getBounds());

			pumpenstationen.eachLayer(function(layer) {
            layer.bindPopup(layer.feature.properties.description);
			
		var overlays = {
		"Pumpenstationen": pumpenstationen,
		"Ansaugstellen": ansaugstellen		};
			L.control.layers(overlays).addTo(map);			

        });
    })
	
</script>
</body>
</html>

Offline

#22 2018-11-13 22:09:59

ikonor
Member
Registered: 2010-11-08
Posts: 593
Website

Re: KML Dateien in leaflet darstellen

firechhe wrote:

Habe nun das Problem, dass ich wohl so einen layer switch hinzufügen kann, aber ich habe direkt zwei untereinander? Brauch eigtl. nur einen

Die Initialisierung des Layer Control selbst muss außerhalb der 'ready' Event Funktion stehen, das soll nicht für jeden KML Layer ausgeführt werden, also den "var overlays = ..." Abschnitt ganz ans Ende außerhalb der Klammern, vor das "</script>" verschieben.

firechhe wrote:

Zudem habe ich keine Boxen zum "anhaken" sondern nur dieses kleinen Kreise. Ich glaube man nennt sie checkboxes und radioboxes.

Der Konstruktor erwartet zwei Parameter, zuerst die Base Layer (hier leer), dann die Overlays:

L.control.layers({}, overlays).addTo(map);	

Last edited by ikonor (2018-11-13 22:10:26)

Offline

#23 2018-11-14 10:10:51

firechhe
Member
Registered: 2018-07-17
Posts: 45

Re: KML Dateien in leaflet darstellen

Vielen Dank für die Hilfe. Läuft soweit.
Ein Problem habe ich noch und zwar wird das PopUp nur an einer Ebene angehangen.
Liegt vermutl. an diesem Codeabschnitt:

			pumpenstationen.eachLayer(function(layer) {
            layer.bindPopup(layer.feature.properties.description);

Ich weiß nur noch nicht, wie ich es hinbekomme, dass bei jedem Layer die description ausgelesen wird.

Gibt es zudem die Möglichkeit die Layer standardmäßig zu aktivieren? Wenn ich die Karte nun öffne, muss ich alle Layer erst per Mausklick aktivieren.

Last edited by firechhe (2018-11-14 10:18:02)

Offline

#24 2018-11-14 11:38:38

ikonor
Member
Registered: 2010-11-08
Posts: 593
Website

Re: KML Dateien in leaflet darstellen

firechhe wrote:

Ein Problem habe ich noch und zwar wird das PopUp nur an einer Ebene angehangen.

Ist mir oben schon aufgefallen, dachte aber das wäre gekürzt: das ".on('ready', ..." muss für jeden Layer – also auch "ansaugstellen" – aufgerufen und die Referenzen auf die Layer Variable entsprechend angepasst werden. Wenn es noch mehr Layer werden, könnte man das auch in einer gemeinsamen Funktion generalisieren.

Zum Verständnis: beim Aufruf von "omnivore.kml" wird erst mal nur ein leerer Layer initialisiert und zurückgegeben und das Laden der Daten von der übergebenen URL passiert dann asynchron im Hintergrund. Auf die Daten im Layer kann man erst zugreifen, wenn sie vollständig geladen sind, dafür gibt es die Benachrichtigung über den "ready" Event.

Damit das "map.fitBounds" nicht nur auf die zuletzt geladenen Daten zoomt, müsste man noch die Ausdehnung aller bisher geladenen Layer berücksichtigen (oder einfach weglassen), z.B. über "extend":
https://leafletjs.com/reference-1.3.4.h … nds-extend

firechhe wrote:

Gibt es zudem die Möglichkeit die Layer standardmäßig zu aktivieren? Wenn ich die Karte nun öffne, muss ich alle Layer erst per Mausklick aktivieren.

Da fehlt dann noch ein ".addTo(map);", um die Layer der Karte hinzuzufügen, siehe z.B.:
https://github.com/mapbox/leaflet-omniv … nc--events

Offline

#25 2018-11-14 12:52:51

firechhe
Member
Registered: 2018-07-17
Posts: 45

Re: KML Dateien in leaflet darstellen

So recht komme ich nicht mehr überall mit.
Also es kommen definitiv noch mehr Layer hinzu. Also macht eine gemeinsame Funktion Sinn. Das ".on('ready[...]" jedes mal zu wiederholen macht den Code nur unnötig lang.
Wie müsste der Code dann lauten?

Layer automatisch einblenden funktioniert nun auch.


<!DOCTYPE html>
<html>
<head>
    <title>Maps</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="/desktop/leaflet/leaflet.css"/>
</head>
<body>
    <div id="map" style="height: 900px"></div>
    <script src="/desktop/leaflet/leaflet.js"></script>
	<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>	
    <script>
        var map = L.map('map').setView([52.035, 6.824], 12);
        mapLink = 
            '<a href="https://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; ' + mapLink,
            maxZoom: 20,
            }).addTo(map);
		var pumpenstationen = omnivore.kml('/desktop/kml/pumpenstationen.kml')
			.addTo(map)
		var ansaugstellen = omnivore.kml('/desktop/kml/ansaugstellen.kml')
			.addTo(map)
		
			.on('ready', function() {
			
			ansaugstellen.eachLayer(function(layer) {
            layer.bindPopup(layer.feature.properties.description);
        });
    })
				.on('ready', function() {
			
			pumpenstationen.eachLayer(function(layer) {
            layer.bindPopup(layer.feature.properties.description);
        });
    })

		var overlays = {
			"Pumpenstationen": pumpenstationen,
			"Ansaugstellen": ansaugstellen		};
				L.control.layers({}, overlays).addTo(map);	
</script>
</body>
</html>

Last edited by firechhe (2018-11-14 13:36:55)

Offline

Board footer

Powered by FluxBB