Within this code snippet, I initially utilized data[key].category to represent the corresponding icon as a marker. However, my intention is to switch to Font Awesome icons for a more lightweight runtime experience in instances where multiple icons may need to be loaded as markers.
var Cofee= Leaflet.icon({
iconUrl: '/img/Coffee.png',
shadowUrl: '/img/pale-shadow.png',
iconSize: [34, 49],
shadowSize: [49, 49],
iconAnchor: [5, 62],
shadowAnchor: [4, 62],
popupAnchor: [12, -30]
});
var Store= Leaflet.icon({
iconUrl: '/img/Store.png',
shadowUrl: '/img/pale-shadow.png',
iconSize: [34, 49],
shadowSize: [49, 49],
iconAnchor: [5, 62],
shadowAnchor: [4, 62],
popupAnchor: [12, -30]
});
..
..
..
this.Getlatlng(currentlatlng, 9000).then(data => {
for (var key in data) {
Leaflet.marker(data[key].location, { icon: data[key].category })
.addTo(this.map).bindPopup('<h4>'+data[key].caption+'</h4>');
markers.push([data[key].location.lat,data[key].location.lng]);
}