Get started with Svelte and MapLibre GL JS

Quick way to star a web map application with MapLibre GL JS using Svelte.

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.

📖 Documentation   🌐 Website   🔑 Get API Key

📦 Installation

Clone this repo

git clone https://github.com/maptiler/get-started-svelte-maplibre-gl-js.git my-svelte-map

🚀 Basic Usage

1. Navigate to the newly created project folder my-svelte-map

   cd my-svelte-map
   

2. Install dependencies

   npm install
   

3. :warning: Open the App.svelte file and replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

   :information_source: If you don't have an API KEY you can create it for FREE at https://www.maptiler.com/cloud/

4. Start your local environment

   npm run dev
   

5. You will find your app on address http://localhost:8080/. Now you should see the map in your browser.

💡 Related Examples

• How to display a map in Svelte using MapLibre GL JS
• Get Started with Svelte and MapLibre GL JS
• MapLibre GL JS geocoding control how to search places using Svelte

Check out the full list of MapTiler examples

💬 Support

• 📚 Documentation - Comprehensive guides and API reference
• ✉️ Contact us - Get in touch or submit a request
• 🐦 Twitter/X - Follow us for updates

🤝 Contributing

We love contributions from the community! Whether it's bug reports, feature requests, or pull requests, all contributions are welcome:

• Fork the repository and create your branch from main
• If you've added code, add tests that cover your changes
• Ensure your code follows our style guidelines
• Give your pull request a clear, descriptive summary
• Open a Pull Request with a comprehensive description

📄 License

This project is licensed under the MIT License – see the LICENSE file for details.

🙏 Acknowledgements

This project is built on the shoulders of giants:

• MapTiler – Maps for developers
• MapLibre GL JS – Open-source TypeScript library for publishing maps on your website
• Svelte – Web development for the rest of us
• svelte-maps – Reusable map components for Svelte projects

Get Your API Key ^FREE
Start building with 100,000 free map loads per month ・ No credit card required.

💜 Made with love by the MapTiler team

Website • Documentation • GitHub