Overview

What will we develop in this case study?

In our third case study, we’ll develop a single page application, AppyMapper, which allows users to find Apple store locations across the United Kingdom, France, Germany, Belgium, and the Netherlands. It will incorporate the following features and functionality:

• Locate all available Apple store locations within a preselected distance from the user’s current geographic location.
• Filter stores by specific country
• Reload all stores
• Ionic Form components
• Capacitor Geolocation plugin
• Ionic Storage
• Implementation NGX-Leaflet library for digital map rendering

The application

By the end of the case study, we should be greeted by the following application:

Our application simply consists of a single page with:

• An interactive map displaying all Apple Store locations within Belgium, France, Germany, the Netherlands, and the UK
• A filters section where the user can display those store locations based solely on country or those nearest to their current geographical location
• A list of each store, with accompanying address and other contact details, will be displayed underneath the map.

The initially loaded state of the application displays all of the Apple Store locations for the following countries:

• Belgium
• France
• Germany
• Netherlands
• the United Kingdom

The following screen capture demonstrates the use of the “Nearest store to me” filter. This allows users to search within a 1000 mile radius of their current position, the coordinates of which are returned courtesy of the Capacitor Geolocation plugin:

Notice the three filters used within the application at the bottom of the above screen capture:

• Filter by country
• Filter by the nearest store
• Display all stores

The following screen capture demonstrates how the display of store location can be filtered by the selection of a specific country (the United Kingdom in this example):