Svelte has no first-party MapLibre wrapper, and that is fine. Use maplibre-gl directly inside onMount, drive the map with a single $state-backed container ref.
pnpm add maplibre-gl<script lang="ts">
import { onMount } from 'svelte';
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(() => {
map = new maplibregl.Map({
container,
style: MAP_STYLE,
center: [77.209, 28.6139],
zoom: 11,
});
map.addControl(new maplibregl.NavigationControl());
});
</script>
<div bind:this={container} class="map-canvas"></div>
<style>
.map-canvas { width: 100%; height: 480px; }
</style>
Free-tier generous enough for real production traffic. 50,000 tile requests/month , no credit card.
Join developers worldwide who trust maps.guru for their mapping needs. Start free, no credit card required.