Build Leaflet Maps in AngularJS apps with ngx-leaflet

This is a learning note when I tried to integrate Leaflet Maps in Angular apps and assemble a few Leaflet plugins. The ngx-leaflet library evolved a lot in last two years, especially this year since version 13.x. It’s more easy to use now, while it also makes many often seen tutorial documents obsolete. I’m glad to figure out the runnable solution without wasting too much time. Hope this note will be helpful to those who ran into likely problems.

Firstly, create a new angular app:

npx @angular/cli new angular-leaflet-demo --style=css --routing=false --skip-tests

Implement Leaflet

Install packages:

npm install leaflet
npm install @asymmetrik/ngx-leaflet

in app.module.ts:

import { LeafletModule } from '@asymmetrik/ngx-leaflet';
imports: [
	...
	LeafletModule
]

Add the Leaflet CSS in angular.json as follows(Noted the leaflet.css need to be ahead of styles.css):

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

Create the map component:

npx @angular/cli generate component map --skip-tests

Replace content in map.component.html as:

<div class="map-container" leaflet     [leafletOptions]="options"     (leafletMapReady)="onMapReady($event)"></div>