Rendering 4000+ markers errors

[chillingpulsar]

🐛 Bug Report: Effect Update Depth Exceeded When Rendering 4000+ Map Markers

🎯 Objective

Trying to replicate the performance of OpenSky Network's map which renders 4000+ aircraft markers smoothly.

📚 Reference Documentation

Following the official svelte-maplibre-gl marker popup example.

🚨 Problem

When attempting to render 4000+ markers using the standard approach, the application crashes with a Svelte effect update depth exceeded error.

💻 Code Implementation

<MapLibre
	bind:map
	zoom={6}
	maplibreLogo={false}
	center={[121.774, 12.8797]}
	class="h-full"
	style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
>
	{#each Array(4000), i}
		<Marker
			lnglat={[generateRandomLngLat().longitude, generateRandomLngLat().latitude]}
			anchor="center"
			offset={[0, -10]}
		>
			{#snippet content()}
				<IconPlane class="size-8 text-red-500" style="transform: rotate(20deg)" />
			{/snippet}

			<Popup closeButton={false} offset={[0, -30]}>
				<!--Plane information-->
			</Popup>
		</Marker>
	{/each}
</MapLibre>

❌ Error Details

UpdatedAtError

chunk-EUD2U54Z.js?v=f18b6775:241 Uncaught (in promise) Svelte error: effect_update_depth_exceeded
Maximum update depth exceeded. This typically indicates that an effect reads and writes the same piece of state
https://svelte.dev/e/effect_update_depth_exceeded

🤔 Expected Behavior

The map should render 4000+ markers smoothly, similar to how OpenSky Network handles thousands of aircraft markers without performance issues.

🔍 Additional Context

• Framework: Svelte 5
• Map Library: svelte-maplibre-gl
• Browser: Brave, Chrome, Mozila
• Performance Target: Smooth rendering of 4000+ markers like OpenSky Network

💡 Potential Solutions Needed

• Performance optimization techniques for rendering large numbers of markers
• Alternative approaches to avoid the effect update depth issue
• Best practices for handling thousands of dynamic map markers in Svelte 5

🆘 Help Needed

Looking for guidance on:

1. How to optimize marker rendering for large datasets
2. Alternative patterns that don't trigger the effect update depth limit
3. Whether clustering or virtualization techniques should be used
4. Best practices from the svelte-maplibre-gl community for high-performance marker rendering