How to integrate Leaflet into Angular 5

Question

I've got the standard Angular 5 build and I'm trying to include a Leaflet map. The documentation gives me an error when I follow it. I'm trying to import Leaflet through NPM and include it but I can't find documentation.

I know I need the CSS, ID tag, and imports...

I've downloaded "leaflet" into my "node_modules folder".

Now what? What is the import code for the Leaflet module that I need to put into my "app.module.ts" file?

kklimczak kklimczak · Accepted Answer · 2018-03-16T21:47:21

Firstly, for better development, install through npm @types/leaflet to get leaflet types in application. After that, you need to create component with Map property (imported from leaflet) and use factory function map (also imported from leaflet). The most of examples show configuration using id, but you can pass HTMLElement.

constructor(private element: ElementRef) {}

ngAfterViewInit() {
  this.map = map(this.element.nativeElement, {...options})
}

At this moment, I develop library to integrated leaflet with Angular 5 using components. First stable will be released in next week, but I have first beta release on npm here.

How to integrate Leaflet into Angular 5

1 Answers