How do I set a custom marker icon in Quasar using Vue2-Leaflet?

Question

I'm having problems displaying an icon marker image using vue2-Leaflet and Quasar. What gets displayed is a broken image and a 404 in the console. I have read close to all of the workarounds and did get it fixed using Leaflet.js and Quasar but not using vue2-Leaflet and Quasar. My map code is:

  <l-map style="height: 1000px" :zoom="zoom" :center="center">
  <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
  <l-geo-json :geojson="geojson"></l-geo-json>
  <l-marker v-for="marker in markers" :key="marker.id" :visible="marker.visible" :draggable="marker.draggable" :lat-lng="marker.position"  :icon = "marker.icon"></l-marker>
  </l-map>

and my JavaScript is:

markers: [
                { id: "m1", position : {lat:34.586956, lng:-82.238054}, tooltip: "tooltip for marker3", draggable: true, visible: true, icon: this.defaultIcon },
                { id: "m2", position : {lat:34.409676, lng:-82.246337}, tooltip: "tooltip for marker4", draggable: true, visible: true, icon: this.defaultIcon }
            ],

 defaultIcon: L.icon({
        iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png',
        shadowUrl: 'http://leafletjs.com/examples/custom-icons/leaf-shadow.png',
        iconSize:     [38, 95],
        shadowSize:   [50, 64],
        iconAnchor:   [22, 94],
        shadowAnchor: [4, 62],
        popupAnchor:  [-3, -76]
      }),

I was trying to follow the example at https://jsfiddle.net/Boumi/z3bmc1ex/1/

but I still get a broken image and

  GET https://static.neshan.org/sdk/leaflet/1.4.0marker-icon.png 404
  GET https://static.neshan.org/sdk/leaflet/1.4.0marker-shadow.png 404

I have also tried:

import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

    let DefaultIcon = L.icon({
    iconUrl: icon,
    shadowUrl: iconShadow,
    iconSize: [24,36],
    iconAnchor: [12,36]
});

L.Marker.prototype.options.icon = DefaultIcon;

which fixed it using Leaflet.js and Quasar but not in vue2-leaflet.js and Quasar.

I'm open for suggestions. Thanks

How do I set a custom marker icon in Quasar using Vue2-Leaflet?

0 Answers0