Menu

Angular 2 and Leaflet : The Algorithmist

November 7th, 2017

Angular 2 And Leaflet - Ive Wanted To Do An Angular2 And Leaflet Demonstration.. [] #Software

  • My goals for this project include: – – Although a simple ‘loading’ component is provided with the code distribution, tile loading is sufficiently fast that it is unlikely to be seen.
  • 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.
  • 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.

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.

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:

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.

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.

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

Very little Leaflet knowledge is required to deconstruct and expand upon the code.  If you have gone through…

Angular 2 and Leaflet : The Algorithmist