Quick way to star a web map application with MapLibre GL JS using Vue.js.
A simple fullscreen map application as an example on how to use MapTiler maps together with Vue.js and MapLibre GL JS for your own Vue.js app.
📖 Documentation 🌐 Website 🔑 Get API Key
Table of Contents
Clone this repo
git clone https://github.com/maptiler/get-started-vuejs-maplibre-gl-js.git my-vuejs-map-
Navigate to the newly created project folder my-vuejs-map
cd my-vuejs-map -
Install dependencies
npm install
-
⚠️ Open the App.vue file and replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.ℹ️ If you don't have an API KEY you can create it for FREE at https://www.maptiler.com/cloud/
-
Start your local environment
npm run serve
-
You will find your app on address http://localhost:8080/. Now you should see the map in your browser.
Check out the full list of MapTiler examples
- 📚 Documentation - Comprehensive guides and API reference
- ✉️ Contact us - Get in touch or submit a request
- 🐦 Twitter/X - Follow us for updates
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
This project is licensed under the MIT License – see the LICENSE file for details.
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
- Vue.js – The Progressive JavaScript Framework
- vue-maplibre-gl – Vue 3 plugin for maplibre-gl-js
💜 Made with love by the MapTiler team