vue-marker not displaying on map and map not fully rendering

[qualisign]

Description

Steps to Reproduce

1. installed Vue2Leaflet via npm
2. created a component called Simple with the following contents (just copied the Simple.vue example and added the style import)

<template>
  <div class="simple">
    <div id="top_div" style="height: 100%">
      <v-map :zoom="zoom" :center="center" style="height: 1000px; width: 1000px">
        <v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>
        <v-marker :lat-lng="marker"></v-marker>       
      </v-map>
    </div>
  </div>
</template>

<script>
 import Vue2Leaflet from 'vue2-leaflet';
 
export default {
  name: 'simple',
  components: {
    'v-map': Vue2Leaflet.Map,
    'v-tilelayer' :Vue2Leaflet.TileLayer,
    'v-marker': Vue2Leaflet.Marker
  },
  data () {
    return {
        zoom: 13,
        center: [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),
    }
  }
}
</script>

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

Expected Results

I expect to see the basic map with marker from the example jsfiddle.

Actual Results

The map appears as a large gray box with a small section with rendered map tiles. My problem looks identical to the one described in #81 , but I do include the leaflet css import.

What is strange is that when I resize the window, the map loads as it should, but the marker does not show up. I see in the html that the marker is loaded, however:

Browsers Affected

• [x ] Chrome
• [x ] Firefox
• Edge
• Safari 9
• Safari 8
• IE 11

Versions

• Leaflet: v1.2.0
• Vue: v2.5.2
• Vue2Leaflet: v0.0.55

[azurelogic]

I've had some similar issues. The marker image issue I solved using info from these threads:
PaulLeCam/react-leaflet#255
Leaflet/Leaflet#4849
Leaflet/Leaflet#4968

Basically, sounds like webpack is jacking up the embedded image URLs in the CSS. Throwing this at the top of your main.js may help:

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

I've gotten to the point that everything renders after the user resizes but I can't figure out why I'm getting grey space before that...

[azurelogic]

I ended up with a hack that helped get everything to render correctly as far as the resize issue goes.

mounted() {
      setTimeout(function() { window.dispatchEvent(new Event('resize')) }, 250);
}

This works down to 200 ms. After that the hack fails. Seems to be some sort of race condition. I tested slower bandwidths and they work fine.

[qualisign]

@azurelogic

Both those suggestions worked, thanks for the help.

[KoRiGaN]

Hi @qualisign,

The icon issue is well known. Leaflet and Webpack don't play well together. You can see the issue #28 and the pull request in Leaflet to fix this.
@azurelogic give the right way to fix this issue in the meantime.

The other issue is the map tiles not loading properly.
@azurelogic seems right to force the view to be redrawn.
I can't reproduce and I would like to know how you reproduce it.
How do you set your map container size?
If you resize the map container manually, you need to call map.invalidateSize().

Mickaël

[azurelogic]

The problem for me is that I'm using it along with Vuetity, which includes flexbox-based grid components. I have some tricks to size it as a square, but even before I added that on top I was having issues. I wish I had a simple example to illustrate.

[KoRiGaN]

Never experienced any issue like this on my tests.
It seems to me that this issue is a problem between Leaflet and flexbox based sizing.
I should add this hack into a tips and tricks section in the Readme.

What do you think?

Micka

[azurelogic]

Can't hurt to suggest it. Like I said though, I'm using it inside of flexbox. On top of that, I'm binding the height of the map or its container to another property that's computed from the width of a column and stuff. Can't say that everything I'm doing is a good idea, but the whole site is pretty responsive. That's the difficulty with Leaflet to begin with though, it seems.

[gkatsanos]

Same problem here. Vuetify / Flexbox + gray area showing up.

[KoRiGaN]

I gave a try to Vuetify / Flexbox.

I started a Vue project added Vuetify and used this layout.
I added Vue2Leaflet and created a map component.
Added this map component in the main area of the baseline layout and leaflet CSS as a script tag in the index.html file.
Works fine.

The issue is that if the map container size change Leaflet doesn't know about it and doesn't load tiles to cover the new size of the container.
It appends in my test when closing the left menu, the maps get bigger a part of the map is now displayed on the right-hand side but no tile is displayed => grey area.

I'm not sure what your issue is as I can't really reproduce it but I think your map container is initialized with a small size(0px ?). The size is increased later but the map doesn't adapt like in my issue so you end up having a mostly grey area.

How to fix it :
The tricky part is to detect when the size change, the only two options I found are:

• Wait for Resize Observer to be implemented in browsers and use it. At the moment no current version of browser implements it. It will work with Chrome 64.
• Use a library called CSS Element Queries to detect changes using the ResizeSensor JS Class, debounce the events, and use Leaflet invalidateSize to force leaflet to adapt to the current size.

The second seems to be the only viable choice.

What do you guys think?

[brandondeval]

In the console if you type:

$('img.leaflet-marker-icon.leaflet-zoom-animated.leaflet-interactive').src

you might get something like this :

"data:image/png;base64,iVBORw0K[ ...................]UVORK5CYII=")marker-icon-2x.png"

you will notice that the extra double quotes are screwing up the get request.
try going into the DOM and removing this porting of the string and see if a marker appears.

")marker-icon-2x.png

leave the last double quote

[brandondeval]

As for the issue with sizing issue in Vuetify:
add a class on top of the v-container element :

.i {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
z-index: 0;
}

then go into the vuetify.css and rip out all of the media queries for the .container class. I think its on lines 9301 to 9313.