L.Icon.Default errors using vue-loader and webpack | Duplicated Marker

System Information | Affected Versions

leaflet: 1.0.3
vue2-leaflet: 0.0.47
vue: 2.2.6
chrome: 58.0.3029.81 (64-bit)

Description

In v.0.0.47, I have noticed an issue with the Marker component being duplicated/shadowed when rendered in the map.

Code

<v-map :zoom=15 :center="[organization.latitude, organization.longitude]">
    <v-tilelayer :token="mapboxAPIKey" url="https://api.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token={token}"></v-tilelayer>
    <v-marker :lat-lng="{'lat': organization.latitude, 'lng': organization.longitude}">
        <v-popup :content="organization.name"></v-popup>
    </v-marker>
</v-map>

edit: fixed code copy paste error

Fix

If I remove the transform: translate3d(395px, 200px, 0px) style from the img.leaflet-marker-icon, then the issue is resolved.

Edit: This change seems to move the “clickable” marker out of the pane, so it cannot be used as the trigger for a popup. The incorrect “fat” marker is the one that remains. I will look into other possible “full” resolutions.

Attachments

[bytebrain]

I’ve got it working by deleting the _getIconUrl prototype first.

Here is my complete working component:

<template>
  <div>
    <v-map class="mini-map" :zoom=13 :center="[47.413220, -1.219482]">
      <v-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></v-tilelayer>
      <v-marker :lat-lng="[47.413220, -1.219482]"></v-marker>
    </v-map>
  </div>
</template>

<script>
import L from 'leaflet'
import Vue2Leaflet from 'vue2-leaflet'

// Build icon assets.
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.imagePath = ''
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('../assets/markers/marker-icon-2x.png'),
  iconUrl: require('../assets/markers/marker-icon.png'),
  shadowUrl: require('../assets/markers/marker-shadow.png')
})

export default {
  components: {
    'v-map': Vue2Leaflet.Map,
    'v-tilelayer': Vue2Leaflet.TileLayer,
    'v-marker': Vue2Leaflet.Marker
  }
}
</script>

<style lang="scss">
@import "~leaflet/dist/leaflet.css";

.mini-map {
  width:100%;
  height:250px !important;
}
</style>

[jteppinette]

Okay, I found where the Leaflet people are discussing this issue with webpack: https://github.com/Leaflet/Leaflet/issues/4968

They proposed this solution:

delete L.Icon.Default.prototype._getIconUrl;

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