Quickstart

Quickstart

Get started with svelte-maplibre-gl in just a few minutes.

1. Launch a SvelteKit Project

Create a new SvelteKit project using the official Svelte CLI.

npx sv create myapp
# Make sure to enable the Tailwind CSS add-on,
# as our examples use it for styling.

cd myapp
npm install

2. Install `svelte-maplibre-gl`

npm install -D svelte-maplibre-gl

3. Add the Simplest Map

Now you can add the simplest MapLibre GL JS map to your +page.svelte file with just one line of code.

<script lang="ts">
  import { MapLibre } from 'svelte-maplibre-gl';
</script>

<!-- Height must be set, otherwise the map size will be zero! -->
<!-- Our examples use Tailwind CSS classes for styling. -->
<MapLibre class="h-[400px]" style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json" />

Our examples use Tailwind CSS and shadcn-svelte.

4. Put a Marker on the Map

Let’s set an initial zoom and put a marker pin on the map.

<script lang="ts">
  import { MapLibre, Marker } from 'svelte-maplibre-gl';
</script>

<MapLibre
  zoom={5}
  center={[142, 43]}
  class="h-[400px]"
  style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
>
  <Marker lnglat={[141.692222, 42.775]} />
</MapLibre>