I'm facing an issue with displaying an icon marker image in my Vue2-Leaflet and Quasar project. Instead of the desired image, I am seeing a broken image icon and encountering a 404 error in the console. Despite researching various solutions, I was able to resolve the problem using Leaflet.js and Quasar, but not with vue2-Leaflet and Quasar. Here is a snippet of my map code:
<l-map style="height: 1000px" :zoom="zoom" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-geo-json :geojson="geojson"></l-geo-json>
<l-marker v-for="marker in markers" :key="marker.id" :visible="marker.visible" :draggable="marker.draggable" :lat-lng="marker.position" :icon = "marker.icon"></l-marker>
</l-map>
And this is how I've structured my JavaScript:
markers: [
{ id: "m1", position : {lat:34.586956, lng:-82.238054}, tooltip: "tooltip for marker3", draggable: true, visible: true, icon: this.defaultIcon },
{ id: "m2", position : {lat:34.409676, lng:-82.246337}, tooltip: "tooltip for marker4", draggable: true, visible: true, icon: this.defaultIcon }
],
defaultIcon: L.icon({
iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png',
shadowUrl: 'http://leafletjs.com/examples/custom-icons/leaf-shadow.png',
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}),
I attempted to follow a similar example provided at https://jsfiddle.net/Boumi/z3bmc1ex/1/, but still encountered issues with broken images and the following errors:
GET https://static.neshan.org/sdk/leaflet/1.4.0marker-icon.png 404
GET https://static.neshan.org/sdk/leaflet/1.4.0marker-shadow.png 404
I also experimented with the following approach:
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';
let DefaultIcon = L.icon({
iconUrl: icon,
shadowUrl: iconShadow,
iconSize: [24,36],
iconAnchor: [12,36]
});
L.Marker.prototype.options.icon = DefaultIcon;
This method resolved the issue when using Leaflet.js and Quasar, but not in vue2-leaflet.js and Quasar. Any suggestions or guidance would be greatly appreciated. Thank you.