Como Adicionar Mapa Leaflet No Angular

Adicionar um mapa em nossas aplicações é uma atividade não tão comum, mas algo muito fácil de ser feito.
Temos algumas opções open-source que podemos usar quando precisamos fazer algo do tipo, como por exemplo:

• Leafletjs
• Openlayers
• Mapbox
• Datamaps
• Bing Maps
• Kartograph
  Entre outros!

Neste post, irei ensinar uma maneira fácil de como adicionar o Leaflet em um projeto Angular!

A primeira coisa que devemos fazer é adicionar ao projeto o Leaflet:

npm i leaflet

Feito isso, devemos fazer algumas alterações no angular.json, adicionando o CSS e o JS do Leaflet

// Outros trechos do Angular.json
"styles": [
  "./node_modules/leaflet/dist/leaflet.css", // nosso CSS
  "src/styles.scss"
],
"scripts": [
  "./node_modules/leaflet/dist/leaflet.js", // nosso Leaflet
]

Agora que importamos as dependências, podemos utilizá-las em nosso componente!

import { Component, OnInit, ViewChild } from '@angular/core';
declare let L; // Declaramos essa variável

@Component({
    selector: 'app-mapa',
    templateUrl: './mapa.component.html',
    styleUrls: ['./mapa.component.scss'],
    providers: [AngularFireDatabase, AngularFireAuth],
})
export class MapaComponent implements OnInit {

  public map: any;

  constructor() {}

  ngOnInit() {
    // Esse 'map' é o ID que
    // colocaremos no HTML
    this.map = L.map('map', {
      scrollWheelZoom: false,
    }).setView([-23.175477, -45.878163], 15);


    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.map);
  }
}

Agora vamos ver como fica nosso HTML:

<section class="content">
  <header class="content__title">
    <h1>Mapa</h1>
  </header>
  <div id="map"></div>
</section>

Com isso, nosso mapa já está funcionando!
Simples né?