Limit bei der Anzeige von Markern?

Guten Abend zusammen,

ich habe eine Datenbank mit mehreren hunderten von Daten mit Geodaten. Diese wollte ich nun in einer Karte (Leaflet/OSM) anzeigen lassen. Allerdings zeigt die Karte nur 275 Markers an (habe ich händisch ausprobiert); ab 276 wird dann die ganze Karte nicht mehr angezeigt?

Gibt es ein Limit bei den Markern (wäre schade für mich)?
Ist es ein anderer Fehler? Wenn ja wie kann man sich die Fehler anzeigen lassen?
Hat jemand eine andere Idee warum es nicht funktioniert?

Vielen Dank für Eure Antworten im Voraus.

fox_bw

Das übliche Vorgehen bei vielen Markern dürfte clustern sein…

Grüße Max

Nein, es gibt kein Limit. Ich habe testweise schon rund 80.000 auf einer Fullscreen-Karte gehabt, die Verarbeitung und das Handling sind dann allerdings eine Qual.

Du kannst in der Browser-Konsole den Netzwerkverkehr überwachen und die Daten anschauen. Mach die Konsole auf und reloade die Seite. Dann suchst du dir der Request raus, der die Daten beinhaltet. Wenn da alle drin sind, sollte eigentlich ein Javascript-Fehler in der Konsole sichtbar sein. Ansonsten wäre ein Link hilfreich.

Hallo zusammen,

vielen Dank für Eure Anmerkungen.
Der Hinweis mit den Clustern ist gut. Allerdings kenne ich mich mit diesen überhaupt nicht aus.

Hier ist mein bisheriger Quellcode


			var map = L.map('map').setView([48.0000000, 9.3000000], 11);
 
			L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
				attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
			}).addTo(map);
 
			var current;
			for (var i = 0; i < geodaten.length; i++) {
				
				var current = geodaten[i];

				L.marker([current.latitude, current.longitude]).addTo(map)
					.bindPopup(current.name);
			}

Kann mir jemand helfen was ich genau anpassen muss, damit das mit den Clustern funktioniert? Wäre Euch sehr dankbar und vielen Dank im Voraus.

fox_bw

Steht im Link von #2.
Grundprinzip: Erst Marker in ClusterGroup sammeln, dann diese zu map hinzufügen.


var markers = new L.MarkerClusterGroup();
//Schleife
...
             markers.addLayer(L.marker([current.latitude, current.longitude]));
...

map.addLayer(markers);

Guten Abend,

ich habe den Code eingefügt, aber es funktioniert leider nicht.
Es wird nur die Karte angezeigt, ohne die ganzen Punkte und die Cluster sind auch nicht zu sehen.

Hier mein Code:


			console.log(geodaten);
		
			var map = L.map('map').setView([48.7122900, 9.3087000], 11);
 
			L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
				attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
			}).addTo(map);
 
			var current;
			var markers = new L.MarkerClusterGroup();
			for (var i = 0; i < geodaten.length; i++) {
				
				var current = geodaten[i];

				L.marker([current.latitude, current.longitude]).addTo(map)
					.bindPopup(current.name);
				markers.addLayer(L.marker([current.latitude, current.longitude]));
			}
			map.addLayer(markers);

Habe ich etwas falsch gemacht? In “geodaten” stecken meine ganzen Punkte.

Vielen Dank für Eure Bemühungen im Voraus.

fox_bw

Hallo,

ich habe eine Karte mit monentan ca. 7000 Ortsmarkierungen in Baden-Württemberg (Anzahl ansteigend). Das ist ziemlich unübersichtlich. Ich bin auf die Variante mit den Clustern aufmerksam geworden. Ich habe versucht dies in meinen Quellcode einzubauen (siehe Code im folgenden):


			console.log(geodaten);
		
			var map = L.map('map').setView([48.7122900, 9.3087000], 11);
 
			L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
				attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
			}).addTo(map);
 
			var current;
			var markers = new L.MarkerClusterGroup();
			for (var i = 0; i < geodaten.length; i++) {
				
				var current = geodaten[i];

				L.marker([current.latitude, current.longitude]).addTo(map)
					.bindPopup(current.name);
				markers.addLayer(L.marker([current.latitude, current.longitude]));
			map.addLayer(markers);
			}

