I'm creating a contextmenu in leaflet that is dynamically created according to the region of the map that was clicked (basically it displays the features next to the click). The menu is created using popup.
Question: I need to call a function passing "value" object as parameter when user clicks on image
My Code:
proximos = queryFeatures(e.latlng, 1)
var contentHtml = ''
var tipo_icon = ''
proximos.forEach(function (value, index) {
contentHtml = contentHtml + "<div class='container_menu'><div class='item_contextmenu_img'>"
**// call function with parameters on click this img:**
contentHtml = contentHtml + "<img id=dst_" + index + " src={% static 'icons/icon_add_map.svg'%} class='add_icon' width='15' height='15'></div>"
if (value.tipo == 'DMSCoord') {
tipo_icon = "{% static 'icons/icon-gps-location.svg'%}"
}
else if (value.tipo == 'airport') {
tipo_icon = "{% static 'icons/userpoint_Airport.svg'%}"
} else if (value.tipo == 'waypoint') {
tipo_icon = "{% static 'icons/userpoint_waypoint.svg'%}"
} else if (value.tipo == 'VOR') {
tipo_icon = "{% static 'icons/VOR.png'%}"
}
contentHtml = contentHtml + "<div class='item_contextmenu_img'><img src=" + tipo_icon + " width='15' height='15'></div>"
contentHtml = contentHtml + "<div class='item_contextmenu_txt'>" + value.txtname + "</div></div>"
})
var popup = L.popup()
.setLatLng(e.latlng)
.setContent(contentHtml)
.openOn(map);
});