Vue2Leaflet: Defaul Marker Icon loaded though not used

Steps to Reproduce

I’m only using L.DivIcon in my project and not any IconUrl at all.

<l-marker v-for="location in locations" :key="location.id" :lat-lng="location.coordinates">   
  <l-icon class-name="marker-div">
    <div class="marker-icon>
        ***marker html code***
    </div>
 </l-icon>
</l-marker>

Expected Results

marker-icon.png and marker-shadow.png not getting loaded in browser and “marker icon fix” not necessary.

Actual Results

marker-icon.png and marker-shadow.png are still getting loaded and need to be fixed by

import { Icon } from 'leaflet';
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'),
});

which increased the size of the bundle and all browsers download unnecessarily the icons.

Browsers Affected

  • [ x ] Chrome
  • [ x ] Firefox
  • [ x ] Edge
  • [ x ] Safari 9
  • [ x ] Safari 8
  • [ x ] IE 11

Versions

  • Leaflet: v1.6.0
  • Vue: v2.6.11
  • Vue2Leaflet: v2.5.2

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 15 (6 by maintainers)

Most upvoted comments

@fbnlsr this is a different issue directly related to leaflet with webpack. At top of the FAQ are a few solutions linked. https://vue2-leaflet.netlify.app/faq/

import { Icon } from 'leaflet';
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'),
});

can be used to fix it, but this issue here is regarding using no default marker at all.

@vchrisb Thanks this actually helps! I will try to create a repro case and investigate