You are not logged in.

#1 2020-10-18 18:31:25

MichaelFS
Member
Registered: 2011-04-16
Posts: 51

Leaflet (vormals: OpenLayers) Anwendung?

Hallo,

ich habe nach dieser Anleitung
die unveränderten Dateien auf einen Webserver geladen; die Startseite habe ich osm.html genannt, da es index.html bereits gibt.

Rufe ich nun die url/osm.html auf, kommt eine weiße (leere) Seite. Zum Test habe ich eine osm2.html mit etwas Text erstellt: Rufe ich url/osm2.html, kommt der definierte Text.

Meine Fragen:
1. Wo ist mein Fehler?
2. Lässt sich eine solche Karte auch lokal mit einem PC (natürlich online) aber ohne Webserver lösen?

Danke, Michael

Last edited by MichaelFS (2020-10-19 19:27:12)

Offline

#2 2020-10-18 19:12:13

geri-oc
Member
From: Sachsen
Registered: 2011-03-21
Posts: 5,045
Website

Re: Leaflet (vormals: OpenLayers) Anwendung?

http://umap.openstreetmap.fr/de/map/bei … 3/13.65824

so etwa? Über teilen -> iframe - HTLM für die Webseite?

Offline

#3 2020-10-18 19:20:31

MichaelFS
Member
Registered: 2011-04-16
Posts: 51

Re: Leaflet (vormals: OpenLayers) Anwendung?

Danke, aber ich muss eine txt-Datei wie im Beispiel verwenden. Außerdem möchte ich verstehen, warum bei mir keine Karte sondern nur eine leere Seite angeźeigt wird.

Offline

#4 2020-10-18 19:38:52

fx99
Member
From: Baden-Württemberg
Registered: 2009-06-02
Posts: 1,685

Re: Leaflet (vormals: OpenLayers) Anwendung?

Wenn ich den html Code aus https://wiki.openstreetmap.org/wiki/DE: … le_Example in eine lokale Datei kopiere und diese mit Firefox öffne, erscheint die erwartete Karte (Zentrum von Berlin).
Event. liegt das Problem bei Deinem Web-Server.

Offline

#5 2020-10-19 07:24:05

Nop
Moderator
Registered: 2009-01-26
Posts: 2,641

Re: Leaflet (vormals: OpenLayers) Anwendung?

Erscheinen Fehlermeldungen auf der Browserconsole? (F12, Reiter Console)

Und falls Du noch ganz am Anfang stehst: Bis Du Dir bewußt daß sich Leaflet zum Quasi-Standard für Kartenseiten entwickelt hat? Bedeutend einfacher zu verstehen und zu verwenden, OpenLayers wird von den meisten Kartenwebsites nicht mehr benutzt.


Nothing is too difficult for the man who does not have to do it himself...
Projekte: Reit- und Wanderkarte mit Navigation - Kartengenerator Map Composer - GPS Track Editor Track Guru

Offline

#6 2020-10-19 08:10:45

MichaelFS
Member
Registered: 2011-04-16
Posts: 51

Re: Leaflet (vormals: OpenLayers) Anwendung?

Danke @Nop, Browserconsole ist ein guter Tipp!
Folgendes wird gemeldet, sagt mir allerdings gar nichts:

1 Anfrage für Zugriff auf Cookies oder Speicher für "https://www.openlayers.org/api/OpenLayers.js" wurde blockiert, weil alle Anfragen für Speicherzugriff für nicht direkt aufgerufene Websites (Drittanbieter) blockiert werden und das Blockieren von Seitenelementen aktiviert ist.

2 Das Cookie "__cfduid=d34e0840543d01a682cc40d90ae9515091603090237; expires=Wed, 18-Nov-20 06:50:37 GMT; path=/; domain=.openlayers.org; HttpOnly; SameSite=Lax; Secure" wurde als Drittanbieter abgelehnt. OpenLayers.js

3 <script>-Quell-URI ist in diesem Dokument nicht erlaubt: "https://www.openlayers.org/api/OpenLayers.js". EigeneDomain.de:3:1

4 Das Cookie "" wurde als Drittanbieter abgelehnt. OpenLayers.js

5 Das Cookie "__cfduid=d34e0840543d01a682cc40d90ae9515091603090237; expires=Wed, 18-Nov-20 06:50:37 GMT; path=/; domain=.openlayers.org; HttpOnly; SameSite=Lax; Secure" wurde als Drittanbieter abgelehnt. OpenLayers.js

6 Uncaught ReferenceError: OpenLayers is not defined
    <anonymous> https://EigeneDomain.de/:5
    Weitere Informationen: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Not_defined?utm_source=mozilla&utm_medium=firefox-console-errors&utm_campaign=default
    EigeneDomain.de:5:5

