Does svelte-maplibre automatically center the map to accomodate an array of markers?

[jeromecc]

Hello!

With svelte-leafletjs I can feed the component with an array of coordinates and it will automagically center the map and set the zoom to show all markers. Does this feature exist in svelte-maplibre or should I calculate the center myself? Is there a package that could do this calculation for me?

Thanks.

[jeromecc]

I found the possibility to bound the map with an array of coordinates in the "fly to" example.

svelte-maplibre/src/routes/examples/controls/+page.svelte

Line 49 in 23d4bd2

map.fitBounds([

map.fitBounds([
    [-120, 50],
    [-70, 20],
])}

This is linked to a Control.

How could I make the map load within those bounds?

Thanks.

[0gust1]

You'll have to calculate the bounding box coordinates of your set of features, and then call fitBounds

https://turfjs.org/ does that very well (bounding box calculation)

https://turfjs.org/docs/api/bbox

[0gust1]

To see an example in the wild:
https://0gust1.github.io/svelte-local-gpx-viewer/

code: https://github.com/0gust1/svelte-local-gpx-viewer
and more specifically: https://github.com/0gust1/svelte-local-gpx-viewer/blob/main/src/lib/MapLibreLocalRoutes.svelte

[jeromecc]

Thanks for the tips.
I tried to adapt your code but I get an error when I try to get the map context:

TypeError: Cannot destructure property 'map' of '(0 , __vite_ssr_import_4__.getMapContext)(...)' as it is undefined.

getMapContext gets imported normally AFAIK, but I can't get this line of code to work:

const { map } = $derived(getMapContext());

I made sure my versions of everything (svelte, vite, vite-plugin-svelte) and my settings are the same as yours.
I'm using 1.0.0-next.12 while you use 1.0.0-next.8 though.

[jeromecc]

"Solved" by adding

export const ssr = false;
export const csr = true;

In +page.js

[0gust1]

Yes, the map instance can only exist at runtime in the browser, not at build time or server-side. The two exports you added force the rendering to be fully on client-side only.

An alternative (if server-side rendering needed, for webperf or SEO purpose) would have been to wrap the code in a if(browser){...} (see: https://svelte.dev/docs/kit/$app-environment#browser)

Glad if it helped! Consider closing the issue if you consider your problematic solved.

[jeromecc]

I'm not sure the issue is solved.
Here is how I made it work:

<script lang="ts">
  import { bbox } from "@turf/bbox";
  import { lineString } from "@turf/helpers";
    import { MapLibre, type Map } from 'svelte-maplibre';
    import { Control, ControlGroup, ControlButton, DefaultMarker, Marker, Popup } from 'svelte-maplibre';
    import * as openStreetMap from '$lib/MapLibre/style/openStreetMap.json';

    let map: Map = $state();
    const markerArray: Array<{
    lngLat: [number, number];
    label: string;
    name: string;
  }> = [
      {
        lngLat: [4.9453706, 43.926553],
        label: "MSP",
        name: "Maison de santé"
      },
      {
        lngLat: [4.9564806, 43.936553],
        label: "PHARMA",
        name: "Pharmacie"
      },
      {
        lngLat: [4.9373906, 43.946553],
        label: "PARAMED",
        name: "Cabinet paramédical"
      }
    ];
    const coordinates=markerArray.map(e=>e.lngLat);
    var line = lineString(coordinates);
    var bounds = bbox(line) as [number, number, number, number];
    
    $effect(() => {
		// console.log('bounding box', boundingBox);
		// test if bounding box is correct (array of numbers), because bbox can return [Infinity, Infinity, -Infinity, -Infinity]
		if (
			bounds &&
			bounds.every((coord) => Number.isFinite(coord))
		) {
			map.fitBounds(
        bounds,
        {padding: 40});
		}
	});
</script>
<MapLibre
    bind:map
    class="map"
    standardControls
    style={openStreetMap}
    attributionControl={false}
    {bounds}
    >
    <Control class="flex flex-col gap-y-2">
      <ControlGroup>
    <ControlButton
    onclick={() =>
      map.fitBounds(bounds)}
  >
    FIT
  </ControlButton>
  <ControlButton
    onclick={() =>
      map.fitBounds(
        bounds,
        {padding: 100}
      )
      }
  >
    PAD
  </ControlButton>
  </ControlGroup>
  </Control>
  {#each markerArray as { lngLat, label, name }}
  <!-- Unlike the custom marker example, default markers do not have mouse events,
  and popups only support the default openOn="click" behavior -->
  <DefaultMarker {lngLat} draggable>
    <Popup offset={[0, -10]}>
      <div class="text-lg font-bold">{name}</div>
    </Popup>
  </DefaultMarker>
{/each}
    </MapLibre>

  <style>
    :global(.map) {
      height: 500px;
    }
  </style>

No +page.js with ssr or csr directives are necessary with this code.

Using
const { map, loaded } = $derived(getMapContext());
did not cause error but it didn't work.
The function $effect did not trigger. The padding was not applied at first rendering.
It started working when I used bind:map on the component and this declaration:
let map: Map = $state();

What is even stranger is that if I remove {bounds} prop from the component, the map starts unbounded as a full world map...
I really don't know what's going on. I'm sure $effect triggers cause if I remove it, the map is bounded but not padded.

Wouldn't it make sense to give the possibility to add options like padding in the bounds prop? maplibre allows to pass options to fitBounds:

map.fitBounds(bounds, {
                    padding: 20
                });

It's kind of working for me now (I can bound my maps and apply a padding so that my markers are visible) but it seems very hacky and not very reassuring to switch to svelte-maplibre in production. Unfortunately, doing maps with svelte kit gives me headaches for years. :/

[0gust1]

Using
const { map, loaded } = $derived(getMapContext());
did not cause error but it didn't work.

getMapContext() usage is intended in components that are childs of <MapLibre>, to allow a subcomponent to access the vanilla maplibre instance. Here, you attempted to use it outside of <MapLibre>

see #253

$effect() is to be used cautiously, as you're experiencing it (and as stated in official docs). In reality, it's almost unavoidable in libs that are wrappers (e.g. maplibre, leaflet), when you need to call function of the original library in reaction to change.

here, your $effect() block is re-run each time bounds and map change. As map is undefined / null at first and changes when comes to life, you're likely to be caught in hard to track/understand changes.

I would advise to keep your root component clean, manage your markers in a subcomponent, and use getMapContext() + calculate bounding box + call fitbounds() in this subcomponent, it would be clearer for you.

[0gust1]

@jeromecc if you intent to initially load your map zoomed in depending on a set of markers, and have no particular need to make this reactive (instead of my example, which needs to be reactive), you may look at the latest release of svelte-maplibre: the base component now takes a bounds prop, i.e. you won't have to call fitBounds()

[diramazioni]

Pefect! bounds is what I was looking for!

This is my component (for now)

<script lang="ts">
	import { onMount } from 'svelte'
	// Props
	let { markers = [], onMarkerClick } = $props<{
		markers: Marker[]
		onMarkerClick: (identifier: string) => void
	}>() 

	import MapLibre from 'svelte-maplibre/MapLibre.svelte'
	import Marker from 'svelte-maplibre/Marker.svelte'
	import Popup from 'svelte-maplibre/Popup.svelte'

	interface Marker {
		lngLat: [number, number]
		name: string // The unique identifier (device.name)
		displayName: string // The name to show (device.altName || device.name)
	}

	let popupOpen = $state<boolean[]>([])

	// Calcola il bounding box dai marker in modo derivato
	const mapBounds = $derived.by(() => {
		if (markers.length === 0) { 
			return [5, 35, 20, 50] as [number, number, number, number]; // Bounds approssimativo Italia/Europa
		}

		let minLng = Infinity;
		let minLat = Infinity;
		let maxLng = -Infinity;
		let maxLat = -Infinity;

		markers.forEach((marker) => {
			const [lng, lat] = marker.lngLat;
			minLng = Math.min(minLng, lng)  ;
			minLat = Math.min(minLat, lat);
			maxLng = Math.max(maxLng, lng);
			maxLat = Math.max(maxLat, lat);
		});

		// Check if the bounds are valid
		if (isFinite(minLng) && isFinite(minLat) && isFinite(maxLng) && isFinite(maxLat)) {
			// If there's only one marker, create a small box around it
			const buffer = 0.05; // Gradi decimali per il buffer

			return [minLng - buffer, minLat - buffer, maxLng + buffer, maxLat + buffer] as [number, number, number, number];
		}
		//no valid bounds set to default
		return [5, 35, 20, 50] as [number, number, number, number];
	});

	// Only for popupOpen
	$effect(() => {
		if (popupOpen.length !== markers.length) {
			popupOpen = markers.map(() => false);
		} else if (markers.length === 0) {
	           popupOpen = [];
	       }
	});
	function handleMarkerClick(identifier: string) {
		onMarkerClick(identifier) // Pass the identifier (device.name)
	}
</script>

<div id="map" class="m-4">
	{#if markers}
		<MapLibre
			style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
			class="aspect-[9/16] max-h-[600px] w-full"
			standardControls
			bounds={mapBounds} 
		>
			{#each markers as marker, i}
				{@const { lngLat, name, displayName } = marker}
				<Marker
					{lngLat}
					onclick={() => {
						handleMarkerClick(name) // Pass the identifier (name)
					}}
					class="grid place-items-center rounded-full bg-blue-500 p-2 shadow-lg border border-white text-white hover:bg-blue-600 cursor-pointer"
				>
					<div class="text-sm font-bold">{displayName}</div>
					<Popup offset={[0, -10]} openOn="hover" open={popupOpen[i]}>
						<div class="text-lg font-bold">{displayName}</div>
					</Popup>
				</Marker>
			{/each}
		</MapLibre>
	{/if}
</div>

<style>
	:global(.map) {
		height: 500px;
	}
</style>