https://github.com/maptiler/get-started-vuejs-maplibre-gl-js
Quick way to star a web map application with MapLibre GL JS using Vue.js
https://github.com/maptiler/get-started-vuejs-maplibre-gl-js
example-code template tutorial-code vue vuejs
Last synced: 13 days ago
JSON representation
Quick way to star a web map application with MapLibre GL JS using Vue.js
- Host: GitHub
- URL: https://github.com/maptiler/get-started-vuejs-maplibre-gl-js
- Owner: maptiler
- License: mit
- Created: 2022-06-29T19:03:14.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-08-03T06:47:46.000Z (almost 3 years ago)
- Last Synced: 2024-03-26T15:22:49.090Z (about 1 year ago)
- Topics: example-code, template, tutorial-code, vue, vuejs
- Language: Vue
- Homepage:
- Size: 249 KB
- Stars: 7
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Get started with Vue.js and MapLibre GL JS
[](https://opensource.org/licenses/MIT)
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.
1. Clone this repo
```sh
git clone https://github.com/maptiler/get-started-vuejs-maplibre-gl-js.git my-vuejs-map
```
2. Navigate to the newly created project folder **my-vuejs-map**
```sh
cd my-vuejs-map
```
3. Install dependencies
```sh
npm install
```
4. :warning: Open the App.vue file and replace **YOUR_MAPTILER_API_KEY_HERE** with your actual [MapTiler API key](https://cloud.maptiler.com/account/keys/).
:information_source: If you don't have an API KEY you can create it for **FREE** at https://www.maptiler.com/cloud/
5. Start your local environment
```sh
npm run serve
```
6. You will find your app on address http://localhost:8080/. Now you should see the map in your browser.
## Build With
* [Vue.js](https://vuejs.io/start)
* [MapLibre GL JS](https://maplibre.org/)
* [MapTiler](https://www.maptiler.com/)
* [vue-maplibre-gl](https://www.npmjs.com/package/vue-maplibre-gl)
This project was generated with [Vue.js CLI](https://cli.vuejs.org/).
## Learn More
You can learn more at [How to display a map in Vue.js using MapLibre GL JS](https://docs.maptiler.com/vuejs/maplibre-gl-js/how-to-use-maplibre-gl-js/?utm_medium=referral&utm_source=github&utm_campaign=2022-05%20%7C%20js%20frameworks%20%7C%20vue.js%20).
## License
Distributed under the MIT License. See `LICENSE` for more information.