svelte-leafletjs icon indicating copy to clipboard operation
svelte-leafletjs copied to clipboard

markers with same custom icon render default icon instead

Open brennerm opened this issue 4 months ago • 2 comments

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.

image

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.

brennerm avatar Feb 28 '24 22:02 brennerm

Hi, could you try v1.1.1 to see if it fixes your issue?

ngyewch avatar Mar 01 '24 05:03 ngyewch

@ngyewch Can confirm that this is fixed. Thank your for the quick support!

brennerm avatar Mar 01 '24 10:03 brennerm