In this tutorial, we will learn how to integrate OpenLayers map with VueJS . VueJS is a progressive framework that covers most of common features needed for the front end development. Using any framework be it ReactJS or VueJS makes sense because if your application is becoming more and more complex, using any modern framework like those can reduce the complexity in your application.

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.

Before proceeding further, you need to install nodejs and npm package manager . Make sure you have installed it

We will divide this tutorial into four following steps. It will make the process easy and will help you understand this tutorial in a easy way.

1. Install Vue CLI and Create VueJS project using Vue CLI

CLI stands for Command Line Interface. @vue/cli is an npm package and provides the vue command in your terminal. In our tutorial, this will be used to create VueJS project. You can install Vue CLI using npm install -g @vue/cli command. The -g in this command means you are installing it globally. Once Vue CLI is installed, we can use it to create a vuejs project using vue create vue-layers command where vue-layers is our project name. This command will prompt you to select which version of VueJS you want to create project. For this tutorial, we are selecting Vue 3. This command will create a VueJS boilerplate code by automatically installing related dependencies.

Once, this sample project is created, it will have following structure as shown in the image. For our OpenLayers map integration, we will modify this project accordingly.

To run the sample project we created using VueJS CLI, we will use npm run serve command. This command will compile the VueJS project and host it automatically by creating a local server. Following image will be the output of of this sample project

2. Install OpenLayers dependency

In the first step, we have created a sample project. Now, we will install OpenLayers library into this project. To install OpeLayers library, use npm install ol command. It will install latest OpenLayers version into our VueJS project.

3. Understand Project Structure in VueJS

The VueJS project we created using vue cli has following structure. In the src folder, there are App.vue and HelloWorld.vue files. These files with .vue extension are vue components. This is where the power of VueJS lies. You can create different components for your different requirements. These components can we reused further. For our requirement, we will create a Map.vue component where we will write OpenLayers specific code to integrate it.

The following image depicts a simple representation of VueJS application. The index.html is where our vue app will be mounted/rendered. main.js will be imported in index.html. In main.js, we are creating VueJS app and importing App.vue component in it. Then we are using createApp method to create and mount/render the App.vue component to div#app element of index.html. Here App.vue is main or parent component. Map.vue and Layers.vue are the child component and will be used inside App.vue component.

4. Integrate OpenLayers Map in VueJS

We are almost done with basic VueJS project setup. Now we will create Map.vue and App.vue components. Remember App.vue is parent component and Map.vue is child component.
We will first create Map.vue component. In the <template></template> tag, we write html code. We are using <div id=”map”> element where OpenLayers map will be rendered. Then, we will use <script></script> tag to write VueJS/JavaScript specific code. Here, we are importing some OpenLayers module that we will use to define OpenLayers map. Inside the script tag, we add a default exported object export default {} which will let this component to be imported in other files. We are using mounted() hook method to define our OpenLayers Map. The mounted() method is most commonly used life cycle hook method in VueJS. VueJS invokes the mounted() method when your component is added to the DOM.

We have defined the OpenLayers map in VueJS component. Now, we will import Map.vue component in App.vue component. After importing Map.vue component, it can be used as normal html tag after specifying it under components in export default{}. In <template></template>, we are using <Map></Map> as normal html tag.
After using Map.vue as child component in App.vue, we are creating VueJS application in main.js and then mounting the App.vue to div#app element in index.html.

We have successfully integrated OpenLayers map in VueJS application. Now run the project using npm run serve command, you will able to see the map in browser

I hope this tutorial will create a good foundation for you. If you want tutorials on another GIS topic or you have any queries, please send an email at contact@spatial-dev.guru

To get full source code for this tutorial, click here.

To check the live demo for this tutorial, click here.