Legend Getting Added Again on Map Initialization Leaflet

I've been trying to add together a legend to my leaflet map. I know i should exist very easy and i've tried it multiple times. However, I can't go the legend to evidence upwards.

When i copy/paste the legend snippet in one of my other projects, i DO get the legend on my screen.

I ran Firebug together with my leaflet map to meet what the trouble was:

As you van meet higher up, 'map' is undefined. This is only the case if i add legend.addTo(map) to my code. If i delete the snippet, the whole lawmaking runs perfectly and i become no more than 'map' fault (even though i nonetheless employ the variable 'map' in multiple places).

It seems in that location is a problem with the leaflet.src.js file, but i practice not want to mess with that.

I included all of my code in the hopes of someone finding the problem. I've been working on the legend for a couple of days now and I am starting to go desperate.

                      // globale variabelen     var map,         tab1,         fields = ["id", "x", "y", "keten", "name"],          autocomplete = [];      $(certificate).set up(initialize);      role initialize(){         $("#map").elevation($(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}/{10}/{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' ;         }      office getData(){         $.ajax("php/getData.php", {             information: {                 table: "fastfood_groningen",                 fields: fields             },             success: function(information){                 mapData(data);             }         })     };                  map.eachLayer(role(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 = information.split(", ;");                 dataArray.popular();              console.log(dataArray);                  dataArray.forEach(part(d){                     d = d.split(", ");                       var feature = {                         "type": "Feature",                         "backdrop": {}, //properties object container                         "geometry": JSON.parse(d[fields.length]) //parse geometry                     };                      // Hiermee definieer je de lengte van i feature die in dit geval gelijk is aan de lengte van velden.                     for (var i=0; i<fields.length; i++){                         feature.backdrop[fields[i]] = d[i];                     };                      // De feature namen worden toegevoegd waarna de listing wordt ge-autocomplete                      if ($.inArray(feature.properties.keten, autocomplete) == -1){                         autocomplete.push button(feature.backdrop.keten);                     };                      geojson.features.button(feature);                 });             panel.log(geojson);                  //activatie van de autocomplete on keten input                 $("input[proper noun=keten]").autocomplete({                     source: autocomplete                 });               window["mapDataLayer"] = Fifty.geoJson(geojson, {                     pointToLayer: function (feature, latlng) {                         var markerStyle = {                              fillColor: getColor(characteristic.backdrop.keten),                             color: "#FFF",                             fillOpacity: 0.5,                             opacity: 0.viii,                             weight: 1,                             radius: 8                         };                          return L.circleMarker(latlng, markerStyle);                     },                     onEachFeature: function (characteristic, layer) {                         var html = "";                         for (prop in feature.properties){                             html += prop+": "+feature.backdrop[prop]+"<br>";                         };                         layer.bindPopup(html);                     }                 }).addTo(map);      };         // Custom layerpanel --Work IN PROGRESS!             $( "input[value=mapDataLayer]" ).click(function( event ) {                 layerClicked = window[consequence.target.value];                     if (map.hasLayer(layerClicked)) {                         map.removeLayer(layerClicked);                     }                     else{                         map.addLayer(layerClicked);                     } ;             });       function submitQuery(){         //Haal de data van het formulier op         var formdata = $("class").serializeArray();          var data = {             table: "fastfood_groningen",             fields: fields         };         formdata.forEach(part(dataobj){             information[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 = role (map) {     var div = Fifty.DomUtil.create('div', 'info legend'),         grades = [0.00001, 0.7300001, two.9900001, 6.700001],         labels = ['Legend (Value = CO2 per Capita)'],         from, to;      labels.push('<i style="background: #eeedd8"></i> ' + 'No Information Available');      for (var i = 0; i < grades.length; i++) {        from = grades[i];        to = grades[i + 1];          labels.push('<i style="background:' + getColor(from + 'i' ) + '"></i> ' + from + (to ? '&ndash;' + to : '&ndash;43.893036'));     }      div.innerHTML = labels.join('<br>');     return div; };  fable.addTo(map);                  

shultzabte1965.blogspot.com

Source: https://stackoverflow.com/questions/36132267/leaflet-legend-map-undefined

Share this post