Mach in deinem Browser die Console auf (FF: SHIFT STRG K) und lass das Teil laufen. Dann siehst du alle Laufzeitfehler.
Gruss
walter
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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, Points © 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.
Guten Tag kartler175,
entschuldigt bitte, ich werde mich bemühen.
Ja, es ist die falsche Stelle die ich Euch genannt habe. Es gibt tatsächlich ein Stück weiter die Bezeichnung “LatLng”:
var marker = L.marker(new L.LatLng(a[15], a[16]), { title: title });
Ich verstehe es so, dass in meinem Array “a” etwas nicht korrekt übergeben wird.
Ich bin auf der Fehlersuche. Ich melde mich, falls ich nicht mehr weiterkomme.
Danke trotzdem für Eure Mithilfe.
fox_bw
So ist es.
Zum debuggen kannst du dir die Werte in der Javascript-Knsole ausgeben lassen:
try {
var marker = L.marker(new L.LatLng(a[15], a[16]), { title: title });
} catch (error) {
console.log('>a15< ist vom Typ >%s< mit Inhalt >%s<', typeof a[15], a[15]);
console.log('>a16< ist vom Typ >%s< mit Inhalt >%s<', typeof a[16], a[16]);
console.log(error);
}
Durch das try-catch-Konstrukt wird in der Konsole nur etwas ausgegeben, wenn ein Fehler innerhalb des try’s auftritt. Aber Achtung: dadurch wird der weitere Ablauf des Scripts nicht unterbrochen, sprich, was danach kommt, wird ausgeführt. Auch wenn jetzt Marker und Cluster zu sehen sind, musst du zwingend in der Konsole nachschauen, ob die Fehlermeldungen weiterhin kommen. Ansonsten fehlen dir Marker auf der Karte.
Oder gleich den eingebauten Debugger verwenden 
ist für einen JS-Newbie natürlich etwas heftig.
Gruss
walter
Hallo zusammen,
vielen Dank für Eure Hinweise.
Wenn ich eines hier gelernt habe, dann ist es die Konsole von FF viel mehr zu nutzen. Ich programmiere bereits seit Jahren HTML/PHP aber habe die Konsole bisher nicht genutzt. Aber ich muss feststellen, dass diese sehr hilfreich ist. Auch den Debugger habe ich mir angeschaut und versucht zusammen mit der Konsole zu nutzen.
Ich bin nun einen Schritt weiter und bin an einem Punkt angelangt wo ich Eure Hilfe benötige. Anbei mein kompletter Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../styles.css" type="text/css" />
<link rel="stylesheet" href="Leaflet.markercluster-1.0.4/dist/MarkerCluster.css" />
<link rel="stylesheet" href="Leaflet.markercluster-1.0.4/dist/MarkerCluster.Default.css" />
<script src="Leaflet.markercluster-1.0.4/dist/leaflet.markercluster-src.js"></script>
<title>Karte</title>
</head>
<body>
<div id="map" style="width:98%; height:900px; margin-left:auto; margin-right:auto"></div>
<script type="text/javascript">
// Variable / Array zur Speicherung aller Infos
var geodaten = [];
<?php
// Verbindung mit DB-Server und der DB herstellen
require($_SERVER['DOCUMENT_ROOT']."/Projektverwaltung/includes/server.inc");
$Verbindung = mysqli_connect($host,$user,$pass,$db)
or die ("Fehler: ".mysqli_errno($Verbindung).", ".mysqli_error($Verbindung));
// Zeichensatz explizit setzen
mysqli_query($Verbindung,"SET NAMES 'utf8'");
// Abfrage formulieren
$sql = "SELECT * FROM mark_ort_geo WHERE (inaktiv=0 AND lat>0 AND lng>0)";
if ($result = mysqli_query($Verbindung, $sql)) {
// Zugriff auf alle zurückgelieferten Zeilen
while ($row = mysqli_fetch_row($result)):
?>
// *** JavaScript ***
// Hier füllen wir unser JavaScript-Array mit den einzelnen
// Einträgen aus der Datenbank
// [JSON-Objekt (JavaScript Object Notation)]
// echo '<b>'.$row[1].'</br>'.$row[3].'</b><br/>'.$row[4].' '.$row[5].'<br/>'.$row[6].' '.$row[7].'<br/><a href=details.php?ID='.$row[0].'>>>> Weitere Infos</a> ';
geodaten.push({
'name': "<?php echo $row[1]; ?>",
'latitude': '<?php echo $row[15]; ?>',
'longitude': '<?php echo $row[16]; ?>'
});
// *** Ende JavaScript ***
<?php
endwhile;
}
// Aufräumen
mysqli_free_result($result);
mysqli_close($Verbindung);
?>
console.log(geodaten);
var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, Points © 2012 LINZ'
}),
latlng = new 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];
console.log(geodaten[i]);
console.log(a.name);
try {
var marker = L.marker(new L.LatLng([a.latitude], [a.longitude]), { title: a.name });
console.log('>a.latitude< ist vom Typ >%s< mit Inhalt >%s<', typeof [a.latitude], [a.latitude]);
console.log('>a.longitude< ist vom Typ >%s< mit Inhalt >%s<', typeof [a.longitude], [a.longitude]);
console.log('>a.name< ist vom Typ >%s< mit Inhalt >%s<', typeof [a.name], [a.name]);
} catch (error) {
console.log('>a.latitude< ist vom Typ >%s< mit Inhalt >%s<', typeof [a.latitude], [a.latitude]);
console.log('>a.longitude< ist vom Typ >%s< mit Inhalt >%s<', typeof [a.longitude], [a.longitude]);
console.log('>a.name< ist vom Typ >%s< mit Inhalt >%s<', typeof [a.name], [a.name]);
console.log(error);
}
console.log(a.name);
marker.bindPopup(a.name);
markers.addLayer(marker);
}
map.addLayer(markers);
</script>
</body>
</html>
Die Konsole liefert folgende Werte zurück:
Object { name: “30-07”, latitude: “48.641956”, longitude: “9.474610” }
30-07
a.latitude< ist vom Typ >object< mit Inhalt >48.641956<
a.longitude< ist vom Typ >object< mit Inhalt >9.474610<
a.name< ist vom Typ >object< mit Inhalt >30-07<
30-07
TypeError: markers is undefined[Weitere Informationen]
http://localhost/Projektverwaltung/geo/karte-baustelle-alle-osm-cluster.php:95375:4
Im Debugger wird bei der Fehlermeldung die Zeile
markers.addLayer(marker);
markiert.
An dieser Stelle bin ich jetzt etwas ratlos. Kann mir jemand weiterhelfen?
fox_bw
a) Find the difference:
var markers = L.markerClusterGroup();
var markers = L.MarkerClusterGroup();
Hint: So ziemlich alle Leaflet-Funktionsnamen gibt es mit Groß- oder Kleinbuchstaben als 1stem Zeichen. Wenn GROß, dann mit new instantiieren, wenn klein, dann ohne new.
b) Du möchtest Latitude und Longitude zur weiteren Verwendung in Leaflet als Nummern (genauer als Floats) behandelt wissen. Mit deiner Objekt-Notation werden das Strings, nicht Floats. Wie das zu ändern ist, überlasse ich dir zum nachlesen.
In der Firefox-Entwicklerkonsole gibts unten eine Eingabezeile wo du on the fly Javascript-Code eingeben kannst. Kannst du da per Handeingabe einen Marker deinem Cluster zufügen?
Ansonsten: Bau dir ein Minimalbeispiel nur aus Javascript, gucke wie es funktioniert und setze es dann Stück für Stück größer um.
Hättest ihm ja gerne noch dazuschreiben können, dass es sich um statische und nicht-statische Methoden handelt, die es genauso auch in PHP gibt, und dass man statische Methoden (Großgeschrieben) direkt aus einer Klasse aufrufen kann ohne diese mit new instanzieren zu müssen
Im Fall “Leaflet” eher nicht, da ist das kleingeschriebene einfach nur eine Wrapper-Funktion, das ist schon ein Unterschied zu statischen Methoden in PHP:
export var scale = function (options) {
return new Scale(options);
};
https://github.com/Leaflet/Leaflet/blob/master/src/control/Control.Scale.js
Oooh Gott … warum nur?! … und nein, darauf will ich gar keine Antwort haben 
Hallo zusammen,
vielen, vielen Dank für Eure Antworten.
Ich habe meine Fehler analysiert, im Netz Funktionen nachgelesen und den Quellcode umgeschrieben.
Und…
es funktioniert.
Vielen Dank nachmals an alle die geschrieben haben.
fox_bw
Ist doch klar: Kaum macht man es richtig, funktionierts
Könntest du uns bitte das Ergebnis präsentieren? Ein Link wäre nett.
Gruss
walter
Hallo wambacher,
leider kann ich keinen Link präsentieren, da es sich um eine lokale Installation eines XAMPP-Servers handelt.
Aber ich könnte hier ein Bild einstellen.
fox_bw