Not fully rendering Map and markers

[ximet]

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?

[KoRiGaN]

Hi @ximet,

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

import "leaflet/dist/leaflet.css"

Hope this helps,

Mickaël

[ximet]

@KoRiGaN I added this styles, and have the same issue

[KoRiGaN]

Hi @ximet,

Do you have a project where I can see/reproduce this issue? Very hard to tell what's going wrong here without reproducing it.

[nwpuhmz]

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

[KoRiGaN]

Closing this issue as no comment for 3 weeks, @ximet if you still have this issue feel free to reopen it.

Micka

[martinnaughton]

I have the exact same issue. I didnt have an issue until I did a big update since christmas. It might have been the new 1.0.1 version. Same issue in 1.0.1 and 1.0.1.

Some tiles show and are in different orders. Tried debugging it but does not show up any errors.

When I include the css file then now tiles show. There might be a conflict some where. import "leaflet/dist/leaflet.css";

Vue2Leaflet: 1.0.1 and Leaflet.js: 1.3.1. This is a basic project with just vue2 leaflet added. https://github.com/martinnaughton/leafletbasic

I am I missing some in the setup?

[ambrt]

Same here as @martinnaughton above.

[ambrt]

I found that adding @import 'http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css'; instead @import 'leaflet/dist/leaflet.css renders the map correctly.

[ambrt]

TL;DR: height of map must be in pixels,em or vh not in %

I found the solution.

First add to main.js:

import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

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

then the thing is that height of map must be in pixels,em or vh.

 <l-map ref="map"
                      :zoom="zoom"
                      :center="center"
                      style="height:200px;">
                      <l-tile-layer :url="url"
                        :attribution="attribution"></l-tile-layer>
                      <l-marker :lat-lng="marker"></l-marker>
</l-map>

[martinnaughton]

I can confirm that fixed the issue when doing both changes.

Not sure how the example works then with version 1.0.2? https://github.com/KoRiGaN/Vue2Leaflet/blob/master/examples/src/components/Simple.vue

[sp00x]

Does anyone by chance know how to get the markers working when using codesandbox.io ? The 'require' statements to patch things up are resolving to the content of the full images..

TypeError Failed to execute 'fetch' on 'Window': Failed to parse URL from �PNG (png data here)

[merigold]

In my case fix this: @import 'leaflet/dist/leaflet.css and add this to component

mounted() {
        this.$refs.map.mapObject._onResize();
    }

[psr1981]

I made it work by doing these two changes -

1) added style="height:800px" in 2) added "import 'leaflet/dist/leaflet.css" in component.

[RamizSami]

Hey, I am still getting this same issue even after importing CSS. I am trying the code from here: https://github.com/KoRiGaN/Vue2Leaflet/blob/master/examples/src/components/Simple.vue. How can I fix this?

[DonNicoJs]

This is usually the result of missing or not properly imported CSS. How are you importing the CSS? Can you provide us with code or even better a code pen? @RamizSami

[RamizSami]

Hey @lordfuoco this is my vue file: https://dpaste.de/YNAd

[DonNicoJs]

@RamizSami Hi! So

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

Your style is scoped, your import is going to be scoped, and since leaflet is not part of your component the css is not going to reach it.

Solution: if is okay remove scoped from the style block. If is not okay import the css in the js -> import "leaflet/dist/leaflet.css";

[RamizSami]

Hey thanks! It worked after removing 'scoped'

[DonNicoJs]

Closing this since is solved

[ady642]

For me it was a problem of height of the map. I put height:inherit and it works

[billalouaali]

leaflet inside vuetify component

<l-map ref="map" v-resize="onResize" :zoom="zoom" :center="center">
   <l-tile-layer :url="url"></l-tile-layer>
   <l-marker :lat-lng="center"></l-marker>
</l-map>

methods: {
   onResize() {
   this.$refs.map[0].mapObject._onResize();
   },
}

problem solved for me

[mlstoppa]

Removing any height and width expressed in percentage worked for me too. I talked too early: sometimes it works, sometimes it doesn't. I can't make it stable one way or the other.

[uchedotphp]

i noticed the Vue2Leaflet doesnt render well with Tailwindcss in the project

[AlanGreyjoy]

Anyone else having this problem with vuetify?

[lordjack]

I found that adding @import 'http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css'; instead @import 'leaflet/dist/leaflet.css renders the map correctly.

This problem solved for me too

[Laxisss]

i tried everything and cannot make this work.

i tried adding import 'leaflet/dist/leaflet.css'; to component, to main.js... i tried adding @import 'http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css'; too App.vue style without scoped i tried using style="height:800px;" in l-map component i tried using a class in l-map component and using height property in css with px, vh ... I tried using onResize but got a Cannot read properties of undefined (reading '_onResize')

i don't know what to do... i'm not using vue 2, i'm using vue3 with this package

EDIT : i did it, honestly i don't know how... i cleaned every tests i made and imported the css as the very first import of the component. i don't know if that's it but it worked...

[sajadabs]

i tried everything and cannot make this work.

i tried adding import 'leaflet/dist/leaflet.css'; to component, to main.js... i tried adding @import 'http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css'; too App.vue style without scoped i tried using style="height:800px;" in l-map component i tried using a class in l-map component and using height property in css with px, vh ... I tried using onResize but got a Cannot read properties of undefined (reading '_onResize')

i don't know what to do... i'm not using vue 2, i'm using vue3 with this package

EDIT : i did it, honestly i don't know how... i cleaned every tests i made and imported the css as the very first import of the component. i don't know if that's it but it worked...

same issue

[paulhuynhdev]

It was not fully loaded might be due to rendering problems. In my case, I tried to set timeout to load the map component after 2 seconds, then it could show the map as expected.

Map.vue

  <div class="main">
    <div
      class="map"
      v-if="isMapReady"
    >
      <l-map
        :zoom="zoom"
        :center="center"
      >
        <l-tile-layer
          :url="url"
          :attribution="attribution"
        ></l-tile-layer>
        <l-marker :lat-lng="markerLatLng"></l-marker>
      </l-map>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      isMapReady: false,
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 13,
      center: [10.799547, 106.712026],
      markerLatLng: [51.504, -0.159],
    };
  },
  created() {
    this.initializeMap();
  },
  mounted() {},
  methods: {
    initializeMap() {
      setTimeout(() => {
        this.isMapReady = true;
      }, 2000);
    },
  },
};
</script>

<style lang="scss" scoped>
.main ::v-deep {
  .map {
    height: 66vh;
  }
}
</style>

[gjae]

TL;DR: height of map must be in pixels,em or vh not in %

I found the solution.

First add to main.js:

import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

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

then the thing is that height of map must be in pixels,em or vh.

 <l-map ref="map"
                      :zoom="zoom"
                      :center="center"
                      style="height:200px;">
                      <l-tile-layer :url="url"
                        :attribution="attribution"></l-tile-layer>
                      <l-marker :lat-lng="marker"></l-marker>
</l-map>

This work for me, thanks!