Vue.js: Leaflet-Marker is not visible

Question

I'm using vue.js together with Leaflet. Unfortunately the marker on the map is not visible, but the tooltip of the marker is visible. The location of the marker is set to London. The map is a component (Map.vue):

<template>
  <div></div>
</template>

<script>
  import L from 'leaflet';
  import 'leaflet/dist/leaflet.css';


  export default {
    name: 'test-map',
    mounted () {
      var map = L.map(this.$el).setView([51.5076, -0.1276], 4);
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        subdomains: ['a','b','c']
      }).addTo(map);

      var loc = [51.5076, -0.1276];
      var marker = L.marker(loc).addTo(map);
      marker.bindTooltip("Here is the marker");
    }
  }
</script>

<style scoped>
  div {
    height: 100%;
  }
</style>

And my App looks like that (App.vue):

<template>
  <div id="app">
    <test-map></test-map>
  </div>
</template>

<script>
import TestMap from './components/Map.vue'

export default {
  name: 'app',
  components: {
    TestMap
  }
}
</script>

<style scoped>
  #app {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
</style>

I really don't know what's wrong.

Answer 1

Seems like you have to require the pngs in your main.js ?

import Vue from 'vue'
import App from './App'

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

new Vue({
  el: '#main',
  template: '<App/>',
  components: { App }
});

Answer 2

I had a similar issue, I followed many tutorials in order to solve it but with no result

https://leafletjs.com/examples/custom-icons/ https://korigan.github.io/Vue2Leaflet/#/components/l-icon/

For my case (with a locally installed component) the solution consists of two steps :

1. Putting these lignes of code :

import { Icon }  from 'leaflet'
import 'leaflet/dist/leaflet.css'

// this part resolve an issue where the markers would not appear
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')
});

2. Use a "require" before the desired custom picture

 data: function() {
    return {
      icon: L.icon({
        iconUrl: require("relative_or_absolute_path"),
        iconSize: [38, 95],
        iconAnchor: [22, 94]
      })
    };
  }

I hope this will help someone :)

Answer 3

I had kind of the same issue too. Custom marker wouldn't show properly (everything else worked). Like I could have the tooltip/popup, so marker was selectable but invisible. Now I solved it by importing the png directly in the component. In case it could help.

Map.vue component

template

<l-marker>
    <l-icon :icon-url="customMarker"></l-icon>
</l-marker>

and in script:

import L from 'leaflet';
import {
    LMarker
    LIcon
} from 'vue2-leaflet';

// this is what was missing
import customMarker from '../yourDirectory/customMarker.png'

    // The following is the official VueLeaflet fix
    // to solve issue with default marker icon missing (webpack messing around)
    // https://vue2-leaflet.netlify.app/quickstart/#marker-icons-are-missing

    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'),
    });
    // End of fix

export default {
    data() {
          customMarker
    }
}