Skip to content
A soup of Angular and Leaflet
TypeScript HTML JavaScript CSS
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e angular 5 & angular-cli (#47) Feb 11, 2018
src fix z-index of base maps and vt layer (#56) May 19, 2018
.editorconfig angular 5 & angular-cli (#47) Feb 11, 2018
.gitignore angular 5 & angular-cli (#47) Feb 11, 2018
.travis.yml B/fix airport layer bug (#50) Feb 12, 2018
LICENSE Initial commit Dec 20, 2015 Fix sourcecode path (#63) Nov 11, 2018
angular.json fix output path Aug 11, 2018
karma.conf.js angular 5 & angular-cli (#47) Feb 11, 2018
package-lock.json F/upgrade to ng7 (#62) Nov 7, 2018
package.json F/upgrade to ng7 (#62) Nov 7, 2018
tsconfig.json angular 5 & angular-cli (#47) Feb 11, 2018
tslint.json angular 5 & angular-cli (#47) Feb 11, 2018


Build Status

A web mapping application starter based on Angular X and Leaflet. This project demo includes basic mapping features:

  • Display base maps from different sources

  • Initialize map based on user's IP address location

  • Geocode address and zoom to result location

  • Add/remove markers on the map

  • Use unofficially typed Leaflet plugin

  • Built with Angular CLI

Support Angular 7 and Leaflet 1.3 now!

See how it looks at demo page.


Was it named angular2-leaflet-starter?

Yes, but no longer. Angular is evolving rapidly and has moved further from 2.0. This project is renamed to ngx-leaflet-starter, meaning that it will evolve with Angular and stay close to the latest version.

How about new features?

Since this project has been reached its initial goal to provide a small and clean code base for Angular and Leaflet integration, currently there is no plan for new feature development. But I am open to suggestions and PRs. If you think it's beneficial to add something new (not for very specific use cases), please feel free to submit an issue for dicussion.

Oops, this plugin is not typed!?

Most Leaflet plugins are not typed, but it doesn't mean they are not usable. To use them in a TypeScript project, one way is to provide a minimal type declaration file.

In the starter, a minimal type declaration file is created for the Leaflet.VectorGrid. This plugin is used to add the global airport sites (from as a vector tile layer.

How to start?

This project requires npm (or yarn).

  1. Run npm install to install dependencies.

  2. Run npm run start to set up the dev server.

  3. See the app at localhost:4200.

Thanks to these awesome people!

Looking for other demos?

You can’t perform that action at this time.