7 Die Zeichenkodierung des HTML-Dokuments wurde nicht deklariert. Das Dokument wird in manchen Browser-Konfigurationen mit verstümmeltem Text dargestellt, wenn das Dokument Zeichen außerhalb des US-ASCII-Bereichs enthält. Die Zeichenkodierung der Seite muss im Dokument oder Transferprotokoll deklariert werden. EigeneDomain.de

Die Meldungen 1..5 sind gelb, Nummer 6 und 7 rot hinterlegt.

Zu Leaflet: Von leaflet kenne ich bisher nicht mehr als den Namen; und ja, ich stehe bei meiner Aufgabe ganz am Anfang.
Ich möchte ein Werkzeug zur Qualitätssicherung; hierzu habe ich ein BASH-Script, mit dem check_date für definierbare Regionen abgefragt wird. Das Script liefert eine HTML-Liste mit Node-Type, Name, Adresse etc. und einen klickbaren Link zu JOSM. Außerdem erstellt es eine .txt-Datei zur (rot / grün) Darstellung der Fundstellen; Beispiel:

point	title	description	icon
45.4025531,12.9640938	Bushaltestelle 	shelter<br><br><br><br>2015-01-01<br>xy101<br><a href=http://127.0.0.1:8111/load_and_zoom?left=11.8630938&right=11.8650938&top=48.5035531&bottom=48.5015531&select=node4994001674&addtags=check_date=2020-10-18 target=dummyiframe>Add</a> lastcheck in JOSM<br><a href=http://127.0.0.1:8111/load_and_zoom?left=11.8630938&right=11.8650938&top=48.5035531&bottom=48.5015531&select=node4994001674 target=dummyiframe>View</a> in JOSM<iframe style='display:none; visibility:hidden;' name=dummyiframe src=/>	Bullet_CircleRed.svg
45.5917897,12.8658985		shelter<br><br><br><br>2015-01-01<br>abc<br><a href=http://127.0.0.1:8111/load_and_zoom?left=11.9648985&right=11.9668985&top=48.4927897&bottom=48.4907897&select=node2398276697&addtags=check_date=2020-10-18 target=dummyiframe>Add</a> lastcheck in JOSM<br><a href=http://127.0.0.1:8111/load_and_zoom?left=11.9648985&right=11.9668985&top=48.4927897&bottom=48.4907897&select=node2398276697 target=dummyiframe>View</a> in JOSM<iframe style='display:none; visibility:hidden;' name=dummyiframe src=/>	Bullet_CircleGreen.svg

 
Ich bin dankbar für jede Hilfe, so wie Du es beschreibst wäre Leaflet wohl passender ...

Offline

#7 2020-10-19 09:21:15

MichaelFS
Member
Registered: 2011-04-16
Posts: 51

Re: Leaflet (vormals: OpenLayers) Anwendung?

Leaflet habe ich jetzt mit diesem Beispiel erfolgreich umgesetzt; ich denke, das wird mein Weg!
Wo finde ich jetzt eine Anleitung, die Koordinaten aus der .txt-Datei mit verschiedenfarbigen Marker und JOSM-Link in die Karte zu zaubern?

Last edited by MichaelFS (Yesterday 06:24:55)

Offline

#8 2020-10-19 16:50:42

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

Re: Leaflet (vormals: OpenLayers) Anwendung?

@MichaelFS,
du hast in deinem Browser den Schutz etwas zu hoch geschraubt.
Bei fx99 und bei mir funktioniert der code, bei Ansicht der Browserconsole wird auch über cookies gemoppert aber dennoch ausgeführt.

Die .txt Datei war unter openlayers2 mal ein Standardformat.
Ich benutze diese Format auch in den Folgeversionen, es ist eine csv-Lesung und Auswertung.
Zu diesem Standard gehört die Auflistung nach lat und lon (statt point). Unter Auslassung deiner iframe-Festlegungen kann ich die Datei direkt auswerten (Marker auf der Karte, Popup mit Link)

