Vue2Leaflet is not placing custom Icon in the map

Question

I have tried several examples but result is broken image or default icon

    <l-marker
      v-for="marker in getFilteredVehicles"
      :lat-lng="marker.latLng"
      :key="marker.rtoNo"
      @click="openVehicleStatus(marker)"
    >
    <l-icon
      :icon-size="[20,40]"
      :icon-anchor="[22, 94]"
      icon-url="src/assets/icons/map-icons/d-green-car.png" >
    </l-icon>
   </l-marker>

Even I have tried using L.icon() in l-marker but it produced broken image

Template

    <l-marker
      v-for="marker in getVehicles"
      :lat-lng="marker.latLng"
      :key="marker.rtoNo"
      :icon="getIcon()"
      @click="openVehicleStatus(marker)"
    >

Script

getIcon() {
  return L.icon({ 
    iconUrl: "src/assets/icons/map-icons/d-green-car.png",
    shadowUrl: "src/assets/icons/map-icons/d-green-car.png", 
    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the po
  });
}

Try this: https://stackoverflow.com/a/50515442/8283938 – Falke Design Jan 21 '21 at 08:48 — Falke Design, Jan 21 '21 at 08:48

score 0 · Answer 1 · answered Jan 25 '21 at 12:36

0

Following code worked for me.

<l-marker
  v-for="marker in getFilteredVehicles"
  :lat-lng="marker.latLng"
  :key="marker.rtoNo"
  @click="openVehicleStatus(marker)"
>
    <l-icon
        :icon-size="[40,40]"
        :icon-anchor="[22, 94]"
        icon-url="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/map-marker-icon.png"
    />
</l-marker>

And please check whether you have imported LIcon properly as below.

import {LIcon} from "vue2-leaflet";

export default {
    components: {
        LIcon
    }
}

answered Jan 25 '21 at 12:36

gihandilanka

585
6
14

2

yes it is working with remotely located maker, But it is not working in static assets which is placed inside the project – Rajath Jan 27 '21 at 03:57
I tried it for local image too. It also working for me. Just check whether that marker image can be accessible as public in browser. This is the prop value `icon-url="/assets/map-marker-icon.png"` and this the public url `http://localhost:8000/assets/map-marker-icon.png`. – gihandilanka Jan 27 '21 at 04:39
I tried using public URL `http://localhost:8082/assets/map-icons/car-green.svg` it loaded home page not the icon – Rajath Jan 27 '21 at 04:51
I think issue can be the type of the image. You have used `svg` marker. Just try with a `png` image. – gihandilanka Jan 27 '21 at 04:55
and when I tried with `` it is showing the image – Rajath Jan 27 '21 at 07:21

Vue2Leaflet is not placing custom Icon in the map

1 Answers1