Svelte map using MapLibre GL JS

A quick way to start a web map application with Svelte using MapLibre GL JS.

A simple fullscreen map application is used to showcase how to utilize MapTiler maps together with Svelte and MapLibre GL JS for your Svelte app.

📖 Documentation   🌐 Website   🔑 Get API Key

📦 Installation

Clone the repo to create a new Svelte project. Run in your command-line:

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

This project was generated with

npx degit sveltejs/template my-svelte-project

🚀 Basic Usage

Create an app

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

cd my-svelte-map

Install the NPM packages dependencies. Run in your command-line:

npm install

API KEY

Rename or copy the .env.example file to .env

cp .env.example .env

Open the .env file, :warning: you will need to replace YOUR_MAPTILER_API_KEY with your own MapTiler API key.

Your MapTiler account access key is on your MapTiler Cloud account page.

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

Run

To start your local environment, run:

npm run dev

You will find your app on address http://localhost:5000/.

Now you should see the app in your browser.

Build

To build for production, run:

npm run build

gh-pages

To deploy the app to the gh-pages branch, run:

node gh-pages.js

💡 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

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