Create interactive maps with Angular 13 and OpenLayers

OpenLayers is an open source library that will suit a wide range of use cases when you need to add maps to your personal or commercial project. This step by step guide will show you how to get it running in a matter of minutes.

Here I will show you how to create your a new Angular project if you’ve never done that before. But you can just skip that part and add OpenLayers to your existing project.

Create new Angular project

At this point I will show you how to set up your first Angular project. You can use any computer operating system, Angular will work with OSX (Apple computers), Linux and Windows. This is the set up I use right now:

Angular CLI: 13.2.2
Node: 16.13.2
Package Manager: npm 8.1.2
OS: win32 x64

First of all, if you’re new to Angular, make sure you set up your local environment. You need Node.js and npm. To check installed versions, run the following commands (again, this works for OSX/Windows/Linux):

node -v
npm -v

If your system doesn’t recognise any of the commands, make sure you set up Node and npm at this point.

Ready? Okay, let’s create our new project.

While you have your command line interface still open, navigate to the directory that you want to use for your new angular project. To install the Angular CLI, run the following:

npm install -g @angular/cli

Now create the workspace

ng new openlayers-demo

And check if you can run your app

cd openlayers-demo 
ng serve — open

Well done, now you’re ready to start setting up OpenLayers.

Add OpenLayers to your Angular project

Install the latest version of OpenLayers:

npm install --save ol

At this point you if you try to serve your app, you might notice that it doesn’t compile. That issue exists for Openlayers 6.6 and later versions – so you might as well decide to use Openlayers 6.5 by adding @6.5 to the command above.

But let’s see how to work around the issues present in later versions. We are presented with an error related to ol library:

Error: node_modules/ol/source/Cluster.d.ts:136:31 - error TS2314: Generic type 'Feature<Geometry>' requires 1 type argument(s).
136     protected features: Array<Feature>;
Error: node_modules/ol/source/Cluster.d.ts:152:23 - error TS2314: Generic type 'VectorSource<Geometry>' requires 1 type argument(s).
152     protected source: VectorSource;

To resolve the errors open tsconfig.json and add "skipLibCheck":true to your compiler options.

Much better, right?

Now add OpenLayers CSS styles to your project. Open angular.json and add "node_modules/ol/ol.css" next to existing css styles.

"styles": [
  "src/styles.css",
  "node_modules/ol/ol.css"
],

Now is the time to create a component where we can put our map.

ng generate component map

Add contents of the component:

map.component.html

<div id="map" class="map"></div>

map.component.css

.map {
  width: 100%;
  height: 600px;
}

map.component.ts

import { Component, OnInit } from '@angular/core';
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import { OSM } from 'ol/source';
import TileLayer from 'ol/layer/Tile';
@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
  public map!: Map
  ngOnInit(): void {
    this.map = new Map({
    layers: [
      new TileLayer({
        source: new OSM(),
      }),
    ],
    target: 'map',
    view: new View({ 
      center: [0, 0],
      zoom: 2,maxZoom: 18, 
    }),
  });
 }
}

OSM refers to OpenStreetMaps, here we use their standard map, but OpenLayers works with a variety of map Tile Servers, images etc, you can also create and customize your own layers.

The final step is to replace the contents of the root html file app.component.html to include the contents of the map component

<app-map></app-map>

And here we are, now is the time to check out your working website!

In this guide you’ve learnt to set up an Angular project with OpenLayers library to start using the maps on your website.

Follow me for more development guides and stay tuned for my upcoming articles on how to work with OpenLayers maps.

Already available:

Customize map controls with Angular and OpenLayers