I am trying to add markers to my Leaflet map but they don't show up.
In the console I see an network error: net::ERR_INVALID_URL for a http request loading an image like this:
Request URL: data:image/png;base64,iVBORw0KGgoAA.....SUVORK5CYII=")marker-icon-2x.png
If I remove that last part of the URL
)marker-icon-2x.png
I end up with a proper base64 encoded image. So I guess the question is what that marker-icon is added in the end of the URL.
More background:
L.marker(coords).bindPopup(someName).addTo(this.map)
My map renders correctly and I can draw polygons on it and more.
I'm using Vue and Vue2Leaflet
I have imported the leaflet.css
I have tried to include these lines of code without effect:
delete Icon.Default.prototype._getIconUrl
Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png')
});
This works:
import L from 'leaflet';
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png').default,
iconUrl: require('leaflet/dist/images/marker-icon.png').default,
shadowUrl: require('leaflet/dist/images/marker-shadow.png').default,
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With