I'm currently in the process of changing the marker icon for individual markers on my OpenStreetMap.
mapIconsReinit(L) {
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.imagePath = ''
L.Icon.Default.mergeOptions({
iconRetinaUrl: require('@/assets/img/map_markers/default/marker-icon-2x.png'),
iconUrl: require('@/assets/img/map_markers/default/marker-icon.png'),
shadowUrl: require('@/assets/img/map_markers/default/marker-shadow.png'),
});
},
getMarkerIcon(L, color) {
return L.divIcon({
iconRetinaUrl: require('@/assets/img/map_markers/marker-icon-2x-' + color + '.png'),
iconUrl: require('@/assets/img/map_markers/marker-icon-' + color + '.png'),
shadowUrl: require('@/assets/img/map_markers/marker-shadow.png'),
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
})
}
The first function is functioning correctly with paths such as '@/...', however, the second one is not.
The default marker appears to be working fine:
L.marker([marker.lat, marker.lng]).addTo(_context.map)
but when attempting to use a custom marker:
L.marker([marker.lat, marker.lng], {icon: this.getMarkerIcon(L, "red")}).addTo(_context.map)
All that shows up is a white square