SvelteKit maps, the boring infra part
sorted.

<script lang="ts">
  import { onMount } from 'svelte';
  import { browser } from '$app/environment';
  import maplibregl, { type Map as MapLibreMap } from 'maplibre-gl';
  import 'maplibre-gl/dist/maplibre-gl.css';

  const MAP_STYLE = 'https://maps.guru/api/v1/styles/standard/light/style.json?key=YOUR_API_KEY';

  let container: HTMLDivElement;
  let map: MapLibreMap | undefined;

  onMount(() => {
    // Critical: SvelteKit may hydrate on the server during prerender.
    // Skip maplibre-gl when browser === false.
    if (!browser) return;

    map = new maplibregl.Map({
      container,
      style: MAP_STYLE,
      center: [77.209, 28.6139],
      zoom: 11,
    });
  });
</script>

<div bind:this={container} class="map-canvas"></div>