<DivIcon> does not render when <Marker> has dynamic latLng

[kauaicreative]

The <DivIcon> renders as expected when I pass hard coded values to <Marker latLng={[500,500]}> But <DivIcon> does not render at all when I pass dynamic values from #each to <Marker latLng={[location.lat, location.lng]}> Does anyone have any ideas why this is the case and how to fix it or possible work arounds. I have hit a wall.

Hard coded latLng works:

{#each locationArr as location, ii}
    {#if location.meta.lat && location.meta.lng && location.meta.key}
        <Marker latLng={[500,500]}>
            {console.log([location.meta.lat, location.meta.lng]+' '+ii), ''}
            <DivIcon>
                <div style='background: #ff00ff; color: #fff; font-size:20px; width: 40px; height:40px'>
                    123
                </div>
            </DivIcon>
        </Marker>
    {/if}
{/each}

Dynamic latLng does not work:

{#each locationArr as location, ii}
    {#if location.meta.lat && location.meta.lng && location.meta.key}
        <Marker latLng={[Number(location.meta.lat), Number(location.meta.lng)]}>
            {console.log([location.meta.lat, location.meta.lng]+' '+ii), ''}
            <DivIcon>
                <div style='background: #ff00ff; color: #fff; font-size:20px; width: 40px; height:40px'>
                    123
                </div>
            </DivIcon>
        </Marker>
    {/if}
{/each}

[mugu-fatman]

Same happens to me as well

[kauaicreative]

@mugu-fatman I was able to fix this by modifying the Marker.svelte component.

Change line 34 if (icon) marker.setIcon(icon);