The marker icon is not displayed in a vue.js webpack template

[Abdelaziz18003]

Description

The marker icon can't be loaded properly when using v-marker as shown in the image below (in Actual results). As you can see the marker img element is on the DOM but the src url is not pointing to the correct image.

Steps to Reproduce

here the code I am using, it is almost the same as provided in the README

import vue2Leaflet from 'vue2-leaflet'
export default {
  components: {
    vMap: vue2Leaflet.Map,
    vTilelayer: vue2Leaflet.TileLayer,
    vMarker: vue2Leaflet.Marker
  }
}

<!-- show map -->
<div style="height: 300px;>
  <v-map :zoom="12" :center="[location.lat, location.lon]">
    <v-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></v-tilelayer>
    <v-marker :lat-lng="[location.lat, location.lon]"></v-marker>
  </v-map>
</div>

Expected Results

The marker image get displayed properly

Actual Results

The marker image is on the DOM but is not displayed properly

Browsers Affected

I tested it just on these browsers

• Chrome
• Firefox

Versions

• Leaflet: v1.2.0
• Vue: v2.3.4
• Vue2Leaflet: v0.0.57

[psychosis448]

Issue is known.
Add the following to main.js

// eslint-disable-next-line  
delete L.Icon.Default.prototype._getIconUrl  
// eslint-disable-next-line  
L.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')  
})

That worked for me :)

[Abdelaziz18003]

Thanks that worked for me too

[KoRiGaN]

Hi @Abdelaziz18003,

This issue seems to be a duplicate of #28.
I'm closing this one and only keep 28 until a good / better solution is found.

Micka

[simenJohnsen]

I had to add ".default" after each of the required() files to make it work:

delete Icon.Default.prototype._getIconUrl;
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,
});

[anton-kazlouski]

@simenJohnsen thanks, I was struggling to find the solution.

Is there any explanation of a cause of the problem?

[adesousa]

In case of, this worked for me:

const { map, tileLayer, marker, icon } = await import(
      'leaflet/src/Leaflet'
)
const blueIcon = icon({
      iconUrl: '/img/front/geoloc/marker-icon.png',
      shadowUrl: '/img/front/geoloc/marker-shadow.png'
})
marker(props.marker, { icon: blueIcon }).addTo(_map)

[bokub]

Here is how to solve the problem with imports instead of require (if you use Vite for example):

import markerIconUrl from '/node_modules/leaflet/dist/images/marker-icon.png';
import markerIconRetinaUrl from '/node_modules/leaflet/dist/images/marker-icon-2x.png';
import markerShadowUrl from '/node_modules/leaflet/dist/images/marker-shadow.png';

L.Icon.Default.prototype.options.iconUrl = markerIconUrl;
L.Icon.Default.prototype.options.iconRetinaUrl = markerIconRetinaUrl;
L.Icon.Default.prototype.options.shadowUrl = markerShadowUrl;
L.Icon.Default.imagePath = '';