Muss ich hier noch etwas einbinden? CSS-Datei oder ähnliches? Muss ich die leaflet.markerCluster-Dateien installieren? Ich benutze momentan die Online-Karte von OSM habe also keine lokale OSM-Version. Außerdem lade ich die Geodaten aus meiner Datenbank.

Über jegliche Hilfe wäre ich dankbar.
Falls Ihre weitere Informatonen benötigt, dann bitte kurz melden.

fox_bw

Du hast doch sicherlich diese readme durchgearbeitet, oder? Dort beantwortet sich z.B. die Frage, ob du noch CSS (und leaflet.markerCluster) Dateien einbinden musst.
Leider hast du hier ja nicht mehr dazu geschrieben, was nicht geht, bzw. was dir fehlt … im anderen Thread hast du ja wenigstens noch erwähnt, dass überhaupt keine Marker und nur die blanke Karte angezeigt wird.

Guck mal hier rein, kannst du wahrscheinlich mehr oder weniger so kopieren:

http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html

Ach ja, die gleiche Frage gleich 2x in verschiedenen Threads zu posten ist nicht so wirklich hilfreich.

Guten Abend Harald Hartmann,

vielen Dank für deine Antwort.
Ich habe die Readme gerade erste gefunden und gelesen. Für mich liest sich diese Anleitung aber so, als ob ich die “leaflet.markercluster” installieren muss. Bisher bin ich davon ausgegangen dass ich nichts installieren muss. Wenn ich etwas installieren muss ist da ja lokal und die Leaflet-Karte benutze ich online. Das passt für nicht zusammen. Deshalb meine Frage, ob ich etwas installieren muss oder ob ich nur darauf referenzieren muss?

An meiner Anzeige hat sich bisher nichts geändert; kein Marker wird dargestellt. Aber wie gesagt ich habe auch eben erst die Readme gefunden.

Vielen Dank für Eure Hilfe im Voraus.

fox_bw

Guten Abend mmd,

vielen Dank für deine Antwort.
Deinen Link habe ich gleich ausprobiert und bei mir eingefügt.

Mein Code sieht folgendemaßen aus:


<script>
			console.log(geodaten);

		var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
				maxZoom: 18,
				attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ'
			}),
			latlng = L.latLng(48.7122900, 9.3087000);

		var map = L.map('map', {center: latlng, zoom: 11, layers: [tiles]});

		var markers = L.markerClusterGroup();
		
		for (var i = 0; i < geodaten.length; i++) {
			var a = geodaten[i];
			var title = a[2];
			var marker = L.marker(new L.LatLng(a[15], a[16]), { title: title });
			marker.bindPopup(title);
			markers.addLayer(marker);
		}
		map.addLayer(markers);
</script>

In “geodaten” sind meine Daten aus der Datenbank enthalten.
Am Anfang meiner Datei habe ich die beiden Dateien noch eingefügt:


	<link rel="stylesheet" href="Leaflet.markercluster-master/dist/MarkerCluster.css" />
	<link rel="stylesheet" href="Leaflet.markercluster-master/dist/MarkerCluster.Default.css" />

Wenn ich nun die Datei ausfülle erscheinen weiterhin keiner Marker auf der Karte.
In der Konsole von Firefox steht der Fehler:

“TypeError: L.markerClusterGroup is not a function”

Kann mir an dieser Stelle jemand weiterhelfen?

fox_bw

P.S.: Sorry für den 2. Thread. Ich dachte, dass meine weitere Frage nicht mehr zum 1. Thread passte.

leaflet.markercluster ist ein Plugin für leaflet. Und diese müssen normalerweise lokal installiert werden.

Gruss
walter

