Create your first WebMap in a Mobile App with Ionic (Vue.JS) and OpenLayers

Ionic Vue, the native Vue version of Ionic Framework, has arrived with the same tooling as regular Vue CLI projects. Let's start a new Ionic Vue Project and integrate them with OpenLayers — the JavaScript library for displaying maps.

Figure 01 — Architecture from our project

1. Introduction

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) [1].

2. Prepare the Environment

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
v12.13.0
(base) vcruvinelr@MacBook % npm --version
6.14.9

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 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:

ionic serve

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!

Local: http://localhost:8100

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.

Figure 02 — App first Impression

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 [2]. 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.

Figure 03 — Map Options-Properties

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 [3].
  • target: The container for the map, either the element itself or the id of the element [3].
  • view: The map’s view. No layer sources will be fetched unless this is specified at construction time or through module:ol/Map~Map#setView [3].

With all that set we can render a point in the WebMap. Understanding the workflow from the the process first:

Figure 04 — Workflow to add a new Vector.

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.

Figure 05 — App with webmap and point

8.Conclusions

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:

email: vcruvinelr@gmail.com

linkedin: https://www.linkedin.com/in/vcruvinel/

twitter: http://www.twitter.com/vcruvinelr

9. References

  1. Geographic Coordinates, OpenLayers, 2021 — https://openlayers.org/en/latest/examples/geographic.html
  2. OpenLayers, 2021 — https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html

Civil Engineer, MSc. in GIS / Planning, Data and GIS Specialist / Web and GIS Developer / Urban Mobility Researcher

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store