Angular 9 — Create an interactive map with OpenLayers (Part I)

Preview of the map

As a newbie in Angular, i was struggling to figure out how to add an interactive map to my Angular project. The easiest way to integrate a map on Angular is using Google Maps. There is even a package with type definitions for Google Maps which can be installed by running this command:

npm install --save @types/googlemaps

developers.google.com

Even though google offers 200$ free monthly usage, which is totally enough for most users, you will be required to give information about your credit card or billing account to get an API key. So that i came up to another solution which worked perfectly for me:

OpenLayers

link

OpenLayers is a high-performance, feature-packed library for all your mapping needs.

You have definitely heard about OpenStreetMap. OpenLayers is an open-source using data from OpenStreetMap. This library helps to us implement a real map on our website. The newest version is v.6.2 and was released on 13.02.2020.

😇 Let’s get started

Installation

Assuming you have already created a project with some components. First, we need to add the library to our Angular app. There are two ways to do this:

• install the ol package by using this command:

npm install ol

• the library can also be included in the head of html file. For an Angular app is normally the index.html file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css" type="text/css">

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script>

However, the second one is not recommended by OpenLayers. Especially when you want to deploy your application on some platforms like Heroku, AWS, you will have to run the command:

npm run build

So install the package with npm command is clearly the better idea.

Create a simple map

At first we need to import some methods for OpenLayers in the component.ts file:

After that, the code for creating a map should be added in ngOnInit():

To implement a map in our app, we have to create an object Map which is also the core component. This object needs a target, a view and layers to render the map:

• target: id of div element in html file. In this project the id of the map element is “hotel_map”.

Note that with this id we can change the properties of the div element in css. Most important are height and width of the map:

• view: represents a 2D map view of the map. With view we can change the center, rotation and resolution of the map. In this example a location in my city was chosen to be the center of the map and the zoom level is set to 5. In OpenLayers the coordinate must be formulated as [longitude, latitude].
• layers: as the name itself says, layers are very important in this package. Only when these layers are fetched, the map is rendered. There are three types of layers: Tile, Vector and Image. This map uses Tile to display the OpenStreetMap data.

The result will look like this:

Conclusion

So far we have integrated a simple map with an OpenStreetMap layer zoomed on Germany. In the next part of this series we will learn how to add markers and some interactive functions like onClick, onMouseOver and set zoom level.

Hope that you enjoyed this post and see you in the next part!

Thanks for reading!