Angular 2 and Leaflet

I’ve wanted to do an Angular2 and Leaflet demonstration for quite some time, but have been very busy as of late. I also understand that an Angular2/Leaflet starter already exists, but that project is accurately described as a ‘soup.’ I don’t do soups.

Although I wanted to be in line with the A2/Leaflet starter, I also wanted to go in a completely different direction, so a separate project seemed like the best approach. My goals for this project include:

  • Use the Angular2 CLI as the build tool
  • Create a complete micro-application as the demonstration environment
  • Adhere to concepts from Flux and Redux w/o 3rd party software
  • Classes adhere to principles such as single responsibility
  • Provide progress and error indication for services
  • Illustrate production-quality features such as preventing side effects from repeatedly clicking the same button
  • Provide an example of working with the component change detector
  • Use the Typescript Math Toolkit Location class for location data
  • Only minimal understanding of Leaflet is required

Although a simple ‘loading’ component is provided with the code distribution, tile loading is sufficiently fast that it is unlikely to be seen. After building and running the project, the application appears as shown below.

leafletmap

The map is initially centered on Carrollton, TX where I currently live.

Enter an address (which could be as simple as ‘Austin, TX’) or click ‘Show Current Location’ to move the map based on current IP address.  Third-party services are used to geocode either the IP or physical address and progress indications are provided in the navigator component.  A result of moving to Austin, TX is shown below.

mapaddress

The Typescript Math Toolkit Location class is used for location data and service errors are seamlessly reported to the user.

maperror

Very little Leaflet knowledge is required to deconstruct and expand upon the code.  If you have gone through the Leaflet ‘Getting Started’ guide, then you know enough about that package to deconstruct the code.

And, speaking of code, I know you want it so point your friendly neighborhood browser to the Github repository here and have fun!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>