svelte-leafletjs
svelte-leafletjs copied to clipboard
markers with same custom icon render default icon instead
Hey @ngyewch, thanks for building this awesome wrapper for leafletjs.
I'm currently trying to render multiple markers with a custom icon and came across this strange result.
So only one marker ends up with the correct icon.
Below is my code.
<script>
import icon from '$lib/assets/icon.svg'
</script>
<LeafletMap options={mapOptions}>
<TileLayer url={tileUrl} options={tileLayerOptions} />
{#each markers as marker}
<Marker latLng={marker}>
<Icon iconUrl={icon} options={{
iconSize: [41, 41],
iconAnchor: [20, 41],
popupAnchor: [1, -34],
tooltipAnchor: [16, -28],
}}/>
</Marker>
{/each}
</LeafletMap>
The markers array is reactive and gets loaded async when the components mounts. It seems like on the first render each marker has the correct icon. But as the next marker loads, the previous one fall back to the default icon.
Let me know if I can help you debug this in any way.
Hi, could you try v1.1.1 to see if it fixes your issue?
@ngyewch Can confirm that this is fixed. Thank your for the quick support!