Usare OpenLayers in Angular

OpenLayers ci permette di creare in maniera facile e veloce delle mappe nelle nostre web app.

Un'ottima alternativa a Google Maps, senza tutte le rogne di token, ecc.

In questo articolo vediamo come usarlo in Angular.

Prima di tutto instialliamo la libreria:

npm install --save ol

Poi nel file angular.json richiamiamo il CSS:

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

Nel componente:

import {Component, OnInit} from '@angular/core';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  public map!: Map

  constructor() {}

  ngOnInit(): void {
    this.map = new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      target: 'map',
      view: new View({
        center: [0, 0],
        zoom: 2,
        maxZoom: 18,
      })
    });
  }

}

Infine creaimo un contenitore HTML:

<div id="map" style="width: 100%;height: 600px;"></div>

Enjoy!