Angular Open Street Map

Esta librería contiene una implementación de Open Street Map utilizando Leaflet y los servicios de búsqueda de Nominatim.

Configuración

Para poder utilizar esta librería es necesario instalar primero Leaflet, para eso ejecuta le siguiente comando:

npm install leaflet --save

También necesitaras cambiar los estilos css de Leaflet, por lo que necesitaras añadir las siguientes líneas en el archivo angular.json:

"styles": [
	... 
	 "./node_modules/leaflet/dist/leaflet.css"
],

Para usar el marcador que viene por defecto, agregue las siguientes líneas en el archivo angular.json:

"assets": [
    ...
    {
        "glob": "**/*",
        "input": "./node_modules/angular-open-street-map/assets",
        "output": "/assets/"
    }
],

Uso

Agrega el módulo AngularOpenStreetMapModule a las importaciones del módulo que utilizará:

import { NgModule } from '@angular/core';
import { AngularOpenStreetMapModule } from 'angular-open-street-map';

@NgModule({
    imports: [
        ...
        AngularOpenStreetMapModule
    ],
    ...
})
export class YourModule {
}

Añade el elemento al HTML:

<open-street-map 
    [lat]="-0.17239496915142513" 
    [lng]="-78.48261026997494" 
    [zoom]="15">
</open-street-map>

Si quieres obtener información del lugar donde esta ubicado el marcador puedes agregar el siguiente código en tu componente:

...
import { Place } from 'angular-open-street-map/models/place.model';

export class YourComponent {

  public getPlaceInfo(place: Place): void {
    console.log(place);
  }

}

Y deberás agregar el siguiente evento en los atributos del componente:

<open-street-map 
    ...
    (placeData)="getPlaceInfo($event)"
    ...
>
</open-street-map>