This blog post is the second part in OpenLayers-VueJS integration series. In part one, we discussed basics of VueJS and how to integrate OpenLayers with VueJS to create a basic map.
OpenLayers VueJS integration series:
1. Integrating OpenLayers Map with VueJS: Create Map – Part 1
2. Integrating OpenLayers Map with VueJS: Create Layers Panel – Part 2
3. Integrating OpenLayers Map with VueJS: Create Implement Style and legend for vector layer – Part_3
4. Integrating OpenLayers Map With VueJS: Open Feature Information Popup On Click – Part 4
5. Integrating OpenLayers Map with VueJS: Recreating the project with Vite, Pinia and TypeScript-Part 5
To get full source code for this tutorial, click here.
To check the live demo for this tutorial, click here.
In this tutorial, we will create a Layer Panel which will display all the layers with check box to toggle visibility. We will divide this tutorial into following steps. It will make the process easy and will help you understand this tutorial in a easy way.
1. Install Quasar Framework
We will install Quasar Framework which is an Open Source VueJS framework into our project. Quasar Framework helps the developer to create high-performance VueJS user interfaces in record time. Go to vue-layers project in command terminal and then use vue add quasar command to install the quasar framework in our vue-layers project. This command will install Quasar framework into our project and will modify the main.js file of our project to integrate it with VueJS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
(base) geoknight@pop-os/vue-layers:~$ vue add quasar ✔ Successfully installed plugin: vue-cli-plugin-quasar ? Allow Quasar to replace App.vue, About.vue, Home.vue and (if available) router .js? Yes ? Pick your favorite CSS preprocessor: Sass ? Choose Quasar Icon Set Material ? Default Quasar language pack - one from https://github.com/quasarframework/qua sar/tree/dev/ui/lang en-US ? Use RTL support? No ? Select features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed) ◯ Roboto font ❯◯ Material Icons (recommended) ◯ Material Icons Outlined ◯ Material Icons Round ◯ Material Icons Sharp ◯ Fontawesome ◯ Ionicons |
2. Install vuex: a state management library for VueJS
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
In case of our vue-layers application, we will have multiple vue components like Map.vue, LayersPanel.vue, Legend.vue etc. The common object that will be used in all these component will be OpenLayers map object. Using vuex, we will be able to share the state of this object between different Vue components.
Use npm install vuex@next –save command to install vuex into vuejs project.
|
1 |
(base) geoknight@pop-os/vue-layers:~$ npm install vuex@next --save |
3. New project structure
Our new project structure will look like below image.
- index.html is where our vue.js app will be rendered
- src/assets/jsons/layer.json is json file that contains layers information to be added on map
- Map.vue and LayersPanel.vue are VueJS component. We have created Map.vue in part 1 tutorial. We will create LayersPanel.vue component in later steps.
- src/store.map.js is a vuex store for state management. We will create this store and learn how to use vuex store across multiple vue components.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
├── package.json ├── package-lock.json ├── public │ ├── favicon.ico │ └── index.html ├── README.md ├── src │ ├── App.vue │ ├── assets │ │ └── jsons │ │ └── layer.json │ ├── components │ │ ├── LayersPanel.vue │ │ └── Map.vue │ ├── main.js │ ├── quasar-user-options.js │ ├── store │ │ └── map.js │ └── styles │ ├── quasar.sass │ └── quasar.variables.sass └── vue.config.js |
4. Create vuex store
We will use vuex to create store for state management of objects. In the following code snippet, we are using createStore from vuex to create store. We have provide the initial state for map object in line number 7 and mutation for this object in line number 11.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { createStore } from 'vuex' // Create a new store instance. const store = createStore({ state () { return { map: null } }, mutations: { setMap (state, map) { state.map = map } } }); export default store; |
The state of the object defined in store can be accessed by any Vue components. Mutation in vuex store means that we can change the state of any vuex store object in any time. We will use mutation to set the state of this vuex map object to openlayers map object in Map.vue component.
But before that, we have to configure our vue app to use this store in main.js. At line number 8, we are configuring our app to use vuex store.
|
1 2 3 4 5 6 7 8 9 |
import { createApp } from 'vue' import App from './App.vue' import store from './store/map' import { Quasar } from 'quasar' import quasarUserOptions from './quasar-user-options' const app = createApp(App); app.config.globalProperties.$store = store; app.use(Quasar, quasarUserOptions).mount('#app') |
5. Mutate vuex store with openlayers object in Map.vue
We have created the vuex store and have provided the initial state and mutation method to map object. Here will mutate the state of vuex map object. We will use this.$store.commit(‘setMap’, this.map) code to mutate at line number 31. Mutation will assign the new value for vuex map object. In this case, vuex map object will have openlayers map object.
Vuex map state now contains openlayers map object which is defined at line number 16. We will vuex map state in LayersPanel.vue component to add layers to map and create layers panel in UI.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<template> <q-page class="flex flex-center"> <div id = "map"> </div> </q-page> </template> <script> import { Map, View } from 'ol'; import { Tile as TileLayer } from 'ol/layer'; import { OSM } from 'ol/source'; export default { name: 'Map', mounted() { this.map = new Map({ target: 'map', layers: [ new TileLayer({ source: new OSM(), name: 'OSM' }) ], view: new View({ center: [-9869708.964428628, 4908948.052576464], zoom: 4 }) }); // Mutate the map object or change the map state this.$store.commit('setMap', this.map); } } </script> <style scoped> #map{ height: 100vh; width: 100%; margin: 0; padding: 0; } </style> |
6. Create LayersPanel.vue component
To create LayersPanel, we are importing layer.json file which contains all the layers information like it’s url, name, visibility etc. at line number 27. There is one issue in this component.
This component needs vuex store’s mutated map object and we are mutating this object in Map.vue component. Since LayersPanel.vue and Map.vue are independent component and there is no specific order in which they will be rendered. So we will watch for vuex store map object for change using watch method at line number 36.
We are also using map object as computed property in line number 45. We are using this property to add layers to map(see line number 60) and simultaneously showing layers in Layers panel in UI.
At line number 11 in html part, we are using map != null condition. This is because, it is vuex map state and it’s initial value is set to null. We are using map as computed property and using watch method to watch for mutation change. Once mutation is done, computed property will force the html template to rerender the LayersPanel because computed properties are reactive.
Apart from that, we are using toggleLayer function defined at line number 66 to toggle the layers visibility.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<template> <div> <q-tabs inline-label class="bg-green text-white" > <q-tab name="layers" icon="layers" label="Layers" /> </q-tabs> <q-list v-if="map != null" separator bordered> <q-item clickable v-ripple :key="layer.index" v-for="(layer) in map.getLayers().getArray().slice().reverse()" style="height: 10px;"> <q-item-section avatar> <q-checkbox color="primary" v-model = "layer.getProperties().visible" @click = "toggleLayer(layer)"/> </q-item-section> <q-item-section class = "label_align"> {{layer.get('name')}} </q-item-section> </q-item> </q-list> </div> </template> <script> import layers from '../assets/jsons/layer.json'; import { TileArcGISRest } from 'ol/source'; import { Tile as TileLayer } from 'ol/layer'; export default { name: 'LayersPanel', data() { return { } }, watch: { 'map': { handler() { this.addLayers(); }, deep: false } }, computed: { map() { return this.$store.state.map } }, methods: { /* Add layers from json object to openlayers map*/ addLayers() { layers.forEach(lyr => { let layer = new TileLayer({ source: new TileArcGISRest({ url: lyr.url }), name: lyr.name, visible: lyr.visible }) this.map.addLayer(layer); }); }, /* Toggle layer's visibility */ toggleLayer(layer) { layer.setVisible(!layer.getVisible()); } } } </script> <style scoped> .label_align { text-align: left; } </style> |
We have successfully developed the LayersPanel.vue component with toggle functionality. Now run the project using npm run serve command, you will able to see the map and layers panel in browser
Pingback: Integrating OpenLayers Map with VueJS: Create Map - Part 1 - Spatial Dev Guru
Pingback: Integrating OpenLayers Map with VueJS: Create Layers Panel – Part 2 - July 24, 2022 at 11:21AM - John Jason Fallows
Pingback: Integrating OpenLayers Map with VueJS: Implement Style and legend for vector layer – Part 3 - Spatial Dev Guru
Pingback: Integrating OpenLayers Map with VueJS: Open Feature Information Popup on click – Part 4 - Spatial Dev Guru
Pingback: Integrating OpenLayers Map with VueJS: Recreating the project with Vite, Pinia and TypeScript-Part 5 - Spatial Dev Guru