Vue2-leaflet marker not showing

Question

<template>
  <l-map
    style='height: 500px'
    :center='center'
    :zoom='zoom'
  >
    <l-tile-layer
      :url='url'
      :attribution='attribution'
    >
      <l-marker :lat-lng="test">
        <l-tooltip :options="{ permanent: true, interactive: true }">
          <div>
            I am a tooltip
          </div>
        </l-tooltip>
      </l-marker>
    </l-tile-layer>
  </l-map>
</template>

<script>
import L from 'leaflet';
import {
  LMap, LTileLayer, LMarker, LTooltip,
} from 'vue2-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'),
});

export default {
  data() {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      center: L.latLng(47.41322, -1.219482),
      test: L.latLng(47.41322, -1.219482),
      zoom: 12,
      userLocation: false,
      userCoords: false,
    };
  },
  mounted() {
    if (!('geolocation' in navigator)) {
      return;
    }
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        this.userCoords = L.latLng(pos.coords.latitude, pos.coords.longitude);
        this.userLocation = true;
        this.center = this.userCoords;
      },
      (err) => {
        console.log(err);
      },
    );
  },
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LTooltip,
  },
};
</script>

Here is my code, at the moment the marker and the tooltip are not showing at all. The console is displaying no errors and I'm at a loss for what to do.

According to the docs there is an issue with markers not showing but from the other problems I've read it seems that the marker is invisible and the popup/tooltip will still display if the marker is invisible. I'm am just getting nothing and can't see an issue with the code.

I've also tried using a custom marker image but that gives the same result. Nothing

Answer 1

The Marker component is not supposed to be a child of the Tile Layer, as shown in the examples of Vue2-Leaflet, but a child of the Map (or of a Layer Group):

https://vue2-leaflet.netlify.app/examples/simple.html

    <l-map
      :zoom="zoom"
      :center="center"
    >
      <l-tile-layer
        :url="url"
        :attribution="attribution"
      />
      <l-marker :lat-lng="withTooltip">
        <l-tooltip>
          <div>
            I am a tooltip
          </div>
        </l-tooltip>
      </l-marker>
    </l-map>