lat	lon	title	description	dummy	icon
45.4025531	12.9640938	Bushaltestelle 	shelter<br><br><br><br>2015-01-01<br>xy101<br><a href=http://127.0.0.1:8111/load_and_zoom?left=11.8630938&right=11.8650938&top=48.5035531&bottom=48.5015531&select=node4994001674&addtags=check_date=2020-10-18 target=dummyiframe>Add</a> lastcheck in JOSM<br><a href=http://127.0.0.1:8111/load_and_zoom?left=11.8630938&right=11.8650938&top=48.5035531&bottom=48.5015531&select=node4994001674 target=dummyiframe>View</a> in JOSM	<iframe style='display:none; visibility:hidden;' name=dummyiframe src=/>	m/icons/marker-red.png
45.5917897	12.8658985		shelter<br><br><br><br>2015-01-01<br>abc<br><a href=http://127.0.0.1:8111/load_and_zoom?left=11.9648985&right=11.9668985&top=48.4927897&bottom=48.4907897&select=node2398276697&addtags=check_date=2020-10-18 target=dummyiframe>Add</a> lastcheck in JOSM<br><a href=http://127.0.0.1:8111/load_and_zoom?left=11.9648985&right=11.9668985&top=48.4927897&bottom=48.4907897&select=node2398276697 target=dummyiframe>View</a> in JOSM	<iframe style='display:none; visibility:hidden;' name=dummyiframe src=/>	../images/mm_40_red.gif

Zu deinem offensichtlichen Vorhaben
Für das besitzende Verkehrsunternehmen mag eine regelmäßige Kontrolle von Wartehäuschen sinnvoll sein.
Bei osm ist das Thema doch etwas komplexer als rot/grün, es gibt nach public_transport kein shelter=no als Eigenschaft.

Offline

#9 2020-10-19 19:26:22

MichaelFS
Member
Registered: 2011-04-16
Posts: 51

Re: Leaflet (vormals: OpenLayers) Anwendung?

Danke axelr,

du hast in deinem Browser den Schutz etwas zu hoch geschraubt.

Mag sein, allerdings habe ich Firefox mit deaktivierten Add-Ons gestarte, identisches Verhalten, keine Anzeige der Karte, leere Seite.
Die Beispieldaten habe ich "anonymisiert", daher sind node-Namen und Koordinaten nicht "richtig".

Ich würde gerne Leaflet verwenden, es scheint die aktuellere Lösung zu sein und funktioniert erst einmal. Eine überschaubare Anleitung zu ersten Schritten ist sehr willkommen.
Ich ändere die Überschrift in Leaflet (vormals OpenLayers) Anwendung.

Offline

#10 2020-10-20 11:36:31

Hike39
Member
Registered: 2009-07-18
Posts: 38

Re: Leaflet (vormals: OpenLayers) Anwendung?

Hallo zusammen,
da ich auch gerade einem Problem mit Openlayer6 nachjage eine Frage bezüglich Nichtdarstellung der Karte.
Mit welchen Endgeräten tritt das Problem auf? Bei meiner Anwendung, die mit OL 6.3.1 erstellt habe, kommt es auch zu dem Phaenomen, dass auf manchen iPhones/iPots mit die Karte nicht angezeigt wird.

Gruß hike39

Offline

#11 2020-10-20 12:14:24

Nop
Moderator
Registered: 2009-01-26
Posts: 2,641

Re: Leaflet (vormals: OpenLayers) Anwendung?

Ich habe eine recht ähnliche Anwendung. Ich habe Dir mal einen relevanten Codeschnipsel rausgezogen. (Ich nutze im Textfile '#' für den Zeilenumbruch und '|' als Trennzeichen)

	
	
	// create map first
	
	// poi layer
	var pois = L.featureGroup().addTo(map);

	// show map	

       loadPOILayer();

	
	function loadPOILayer() {

		pois.clearLayers();

		var url = '/textfile';
		var xmlHttp = new XMLHttpRequest();
		xmlHttp.onload = function () {

			var lines = this.responseText.split('#');
			for (var i = 0; i < lines.length; i++) {
				var parts = lines[i].split('|');
                if( parts.length < 6 )
                    break;
				
				var iconId = parseInt( parts[2], 10 );			
                var lat = parseFloat( parts[5] );
                var lon = parseFloat( parts[6] );
				var latlon = L.latLng( lat, lon );
				
				var marker = L.marker( latlon, { icon: poiIcons[ iconId ], title: parts[0] } );
				marker.addTo( pois );
				
			}
		}
		xmlHttp.open("GET", url, true);
		xmlHttp.send();

Hoffe das hilft Dir weiter.


Nothing is too difficult for the man who does not have to do it himself...
Projekte: Reit- und Wanderkarte mit Navigation - Kartengenerator Map Composer - GPS Track Editor Track Guru

Offline

#12 Yesterday 06:24:12

MichaelFS
Member
Registered: 2011-04-16
Posts: 51

Re: Leaflet (vormals: OpenLayers) Anwendung?

Vielen Dank @Nop,
leider gelingt es mir nicht, diesen Code mit dem HTML aus diesem Beispiel zu verbinden.

Offline

Board footer

Powered by FluxBB