Broşür haritasındaki efsane olarak özel gösterge/resim

Question

Özel simgelerle işaretleyiciler olarak bir harita oluşturdum. Kodu ve sonucu jsfiddle'ımda görebilirsiniz: https://jsfiddle.net/marielouisejournocode/x24stb0m/

Resmi açmak için "normal" gösterge kodunu değiştirmeyi denedim ama js ve broşür için yeniyim ve gerçekten bunu yapamam.

ben onu oluşturmak için photoshop kullanmak istiyorum, ama nasıl bir görüntü ile harita bindirmek için:

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); 

Şimdi ne yapmak istiyorum bu örnekte olduğu gibi, simgeleri açıklayan bir efsane eklemek olduğunu Harita yayıldığında garip davranmıyor, ancak broşürde normal bir efsane gibi davranıyor mu?

Marie'yi, Çok teşekkür ederim

Sadece gibi dizide bilgi eklemek gerek

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"]; 

Ve

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

Örneğin:

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/