Mach in deinem Browser die Console auf (FF: SHIFT STRG K) und lass das Teil laufen. Dann siehst du alle Laufzeitfehler.

Gruss
walter

Und wo hast du das Javascript für das Clustern eingebunden?

Guten Abend wambacher,

vielen Dank für die Antworten.
Ich habe die Konsole in FF gestartet und da kommt eben dieser Fehler:

TypeError: L.markerClusterGroup is not a function[Weitere Informationen] karte-baustelle-alle-osm-cluster.php:60569:17
http://localhost/Projektverwaltung/geo/karte-baustelle-alle-osm-cluster.php:60569:17

fox_bw

Guten Abend,

hatte die


	<script src="../dist/leaflet.markercluster-src.js"></script>

vergessen.

Nun erscheinen die Fehlermeldungen in der FF Konsole:

ReferenceError: L is not defined[Weitere Informationen] leaflet.markercluster-src.js:10:1
http://localhost/Projektverwaltung/geo/Leaflet.markercluster-1.0.4/dist/leaflet.markercluster-src.js:10:1
http://localhost/Projektverwaltung/geo/Leaflet.markercluster-1.0.4/dist/leaflet.markercluster-src.js:6:2
TypeError: L.markerClusterGroup is not a function[Weitere Informationen] karte-baustelle-alle-osm-cluster.php:60570:17
http://localhost/Projektverwaltung/geo/karte-baustelle-alle-osm-cluster.php:60570:17

fox_bw

Wenn L not defined ist, kann die Cluster-Lib auch nicht auf L zugreifen (L wie Leaflet). Du hast die Bibliotheken wahrscheinlich in falscher Reihenfolge geladen oder dein Code wird ausgeführt, bevor die nötigen Bibliotheken geladen sind.

Versuche, den Code hier http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html nachzuvollziehen. Die Source kannst du dir mit Rechtsklick → “Seitenquelltext anzeigen” anzeigen lassen.

Bitte versuche zu verstehen, warum was da steht, wo es steht und was zu welchem Zeitpunkt ausgeführt wird.

Hallo dooley,

vielen Dank für Deine Hinweise.
Es war tatsächlich ein eingebundenes Script nicht an der richtigen Stelle.

Jetzt taucht bei mir die Fehlermeldung auf, dass etwas mit den Koordinaten für die Zentriierung der Karte nicht stimmt:

Error: Invalid LatLng object: (NaN, NaN) leaflet.js:6:13622
o.LatLng http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js:6:13622
http://localhost/Projektverwaltung/geo/karte-baustelle-alle-osm-cluster.php:60575:26

Mein Code sieht an der Stelle folgendermaßen aus:


latlng = L.latLng(48.7122900, 9.3087000);

Der Code in deinem genannten Beispiel sieht so aus:


latlng = L.latLng(-37.82, 175.24);

Außer dass es weniger Nachkommastellen sind, kann ich keinen Unterscheid erkennen. Auch wenn ich die weiteren Nachkommastellen entferne erscheint die selbe Fehlermeldung.
Was ist hier anders?

fox_bw

Ich frage mich, ob nicht einer deiner Marker-Werte “leer” ist, also keine numerische lat/lon-Werte hat. Das könnte zu diesem Fehler führen.

Ist die Zeile hier:

wirklich die Zeile die du oben genannt hast, oder vielleicht doch die folgende?


new L.LatLng(a[15], a[16])

Nein, er sieht so aus:

var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
				maxZoom: 18,
				attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ'
			}),
			latlng = L.latLng(-37.82, 175.24);

Das ist etwas anderes, als Du hier zeigst.

Du solltest dich wirklich bemühen, zu verstehen, was Du an welcher Stelle warum machst, anstatt blind herumzuprobieren und wenn etwas wieder nicht funktioniert, an Hand von Fehlermeldungen (immerhin) und aus dem Zusammenhang gerissenen Codeschnipseln uns hier raten zu lasen, was Du nicht richtig abkopiert hast.