Vue2leaflet: How to set custom Marker icon?

[fergardi]

How to set custom Marker icon?

[ffischer1984]

in <v-map>-tag:
<v-icondefault :image-path="path"></v-icondefault>
in your ts-file
components:{ 'v-icondefault': Vue2Leaflet.IconDefault}

look at examples/components/custompath.vue

[fergardi]

The answer was:

v-marker(:icon="icon")

Where icon is:

icon () {
  return L.icon({
    iconUrl: url,
    iconSize: [40, 40],
    iconAnchor: [20, 20]
  })
}

[insanity54]

95 has a good example of changing icons.

[bestian]

How do i set custom Marker icon in a \

[ffischer1984]

<v-map :zoom="zoom" :center="center">
         <v-marker v-for="item in markers" :key="item.key" :lat-lng="item.position" :icon="item.icon" :visible="true" v-on:l-click="onMarkerClick(item)"></v-marker>
</v-map>

The type of item.icon has to be L.icon (from leaflet)
Here is an example:

                    return L.icon({
                        iconUrl: 'src/assets/leaflet/marker-blue.svg',
                        shadowUrl: 'src/assets/leaflet/marker-shadow.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
                    });

[bestian]

It' not worked(Error)
My component is l-marker, not v-marker
Maybe the code will be different?
any solution, please help~

[ffischer1984]

Yeah it's old source Code from me. You have replace v with l. I'm not really sure why you're talking about l-maker. I think the webcomponent is l-marker with a r

[bestian]

yes, it's l-marker
how can i use custom icon on these components?

[ffischer1984]

hmmn there are two possibilities:

• your marker has false lat/lng coordinates (don't know what the
  method "countLatLng"
  really does) So look in your html-code if you can find the marker or use
  the vue-dev tools
• there is something false with you'r jsx-code? (I'm not an expert in jsx)

Bestian Tang 小巴 [e-mail] schrieb am Fr., 26. Okt. 2018 um
06:57 Uhr:

yes, it's l-marker
how do i use custom icon on these components?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/KoRiGaN/Vue2Leaflet/issues/42#issuecomment-433286467,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AHqlTkE9ERhjyqtilX6CZ_AhYqXDaLHsks5uopY9gaJpZM4NfXs9
.