├── .env.example
├── .gitignore
├── LICENSE
├── README.md
├── assets
    └── vue-maplibre-template.png
├── babel.config.js
├── gh-pages.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── components
    │   ├── Map.vue
    │   └── Navbar.vue
    └── main.js
└── vue.config.js


/.env.example:
--------------------------------------------------------------------------------
1 | VUE_APP_API_KEY=YOUR_MAPTILER_API_KEY


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env
 8 | .env.local
 9 | .env.*.local
10 | 
11 | # Log files
12 | npm-debug.log*
13 | yarn-debug.log*
14 | yarn-error.log*
15 | pnpm-debug.log*
16 | 
17 | # Editor directories and files
18 | .idea
19 | .vscode
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 MapTiler
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue.js map using MapLibre GL JS
  2 | 
  3 | [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
  4 | 
  5 | A quick way to start a web map application with Vue.js using MapLibre GL JS.
  6 | 
  7 | A simple fullscreen map application is used to showcase how to utilize MapTiler maps together with Vue.js and MapLibre GL JS for your Vue.js app.
  8 | 
  9 | ## Screenshot
 10 | 
 11 | ![vue maplibre template](/assets/vue-maplibre-template.png "Vue MapLibre template")
 12 | 
 13 | <p align="right">(<a href="#top">back to top</a>)</p>
 14 | 
 15 | ## Step-by-step tutorial - How to display a map in Vue.js using MapLibre GL JS
 16 | 
 17 | Documentation: [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)
 18 | 
 19 | ## Demo
 20 | 
 21 | Online demo: https://labs.maptiler.com/vue-template-maplibre-gl-js/
 22 | 
 23 | <p align="right">(<a href="#top">back to top</a>)</p>
 24 | 
 25 | ## Build With
 26 | 
 27 | * [Vue.js](https://v3.vuejs.org/)
 28 | * [MapLibre GL JS](https://maplibre.org/)
 29 | * [MapTiler](https://www.maptiler.com/)
 30 | 
 31 | This project was generated with [Vue CLI](https://cli.vuejs.org/) version 4.5.15.
 32 | 
 33 | ## Getting Started
 34 | 
 35 | ### Prerequisites
 36 | 
 37 | * npm
 38 |   ```sh
 39 |   npm install npm@latest -g
 40 |   ```
 41 | * Vue.js CLI
 42 |   ```sh
 43 |   npm install -g @vue/cli
 44 |   ```
 45 | 
 46 | <p align="right">(<a href="#top">back to top</a>)</p>
 47 | 
 48 | ### Create an app
 49 | 
 50 | Clone the repo to create a new Vue.js project. Run in your command-line:
 51 | 
 52 | ```
 53 |   git clone https://github.com/maptiler/vue-template-maplibre-gl-js.git my-vue-map
 54 | ```
 55 | 
 56 | Navigate to the newly created project folder **my-vue-map**
 57 | 
 58 | ```
 59 |   cd my-vue-map
 60 | ```
 61 | 
 62 | Install the NPM packages dependencies. Run in your command-line:
 63 | 
 64 | ```
 65 |   npm install
 66 | ```
 67 | 
 68 | ### API KEY
 69 | 
 70 | Rename or copy the `.env.example` file to `.env`
 71 | 
 72 | ```
 73 |   cp .env.example .env
 74 | ```
 75 | 
 76 | Open the `.env` file, :warning: you will need to replace **YOUR_MAPTILER_API_KEY** with your own MapTiler API key.
 77 | 
 78 | Your MapTiler account access key is on your MapTiler [Cloud](https://cloud.maptiler.com/account/keys/) account page. 
 79 | 
 80 | :information_source: If you don't have an API KEY, you can create it for free at https://www.maptiler.com/cloud/
 81 | 
 82 | ### Run
 83 | 
 84 | To start your local environment, run: 
 85 | 
 86 | ```
 87 |   npm run serve
 88 | ``` 
 89 | 
 90 | You will find your app on address http://localhost:8080/.
 91 | 
 92 | Now you should see the app in your browser.
 93 | 
 94 | <p align="right">(<a href="#top">back to top</a>)</p>
 95 | 
 96 | ### Build
 97 | 
 98 | To build for production, run: 
 99 | ```
100 |   npm run build
101 | ``` 
102 | 
103 | ### gh-pages
104 | 
105 | To deploy the app to the gh-pages branch, run:
106 | ```
107 |   node gh-pages.js
108 | ``` 
109 | 
110 | <!-- LICENSE -->
111 | ## License
112 | 
113 | Distributed under the MIT License. See `LICENSE` for more information.
114 | 
115 | <p align="right">(<a href="#top">back to top</a>)</p>
116 | 
117 | <!-- ACKNOWLEDGMENTS -->
118 | ## Acknowledgments
119 | 
120 | Instead of using or developing a custom map component, you can use the [Vue.js binding of maplibre-gl-js (vue-maplibre-gl)](https://github.com/razorness/vue-maplibre-gl).
121 | 
122 | Checkout to [Get started with Vue.js and MapLibre GL JS](https://github.com/maptiler/get-started-vuejs-maplibre-gl-js) repo to use de vue-maplibre-gl component.


--------------------------------------------------------------------------------
/assets/vue-maplibre-template.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maptiler/vue-template-maplibre-gl-js/c76d17fdd1459a915cb68cbfe4799338f2722b94/assets/vue-maplibre-template.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/gh-pages.js:
--------------------------------------------------------------------------------
1 | const ghpages = require('gh-pages');
2 | 
3 | ghpages.publish(
4 |     'dist', // path to public directory
5 |     () => {
6 |         console.log('Deploy Complete!')
7 |     }
8 | )


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-template-maplibre-gl-js",
 3 |   "description": "Vue.js map using MapLibre GL JS",
 4 |   "version": "1.0.0",
 5 |   "private": false,
 6 |   "scripts": {
 7 |     "serve": "vue-cli-service serve",
 8 |     "build": "vue-cli-service build",
 9 |     "lint": "vue-cli-service lint",
10 |     "dist": "vue-cli-service build --mode dist"
11 |   },
12 |   "keywords": [
13 |     "vue",
14 |     "vue.js",
15 |     "template",
16 |     "map",
17 |     "maplibre",
18 |     "maplibre-gl-js"
19 |   ],
20 |   "author": "MapTiler Team <info@maptiler.com>",
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/maptiler/vue-template-maplibre-gl-js/issues"
24 |   },
25 |   "homepage": "https://github.com/maptiler/vue-template-maplibre-gl-js#readme",
26 |   "dependencies": {
27 |     "core-js": "^3.6.5",
28 |     "maplibre-gl": "^2.0.1",
29 |     "vue": "^3.0.0"
30 |   },
31 |   "devDependencies": {
32 |     "@vue/cli-plugin-babel": "~4.5.0",
33 |     "@vue/cli-plugin-eslint": "~4.5.0",
34 |     "@vue/cli-service": "~4.5.0",
35 |     "@vue/compiler-sfc": "^3.0.0",
36 |     "babel-eslint": "^10.1.0",
37 |     "eslint": "^6.7.2",
38 |     "eslint-plugin-vue": "^7.0.0",
39 |     "gh-pages": "^3.2.3"
40 |   },
41 |   "eslintConfig": {
42 |     "root": true,
43 |     "env": {
44 |       "node": true
45 |     },
46 |     "extends": [
47 |       "plugin:vue/vue3-essential",
48 |       "eslint:recommended"
49 |     ],
50 |     "parserOptions": {
51 |       "parser": "babel-eslint"
52 |     },
53 |     "rules": {}
54 |   },
55 |   "browserslist": [
56 |     "> 1%",
57 |     "last 2 versions",
58 |     "not dead"
59 |   ]
60 | }
61 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maptiler/vue-template-maplibre-gl-js/c76d17fdd1459a915cb68cbfe4799338f2722b94/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="app">
 3 |     <Navbar />
 4 |     <Map />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import Navbar from './components/Navbar.vue';
10 | import Map from './components/Map.vue';
11 | 
12 | export default {
13 |   name: 'App',
14 |   components: {
15 |     Navbar,
16 |     Map
17 |   }
18 | }
19 | </script>
20 | 
21 | <style>
22 | body {
23 |   margin: 0;
24 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
25 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
26 |     sans-serif;
27 |   -webkit-font-smoothing: antialiased;
28 |   -moz-osx-font-smoothing: grayscale;
29 | }
30 | 
31 | code {
32 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
33 |     monospace;
34 | }
35 | 
36 | .app {
37 |   text-align: center;
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/components/Map.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="map-wrap">
 3 |     <a href="https://www.maptiler.com" class="watermark"><img
 4 |         src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"/></a>
 5 |     <div class="map" ref="mapContainer"></div>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import { Map, NavigationControl, Marker } from 'maplibre-gl';
11 | import { shallowRef, onMounted, onUnmounted, markRaw } from 'vue';
12 | 
13 | export default {
14 |   name: "Map",
15 |   setup () {
16 |     const mapContainer = shallowRef(null);
17 |     const map = shallowRef(null);
18 | 
19 |     onMounted(() => {
20 |       const apiKey = process.env.VUE_APP_API_KEY;
21 |       if (apiKey == null) {
22 |         throw new Error("You need to configure env VUE_APP_API_KEY first, see README");
23 |       }
24 | 
25 |       const initialState = { lng: 139.753, lat: 35.6844, zoom: 14 };
26 | 
27 |       map.value = markRaw(new Map({
28 |         container: mapContainer.value,
29 |         style: `https://api.maptiler.com/maps/streets/style.json?key=${apiKey}`,
30 |         center: [initialState.lng, initialState.lat],
31 |         zoom: initialState.zoom
32 |       }));
33 |       map.value.addControl(new NavigationControl(), 'top-right');
34 |       new Marker({color: "#FF0000"})
35 |         .setLngLat([139.7525,35.6841])
36 |         .addTo(map.value);
37 |     });
38 | 
39 |     onUnmounted(() => {
40 |       map.value?.remove();
41 |     });
42 | 
43 |     return {
44 |       map, mapContainer
45 |     };
46 |   }
47 | };
48 | </script>
49 | 
50 | 
51 | <style scoped>
52 | @import '~maplibre-gl/dist/maplibre-gl.css';
53 | 
54 | .map-wrap {
55 |   position: relative;
56 |   width: 100%;
57 |   height: calc(100vh - 77px); /* calculate height of the screen minus the heading */
58 | }
59 | 
60 | .map {
61 |   position: absolute;
62 |   width: 100%;
63 |   height: 100%;
64 | }
65 | 
66 | .watermark {
67 |   position: absolute;
68 |   left: 10px;
69 |   bottom: 10px;
70 |   z-index: 999;
71 | }
72 | </style>
73 | 


--------------------------------------------------------------------------------
/src/components/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="heading">
 3 |     <h1>This is my map App</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'Navbar'
10 | }
11 | </script>
12 | 
13 | <style scoped>
14 | .heading {
15 |   margin: 0;
16 |   padding: 0px;
17 |   background-color: black;
18 |   color: white;
19 | }
20 | 
21 | .heading > h1 {
22 |   padding: 20px;
23 |   margin: 0;
24 | }
25 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | 
4 | createApp(App).mount('#app')
5 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   publicPath: process.env.NODE_ENV === 'production'
 3 |     ? './'
 4 |     : '/',
 5 |   pages: {
 6 |     index: {
 7 |       // entry for the page
 8 |       entry: 'src/main.js',
 9 |       title: 'Vue.js map using MapLibre GL JS',
10 |     },
11 |   }
12 | }


--------------------------------------------------------------------------------