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)
@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/
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