Not fully rendering Map and markers

Have the problem with map: not fully rendering Map.

My application work using vuejs-templates and vue-loader. And I found some problem with webpack and Vue2Leaflet, after that I add to my main.js next lines:

import L from 'leaflet';
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')
});

And after that, I have the same issue.

My component:

<template>
  <div>
    <l-map style="height: 90%" :zoom="zoom" :center="center">
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
      <l-marker :lat-lng="marker"></l-marker>
    </l-map>
  </div>
</template>

<script>
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';
export default {
  name: 'example',
  components: {
    LMap,
    LTileLayer,
    LMarker
  },
  data () {
    return {
      zoom:13,
      center: L.latLng(47.413220, -1.219482),
      url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution:'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      marker: L.latLng(47.413220, -1.219482),
    }
  },
  methods: {
    mounted() {
        setTimeout(function() { window.dispatchEvent(new Event('resize')) }, 250);
    }
  }
}
</script>

Result rendering map:

Question:

How it fix? @KoRiGaN do you have any ideas?

[nwpuhmz]

@ximet I added import "leaflet/dist/leaflet.css"; to my main.js ,then solved it.

[KoRiGaN]

Hi @ximet,

You need to import the css from leaflet into your project.

import "leaflet/dist/leaflet.css"

Hope this helps,

Mickaël