I've been researching and trying out different solutions, but so far none of them have worked for me. My goal is to dynamically add a title, image, address, and name to popups on my leaflet map as data comes in. However, I'm experiencing some challenges with this task.
Below is the TypeScript code that I have:
refresh() {
this.artworkService.retrieveAll().then((artworkList) => {
this.artworkList = artworkList;
for (let artwork of this.artworkList) {
var popupInfo = "<span class='test'>" + artwork.name + "</span>" + "<br/>" + artwork.filename;
console.log(artwork.name);
L.marker([artwork.latitude, artwork.longitude], this.markerIcon).addTo(this.map)
.bindPopup(popupInfo);
}
});
}
In the code above, I tried wrapping the title inside a span element and attempted to apply some CSS styling to it, but unfortunately, it didn't work as expected. Any suggestions or tips on how to achieve this would be highly appreciated!