ngyewch / svelte-leafletjs

Svelte component for leaflet.
https://ngyewch.github.io/svelte-leafletjs/
MIT License
97 stars 17 forks source link

markers with same custom icon render default icon instead #38

Open brennerm opened 8 months ago

brennerm commented 8 months ago

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.

ngyewch commented 8 months ago

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

brennerm commented 8 months ago

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