Create your first WebMap in a Mobile App with Ionic (Vue.JS) and OpenLayers
For this article the main objective is to understand the process to install Ionic Vue and also start to develop an app that uses OpenLayers to render a WebMap.
With that, we can see directly from the Ionic website the following:
Ionic Vue projects ship with the same tooling as regular Vue CLI projects. Meaning you’ll be building with the Vue CLI and all of it’s features. In addition, starter projects also ship with few features enabled by default, like Routing and TypeScript support (Ionic, 2020) .
2. Prepare the Environment
First, we need to install Ionic-Vue. For this article I did all the steps using Mac OS Catalina. The steps will be mainly the same for others O.S and the framework has a good documentation for that (https://ionicframework.com/docs).
If any doubt appears in the process feel free to contact me in the methods available in the end of the page.
2.1 — Step 01 (Optional) — Install Node.JS
If you do not have Node installed, download the last version from https://nodejs.org/. The process if very straightforward so just download de *. pkg and install it. The Node Package Manager (NPM) is also installed in this project.
You can also check the version from node and npm using the following commands
(base) vcruvinelr@MacBook % node --version
(base) vcruvinelr@MacBook % npm --version
2.2 — Step 02 — Install Ionic CLI
Install Ionic globally using the following command in the Terminal. Remember you need to have the right permissions to install it globally.
sudo npm install -g @ionic/cli
3. Create your App
Ionic has three main options to start the app: tabs, sidemenu and blank. In this example we will use the "tabs" option. The "myVueApp" is your app name. Just enter the following command in your Terminal.
ionic start myVueApp tabs
After enter the command will be asked in which framework the app will be build. Just select Vue. After a feel minutes your Ionic Vue project are ready.
4. Understanding the folder structure
After create the app, your folder will have the following structure:
- node_modules folder has all the packages from the projects;
- public folder;
- src folder, which has all the code from your project;
- test folder, intended for application testing
- main configurations files from the project are in the root folder.
5. Running for the first time your app.
In the root of your project folder, run the command:
As soon the app finish to load, the browser window will open. If this not happen you will be able to access by http://localhost:8100 (or any other port available as shown in your Terminal).
(base) vcruvinelr@MacBook myVueApp % ionic serve
> vue-cli-service serve
[vue-cli-service] INFO Starting development server...[INFO] Development server running!
Use Ctrl+C to quit this process[INFO] Browser window opened to http://localhost:8100![vue-cli-service] App running at:
[vue-cli-service] - Local: http://localhost:8100/
[vue-cli-service] - Network: http://192.168.0.10:8100/
[vue-cli-service] Note that the development build is not optimized.
[vue-cli-service] To create a production build, run npm run build.
[vue-cli-service] Issues checking in progress...
[vue-cli-service] No issues found.
You can change to the mobile view accessing the developer tools (Command+Option+C) and after pressing Command+Shift+M.
As we have the project structured and functional, we are ready to start some development to create the WebMap.
6. Installing OpenLayers
To install OpenLayers run the following command in the root folder of the project.
npm install ol
After it, OpenLayers will be ready to use.
7. Create your WebMap
In the first time the app was accessed, you probably saw that will be redirect to the "Tab1" (src/views/Tab1.vue) as this is the default route after installing the app (consider to take some minutes understanding vue-router and also take a look at src/router/index.ts).
To render the WebMap, we first need to create a Map Component (that we will call Map.vue) in the src/components folder. Besides the WebMap creation, we will also will insert a single point in the WebMap and the coordinates are in initialCoordinates variable.
After create a method called myMap() we initiate our App calling this method in the mounted() hook from the component.
It's good to emphasize that in this code I use the useGeographic() function from the
'ol/proj' module . This makes the map view uses geographic coordinates (even if the view projection is not geographic). If you don't wan't to use geographic coordinates, just remove the function and the module import from the code.
To use properly the Map() [this.mainMap] component from OpenLayers, we need to set the following options:
- layers: If this is not defined, a map with no layers will be rendered .
- target: The container for the map, either the element itself or the
idof the element .
- view: The map’s view. No layer sources will be fetched unless this is specified at construction time or through
With all that set we can render a point in the WebMap. Understanding the workflow from the the process first:
It's important to remember that there is many others straightforward ways to do the same process, but take in consideration that we are learning here the step-by-step, so you can clearly understand how things works.
Remember that to render the WebMap properly you need to set correctly the style as the examples showed.
As already said, in myMap() we are first creating a new WebMap and after inserting a new point (VectorSource() and VectorLayer()), but yes, it's possible to create the point in the Map component from OpenLayers directly. The example below shows how that works.
In short, we just inserted a new element in the layers option from OpenLayers Map component.
As our component is created (feel free to choose the one which fit in your intentions. As I said, both got the same result) we can import that in the Tab1.vue (src/views/Tab1.vue).
Finally we can load our app and the map will be shown as the figure below.
This articles aims to guide how to create your first mobile app using Ionic-Vue, installing OpenLayers Library and also how to render a WebMap with a vector layer.
Take in consideration this, it's not the objective from this article to be super detailed in some aspects as props or even Geolocation. This topics will be discussed in the next articles.
You can get all the code in this repository: https://github.com/vcruvinelr/ionic-vue-ol
If you replicate the graphics, code, text or the any part of the article do not forget to reference and do the citation.
Feel free to ask any further questions or contact me at:
- Ionic, 2021 — https://ionicframework.com/docs/vue/overview
- Geographic Coordinates, OpenLayers, 2021 — https://openlayers.org/en/latest/examples/geographic.html
- OpenLayers, 2021 — https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html