Get started with Svelte and MapLibre GL JS

In this tutorial, you’ll learn how to display a map in Svelte using MapLibre GL JS. Together we will make a simple fullscreen map application as an example on how to use MapTiler maps together with Svelte and MapLibre GL JS for your own Svelte app.

Installation and setting up

  1. Clone the Get started with Svelte and MapLibre GL JS repo
     git clone https://github.com/maptiler/get-started-svelte-maplibre-gl-js.git my-svelte-map
    
  2. Navigate to the newly created project folder my-svelte-map
     cd my-svelte-map
    
  3. Install dependencies
     npm install
    
  4. Now navigate to the src folder and open the App.svelte file. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key or Get your FREE API key here

  5. Start your local environment
     npm run dev
    
  6. You will find your app on address http://localhost:8080/. Now you should see the map in your browser.

Learn more

If you want to learn how to create a Svelte component to render a map using MapLibre GL JS see the How to display a map in Svelte using MapLibre GL JS tutorial.