Leaflet Legend Map undefined

Question

Ich habe versucht, meiner Flugblattkarte eine Legende hinzuzufügen. Ich weiß, ich sollte sehr einfach sein und ich habe es mehrmals versucht. Allerdings kann ich die Legende nicht auftauchen lassen.

Wenn ich das Legenden-Snippet in eines meiner anderen Projekte kopiere/einfüge, bekomme ich die Legende auf meinem Bildschirm.

Ich lief Firebug zusammen mit meinem Faltblatt Karte, um zu sehen, was das Problem war:

Wie Sie van oben sehen ‚Karte‘ ist nicht definiert. Dies ist nur der Fall, wenn ich meinen Code legend.addTo(map) hinzufügen. Wenn ich das Snippet lösche, läuft der ganze Code einwandfrei und ich erhalte keinen 'Map'-Fehler mehr (obwohl ich immer noch die Variable' map 'an mehreren Stellen verwende).

Es scheint, dass es ein Problem mit der Datei leaflet.src.js gibt, aber ich möchte damit nicht umgehen.

Ich habe alle meine Code in der Hoffnung, dass jemand das Problem finden. Ich arbeite jetzt seit ein paar Tagen an der Legende und ich werde langsam verzweifelt.

// globale variabelen 
    var map, 
     tab1, 
     fields = ["id", "x", "y", "keten", "name"], 
     autocomplete = []; 

    $(document).ready(initialize); 

    function initialize(){ 
     $("#map").height($(window).height()); 

     map = L.map("map", { 
      center: L.latLng(53.21587, 6.556676), 
      zoom: 12 
     }); 

     var tileLayer = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map); 

     getData(); 

    }; 

    function getColor(keten) { 
     return keten == "MacDonalds" ? '#800888' : 
       keten == "Subway"  ? '#969696' : 
       keten == "KFC"   ? '#081d58' : 
       keten == "BurgerKing" ? '#006837' : 
       keten == "Dominos"  ? '#fed976' : 
       keten == "NYPizza"  ? '#fed976' : 
              '#252525' ; 
     } 

    function getData(){ 
     $.ajax("php/getData.php", { 
      data: { 
       table: "fastfood_groningen", 
       fields: fields 
      }, 
      success: function(data){ 
       mapData(data); 
      } 
     }) 
    }; 

       map.eachLayer(function(layer){ 
        //if niet de tile layer 
        if (typeof layer._url === "undefined"){ 
         map.removeLayer(layer); 
        } 
       }); 

       // Aanmaken van een geojson container object 
       var geojson = { 
        "type": "FeatureCollection", 
        "features": [] 
       }; 

       var dataArray = data.split(", ;"); 
       dataArray.pop(); 

      console.log(dataArray); 

       dataArray.forEach(function(d){ 
        d = d.split(", "); 

        var feature = { 
         "type": "Feature", 
         "properties": {}, //properties object container 
         "geometry": JSON.parse(d[fields.length]) //parse geometry 
        }; 

        // Hiermee definieer je de lengte van 1 feature die in dit geval gelijk is aan de lengte van velden. 
        for (var i=0; i<fields.length; i++){ 
         feature.properties[fields[i]] = d[i]; 
        }; 

        // De feature namen worden toegevoegd waarna de list wordt ge-autocomplete 
        if ($.inArray(feature.properties.keten, autocomplete) == -1){ 
         autocomplete.push(feature.properties.keten); 
        }; 

        geojson.features.push(feature); 
       }); 
      console.log(geojson); 

       //activatie van de autocomplete on keten input 
       $("input[name=keten]").autocomplete({ 
        source: autocomplete 
       }); 


      window["mapDataLayer"] = L.geoJson(geojson, { 
        pointToLayer: function (feature, latlng) { 
         var markerStyle = { 
          fillColor: getColor(feature.properties.keten), 
          color: "#FFF", 
          fillOpacity: 0.5, 
          opacity: 0.8, 
          weight: 1, 
          radius: 8 
         }; 

         return L.circleMarker(latlng, markerStyle); 
        }, 
        onEachFeature: function (feature, layer) { 
         var html = ""; 
         for (prop in feature.properties){ 
          html += prop+": "+feature.properties[prop]+"<br>"; 
         }; 
         layer.bindPopup(html); 
        } 
       }).addTo(map); 

    }; 

     // Custom layerpanel --WORK IN PROGRESS! 
      $("input[value=mapDataLayer]").click(function(event) { 
       layerClicked = window[event.target.value]; 
        if (map.hasLayer(layerClicked)) { 
         map.removeLayer(layerClicked); 
        } 
        else{ 
         map.addLayer(layerClicked); 
        } ; 
      }); 


    function submitQuery(){ 
     //Haal de data van het formulier op 
     var formdata = $("form").serializeArray(); 

     var data = { 
      table: "fastfood_groningen", 
      fields: fields 
     }; 
     formdata.forEach(function(dataobj){ 
      data[dataobj.name] = dataobj.value; 
     }); 

     $.ajax("php/getData.php", { 
      data: data, 
      success: function(data){ 
       mapData(data); 
      } 
     }) 
    }; 

    ; 

//legend controls and info 
var legend = new L.control({position: 'bottomright'}); 

legend.onAdd = function (map) { 
    var div = L.DomUtil.create('div', 'info legend'), 
     grades = [0.00001, 0.7300001, 2.9900001, 6.700001], 
     labels = ['Legend (Value = CO2 per Capita)'], 
     from, to; 

    labels.push('<i style="background: #eeedd8"></i> ' + 'No Data Available'); 

    for (var i = 0; i < grades.length; i++) { 
     from = grades[i]; 
     to = grades[i + 1]; 

     labels.push('<i style="background:' + getColor(from + '1') + '"></i> ' + from + (to ? '&ndash;' + to : '&ndash;43.893036')); 
    } 

    div.innerHTML = labels.join('<br>'); 
    return div; 
}; 

legend.addTo(map); 

Answer 1

Aus irgendeinem Grund legend.addTo(map) läuft sehr früh, obwohl es die letzte Zeile meines Codes zu sein.

Ich habe den folgenden Code zu überprüfen, ob eine bestimmte Funktion (initialisieren) beendet ist, verwendet vor der Ausführung legend.addTo(map):

$.when($.ajax(initialize())).then(function() { 
    legend.addTo(map); 
});