how to getMarkers as the same as angular leaflet directive leafData.getMarkers()

[Leo-lin214]

hi, I want to get the markers, and set the icon's stye. In Angular, I can do this with that:

// angular
leafletData.getMarkers().then((marker) => {
  marker._icon.style[L.DomUtil.TRANSFORM] = marker._icon.style[L.DomUtil.TRANSFORM].split("rotate(")[0];
  marker._icon.style[L.DomUtil.TRANSFORM] += 'rotate(' + marker.options.angle + 'deg)';
})

But in vue2leaflet, I have no idea to do this thing.

[nmezzopera]

@Andraw-lin why don't you set the icon at render time through the :icon prop on the l-marker component ?
At this point you can do anything with it and simply re-render the marker

Anyhow you can access the internal leaflet object by placing a ref on the l-marker component and then doing:

<l-marker ref="myMarker" />
this.$refs.myMarker.mapObject.getMarkers()

[Leo-lin214]

My idea is that there will be some js processing of the calculation style in the middle, and then dynamically change the style of the icon. So I hope to get the icon and set that style.

[nmezzopera]

I think this would work with your initial code:

<template>
  <l-marker ref="myMarker" />
</template>
<script>
this.$refs.myMarker.mapObject.getMarkers().then((marker) => {
  marker._icon.style[L.DomUtil.TRANSFORM] = marker._icon.style[L.DomUtil.TRANSFORM].split("rotate(")[0];
  marker._icon.style[L.DomUtil.TRANSFORM] += 'rotate(' + marker.options.angle + 'deg)';
})
</script>

Or by passing the icon to the component prop

[Leo-lin214]

Thanks! this.$refs.myMarker.mapObject also works for me

[nmezzopera]

Closing this, since I believe is resolved