कस्टम किंवदंती/छवि लीफलेट मानचित्र में किंवदंती के रूप में

Question

मैंने मार्कर के रूप में कस्टम आइकन के साथ एक नक्शा बनाया। आप यहां कोड और परिणाम मेरे जेएसफ़िल्ड में देख सकते हैं: https://jsfiddle.net/marielouisejournocode/x24stb0m/

मैंने तस्वीर को रखने के लिए "सामान्य" किंवदंती कोड बदलने की कोशिश की लेकिन मैं जेएस और पुस्तिका के लिए नया हूं और वास्तव में इसे बाहर नहीं कर सकता।

मैं फ़ोटोशॉप का उपयोग यह बनाने के लिए चाहते हैं, लेकिन कैसे एक छवि के साथ नक्शा ओवरले करने के लिए:

var legend = L.control({position: 'bottomright'}); 

legend.onAdd = function (map) { 

var div = L.DomUtil.create('div', 'info legend'), 
    grades = [1795, 1945, 1960, 1980, 2000], 
    labels = []; 

for (var i = 0; i < grades.length; i++) { 
    div.innerHTML += 
     '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' + 
     grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+'); 
} 

return div; 
}; 

legend.addTo(map); 

क्या मैं अब क्या करना चाहते हैं एक किंवदंती है कि इस उदाहरण में जैसे आइकन बताते सम्मिलित है जब मानचित्र फैलता है तो यह अजीब तरीके से व्यवहार नहीं करता है लेकिन यह पुस्तिका में सामान्य किंवदंती की तरह व्यवहार करता है?

आपको बहुत बहुत धन्यवाद, मारी

Answer 1

तुम बस की तरह सरणी में जानकारी डालने की जरूरत है:

grades = ["Car", "ball"], 
labels = ["http://datentaeter.de/wp-content/uploads/2016/06/flag_de.png","http://datentaeter.de/wp-content/uploads/2016/06/flag_de.png"]; 

और

grades[i] + (" <img src="+ labels[i] +" height='50' width='50'>") +'<br>'; 

उदाहरण:

var legend = L.control({position: 'bottomright'}); 

legend.onAdd = function (map) { 

    var div = L.DomUtil.create('div', 'info legend'), 
     grades = ["Car", "ball"], 
     labels = ["http://datentaeter.de/wp-content/uploads/2016/06/flag_de.png","http://datentaeter.de/wp-content/uploads/2016/06/flag_de.png"]; 

    // loop through our density intervals and generate a label with a colored square for each interval 
    for (var i = 0; i < grades.length; i++) { 
     div.innerHTML += 
      grades[i] + (" <img src="+ labels[i] +" height='50' width='50'>") +'<br>'; 
    } 

    return div; 
}; 

legend.addTo(map); 

https://jsfiddle.net/x24stb0m/24/