CODEWITHSUNDEEP
javascriptvuejs2leaflet
Nikola Schou
Nikola Schou

Reputation: 2466

Marker in leaflet JS does not load properly due to ERR_INVALID_URL error

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)

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')
});

Upvotes: 5

Views: 2300

Answers (2)

Displee
Displee

Reputation: 720

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,
});

Upvotes: 1

Yogesh Vadekar
Yogesh Vadekar

Reputation: 129

Providing some default values to 'icon' property of l-marker as below solved this issue for me. Still, it needs a default valid image path always which means that we must have at least one image or its valid URL available. BTW, that L object mentioned below is imported from 'leaflet' package.

defaultIcon = L.icon({
        iconUrl: require('../assets/logo.png'),
        shadowUrl: require('../assets/logo.png'),
    });

Upvotes: 0

Related Questions