Infinite effect loop using the GeolocateControl component after 1.0.0

[dimitarnikolovv]

After updating to 1.0.0, I have noticed that the <GeolocateControl/> causes an infinite effect loop.

Example with problem:

<MapLibre
	onload={(e) => {...}}
	{bounds}
	{maxBounds}
	{zoom}
	{center}
	renderWorldCopies={false}
	onzoom={(e) => {...}}
	onmovestart={(e) => {...}}
	onmoveend={(e) => {...}}
	onclick={(e) => {...}}
	class="bg-background isolate h-full w-full"
	attributionControl={false}
	{style}
>
	<NavigationControl position="top-left" visualizePitch />

        <!-- THIS CAUSES INFINITE EFFECT LOOP -->
	<GeolocateControl position="top-left" />

	<ScaleControl position="bottom-left" />
	<FullScreenControl position="top-left" />

	{@render children?.()}
</MapLibre>

The error:

$effect(() => {
	control && mapCtx.map?.removeControl(control);
	control = new maplibregl.GeolocateControl(options);
	mapCtx.map?.addControl(control, position);
});

If <GeolocateControl position="top-left" /> is removed, there is no problem.

[ciscorn]

@dimitarnikolovv Thank you for the report!

However, I'm having trouble reproducing the issue. Perhaps the hidden code like onload={(e) => {...}} might be indirectly affecting it. Does the problem disappear if you remove those?

[ciscorn]

@dimitarnikolovv Also, does this issue occur with the latest version of Svelte 5 as well?

[dimitarnikolovv]

Perhaps the hidden code like onload={(e) => {...}} might be indirectly affecting it. Does the problem disappear if you remove those?

No, i have tested it, this gives the same results:

<MapLibre {style}>
	<NavigationControl position="top-left" visualizePitch />

	<!-- THIS CAUSES INFINITE EFFECT LOOP -->
	<GeolocateControl position="top-left" />

	<ScaleControl position="bottom-left" />
	<FullScreenControl position="top-left" />

	{@render children?.()}
</MapLibre>

Also, does this issue occur with the latest version of Svelte 5 as well?

I am using svelte 5.35.4 / @sveltejs/kit 2.22.2

Also here is the full Map.svelte component:

<script lang="ts">
	import {
		FullScreenControl,
		GeolocateControl,
		MapLibre,
		NavigationControl,
		ScaleControl
	} from 'svelte-maplibre-gl';
	import { type Snippet } from 'svelte';
	import type * as maplibregl from 'maplibre-gl';

	type Props = {
		bounds?: maplibregl.LngLatBoundsLike | undefined;
		maxBounds?: maplibregl.LngLatBoundsLike | undefined;
		zoom?: number | undefined;
		center?: maplibregl.LngLatLike | undefined;
		use3DonZoom?: boolean;
		onLoad?: (e: maplibregl.MapLibreEvent) => void;
		onZoom?: (e: maplibregl.MapLibreEvent) => void;
		children?: Snippet;
		onClick?: ((e: maplibregl.MapMouseEvent) => void) | undefined;
		onMoveStart?: ((e: maplibregl.MapLibreEvent) => void) | undefined;
		onMoveEnd?: ((e: maplibregl.MapLibreEvent) => void) | undefined;
	};

	let {
		bounds = undefined,
		maxBounds = undefined,
		zoom = 10,
		center = undefined,
		onZoom,
		onLoad,
		use3DonZoom = false,
		children,
		onClick,
		onMoveStart,
		onMoveEnd
	}: Props = $props();

	let style = $state('https://tiles.openfreemap.org/styles/positron');

	function handle3D(e: maplibregl.MapLibreEvent) {
		const map = e.target;
		if (use3DonZoom) {
			if (map.getZoom() > 14.5 && style !== 'https://tiles.openfreemap.org/styles/liberty') {
				style = 'https://tiles.openfreemap.org/styles/liberty';
				map.setPitch(30);
			} else if (
				map.getZoom() <= 14.5 &&
				style !== 'https://tiles.openfreemap.org/styles/positron'
			) {
				style = 'https://tiles.openfreemap.org/styles/positron';
				map.setPitch(0);
			}
		}
	}
</script>

<MapLibre
	onload={(e) => {
		try {
			if (onLoad) onLoad(e);
			handle3D(e);
		} catch (error) {
			console.error('Map load error:', error);
		}
	}}
	{bounds}
	{maxBounds}
	{zoom}
	{center}
	renderWorldCopies={false}
	onzoom={(e) => {
		try {
			if (onZoom) onZoom(e);
			handle3D(e);
		} catch (error) {
			console.error('Map zoom error:', error);
		}
	}}
	onmovestart={(e) => {
		try {
			if (onMoveStart) onMoveStart(e);
		} catch (error) {
			console.error('Map move start error:', error);
		}
	}}
	onmoveend={(e) => {
		try {
			if (onMoveEnd) onMoveEnd(e);
		} catch (error) {
			console.error('Map move end error:', error);
		}
	}}
	onclick={(e) => {
		try {
			if (onClick) onClick(e);
		} catch (error) {
			console.error('Map click error:', error);
		}
	}}
	class="bg-background isolate h-full w-full"
	attributionControl={false}
	{style}
>
	<NavigationControl position="top-left" visualizePitch />

	<!-- THIS CAUSES INFINITE EFFECT LOOP -->
	<!-- <GeolocateControl position="top-left" /> -->

	<ScaleControl position="bottom-left" />
	<FullScreenControl position="top-left" />

	{@render children?.()}
</MapLibre>

[ciscorn]

@dimitarnikolovv Much thanks. I'll investigate further. Later.

[ciscorn]

I confirmed the issue with Svelte 5.35.0 or later.

[ciscorn]

@dimitarnikolovv This should be fixed in 1.0.1. Thank you!

[ciscorn]

Note: This might be related to:

• fix: update indirectly-affected bindings on mutation sveltejs/svelte#16200