This is the code distribution for the Medium Article, Integrating maps into your Angular application with Leaflet .
This code distribution illustrates how to integrate Leaflet Map using ESRI tiles into an Angular 8 component. The map is responsive and adjusts its width based on current browser width. The demo also illustrates that Angular components may be used as custom map controls. Map icons are also displayed.
This should be a sufficient introduction into Angular/Leaflet integration to begin working on a wide variety of mapping appliations with these tools.
Author: Jim Armstrong - The Algorithmist
@algorithmist
theAlgorithmist [at] gmail [dot] com
Angular: 8.0.1
Leaflet: 1.5.1
Esri-Leaflet: 2.2.4
Angular CLI: 8.0.3
Typescript: 3.4.3
After loading, the map is rendered at the center coordinates injected into the application. The zoom level is currently hardcoded along with some map marker coordinates. Change as you see fit.
To inject a new map center, alter the coordinates in /src/app/app.module.ts,
providers: [{ provide: INIT_COORDS, useValue: {lat: 32.9756, long: -96.89} }],
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.
Apache 2.0
Free Software? Yeah, Homey plays that