JavaScript Leaflet - Marker werden nicht angezeigt

[Mandy89]

Hallo Leute,

vielleicht kann mir jemand von euch weiterhelfen:

Ich habe ein PHP-Formular erstellt, welches Daten an die Datenbank übergibt. Bei den Daten handelt es sich unter anderem um Koordinaten. Mit der Insert-Datei, denke ich, stimmt auch alles, da ich dort alle Daten sehen kann. Die Bus-Marker werden mir problemlos angezeigt, die Spielplatz-Marker jedoch nicht. Liegt es vielleicht am MarkerCluster?

<script language="javascript">
 var SWlat = 90.0;
 var SWlng = 90.0;
 var NElat = -90.0;
 var NElng = -90.0;
 var locSW, locNE;
 function init() {
   var myMap = L.map('map').setView([52.536111,13.203333], 13);
   L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
    maxZoom: 18
  }).addTo(myMap);
   var SpielplatzCluster = L.markerClusterGroup();
   var Spielplaetze = $.getJSON("insert.php", function(data) {
    for (var i = 0; i < data.length; i++) {
      var location = new L.LatLng(data[i].lat, data[i].lng);
      var notiz = data[i].notiz;
      var bild = data[i].bild;
      var bearbeiter = data[i].bearbeiter;

      var greenIcon = new L.Icon({
        iconUrl: 'playground.png',
        iconSize: [35, 35],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34]
      });

      var marker = new L.Marker(location, {
        title: Standort,
        icon: greenIcon
      });

      var list = "<p><br><b>" + 'notiz: ' + "</b>" +notiz + "<br><b>" + 'bearbeiter: '+ "</b>"+ bearbeiter + "</p>" ;
      marker.bindPopup(list);
      ;
      SpielplatzCluster.addLayer(marker);
      if (data[i].lat < SWlat) {SWlat = data[i].lat}
        if (data[i].lng < SWlng) {SWlng = data[i].lng}
          if (data[i].lat > NElat) {NElat = data[i].lat}
            if (data[i].lng > NElng) {NElng = data[i].lng}
          }
      });
   Spielplaetze.done(function() {
     locSW = new L.LatLng(SWlat, SWlng);
     locNE = new L.LatLng(NElat, NElng);
     mapBounds = L.latLngBounds(locSW, locNE);
     myMap.fitBounds(mapBounds);
   });
   myMap.addLayer(SpielplatzCluster);

   var BusIcon = L.icon({
    iconUrl: 'bus.png',
    iconSize: [32, 32]
  });

   var BusMarker = L.geoJson(false, {
    pointToLayer: function(feature, latlng) {
      var marker2 = L.marker(latlng, {
        icon: BusIcon
      });
    //popup shows NAME, ADDRESS, URL and opens the URL in a new window/tab
    marker2.bindPopup("<strong>" + feature.properties.name + "</strong><br/>" + feature.properties.fclass + "<br/></a>");
    return marker2;
  }
}).addTo(myMap);

   $.ajax({
    scriptCharset: "utf-8",
    contentType: "application/x-www-form-urlencoded; charset=utf-8",
    dataType: "json",
    url: "Busstationen.geojson",
    success: function(data) {
      $(data.features).each(function(key, data) {
        BusMarker.addData(data);
      });
    }
  }).error(function() {});

 }

Es wäre super, wenn sich das jemand anschauen könnte Ich sitze schon seit Tagen daran und komme einfach nicht drauf
LG

 

[mastaqz]

Hallo,

es wäre super, wenn du ein lauffähiges Beispiel zeigen würdest und nicht nur einen Schnippsel.

Die wenigsten Helfer, inklusive mir, haben Zeit & Lust, neben der Arbeit da jetzt noch ein HTML Grundgerüst und die Imports einzubauen, wenn du den Code eh schon verfügbar hast.

Am besten in Codesandbox, Codepen o.ä.

Grüße

 

[Mandy89]

Hallo,

danke, für die Antwort. Das verstehe ich natürlich.
Codepen unterstützt leider kein PHP und bei Codesandbox wird mir angezeigt, dass die Dateien zu groß sind. Gibt es noch eine andere Möglichkeit?

Grüße

 

[mastaqz]

Nimm am besten das PHP raus.
Du kannst dafür in Codesandbox eine json Datei erstellen, die die selbe Datenstruktur wie die Inhalte aus "insert.php" beinhaltet und diese dann "getJson" zur Verfügung stellen anstatt "insert.php".
Falls es viele Daten sind, nur ein paar einfügen.

Für den Rest der Karte benötigst du eigentlich ja nur einen Container für die Karte und die Imports wie Leaflet.

 

[Mandy89]

Hallo,

ich habe es jetzt versucht umzuschreiben. Hier der Code: https://codesandbox.io/s/v6jr767q55?fontsize=14

 

[mastaqz]

Entfern am besten mal alles, was nicht mit deinem ursprünglichen Problem zu tun hat,
das "Die Bus-Marker werden mir problemlos angezeigt, die Spielplatz-Marker jedoch nicht." hieß.

Das heißt "formular.html" und das ganze php und Datenbank- Zeug und mocke Daten,
so dass wir ein lauffähiges Beispiel haben.