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

IreneNg
IreneNg
Apr 6 · 4 min read
Preview of the map
Preview of the map
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. At that time i did not own a credit card (still not 🤣) so Google Maps was not a great idea for me. This is where i came up to another solution which works perfectly for me:

OpenLayers

link

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.

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!

Frontend Weekly

It's really hard to keep up with all the front-end…

IreneNg

Written by

IreneNg

passionate about software development and data science

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

IreneNg

Written by

IreneNg

passionate about software development and data science

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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