Location Tracking Apps: Implement Geolocation with Ionic

Geolocation is a powerful feature that allows you to create a richer experience for your app’s users. It provides them with useful features and personalization, increasing your competitive advantage, reach and revenue. In this article, we present the benefits of adding geolocation to your app and explain what you need to implement it with Ionic Framework.

 

You will learn:

1. What is geolocation?
2. How does geolocation work?
3. How geolocation can be used in web and mobile apps?
4. Examples of well-known apps that use geolocation
5. The market potential of delivery tracking apps
6. Why Ionic?
7. Tools needed to implement geolocation to your app
8. How to implement geolocation with Ionic?
9. Ways to deal with security issues
10. Extra: actionable tips from our developers

 

What Is Geolocation?

Geolocation is a piece of geographical information about your device’s whereabouts. It can be your Android or iOS smartphone, smartwatch, fitness tracker – a device that connects to the internet or/and has a GPS chip. 

 

How Does Geolocation Work?

We can use 4 techniques to establish a device’s location. 

GPS

GPS uses information that satellites send from space about location and timing. All smartphones are equipped with a GPS chip that needs data from at least 4 satellites to establish a device’s position with 60 feet accuracy.

Cell ID

Cell ID positioning uses cell towers which send a unique ID and parameters like mobile network code or location area code, combining it with signal strength. By searching these parameters in the database, we can establish location. It’s not as accurate as GPS and works better in cities, but it’s easier to locate IoT devices like that. They are placed indoors where GPS positioning is difficult.

Assisted GPS

This approach combines GPS and Cell ID to offer more precise information than GPS only.

Wi-Fi

Wi-Fi determines the position in a similar way Cell ID does. The only difference is that it’s more precise because it covers smaller areas.

 

Geolocation in Web and Mobile Apps

You probably already use geolocation to check the traffic on Google Maps or tag your location on a photo. But geolocation can also be applied by your app to offer users with personalized, richer experience, valuable information or comfortable service.

 

According to MarketsandMarkets, Location-Based Services (LBS) and Real-Time Location Systems (RTLS) market will grow from USD 16 billion in 2019 to USD 40 billion in 2024. All thanks to a demand to offer a personalized, location-based experience to the end-users.

 

Location-based services apps can do 4 major things:

• identify a user’s position and share it with others,
• calculate the distance between objects,
• detect movement from one point to another
• build optimum routes from one location to another.

 

Therefore, here are a few examples of what we can achieve with geolocation:

• users can mark their location and share with others where they currently are,
• geolocation can be used in a radio app to choose the nearest station and play local news,
• an app can show to a user what restaurant or particular stores are nearby,
• a map can show the fastest or most efficient route to a chosen point, and then guides a user to it,
• users can track their delivery in real-time (pizza, package) and know when to expect the delivery man (it’s also useful for B2B cooperations).

 

Geolocation can also be used by offline stores that have mobile apps. They can send push notifications with promotions or coupons to users that have their mobile app installed and are located close to their offline store. Push notifications are another powerful feature for mobile apps.

 

Well-known Apps That Use Geolocation

You already use geolocation with at least a few apps on your mobile device. Here are a few examples of well-known apps and industries that apply geolocation:

• location-tracking apps like Google Maps
• on-demand delivery apps like UberEats, Wolt, Glovo
• weather apps like Google Weather, Apple Weather
• fitness-tracking apps like MyFitnessPal, Endomondo
• travel apps like TripAdvisor, Booking
• dating apps like Tinder
• social networks like Facebook
• messengers like WhatsApp, Messenger.

 

Real-time Delivery Tracking Apps

Delivery or order tracking is one of the fastest growing industry branches that apply geolocation. Real-time delivery tracking apps allow users to follow the location of their package or order on a map. 

Real-time geolocation tracking is used by food delivery apps like Dominos. In the app, users can spot the exact location of a deliveryman and learn how much more they will have to wait for their order. 

Geolocation can be also used to track the position of a carrier with our package. It can be successfully applied by B2B apps. For example, ASAP app allows shippers to track a carrier with their load in real-time. Customers, on the other hand, also have access to shipment tracking, so they know when to expect delivery. Uber uses geolocation to inform where our ride is and sends notifications about a car’s plate number.

 

Cross-Platform App Development with Ionic

There are a number of ways to use geolocation in your app. But why implement it with Ionic? The Ionic Framework allows you to create one code and easily share it between iOS, Android and web, with only a few adjustments needed. It speeds up the process and enables you to put your app in front of users fairly quickly, reaching them on both platforms (and also web, if you want to). 

Ionic has one serious advantage: it allows developers to access native devices features easily, using plugins. You get convenient access to geolocation (and other features like camera, microphone or bluetooth). Ionic also easily integrates with Firebase, Firebase Cloud Messaging and Google Cloud Console, that, on the other hand, enables simple integration of Google Maps. It allows you to easily implement push notifications to your Ionic app (very powerful combination with geolocation), and set up a cloud environment so as not to build a complex infrastructure. It’s convenient, especially for MVP development.

Development with Ionic is fast because the framework provides many ready-made components. Documentation is detailed, rich and easy-to-follow. Ionic 4 introduced web components, so Ionic is framework-agnostic now (you can use your favourite framework or no framework at all), and has excellent performance (it’s called the best framework for Progressive Web App development, and they need to be fast and reliable).

 

Implementing Geolocation to Your App

Let’s proceed to implementing geolocation to your app. To build a geolocation-based app you need two things: location services and maps. You need to use services like Google Maps to present the device’s location on an actual map, display details, location info, and enable searching for nearby places. To add Google Maps to your app, you need Google Maps SDK for iOS and Google Maps SDK for Android. Then, with Places API you can implement, among others, Places Search (returns a list of places based on a user’s location or search string) or Places Details (returns more detailed information about a specific place, including user reviews).

Google Maps Platform

Google Maps Platform is a set of APIs and SDKs you manage from the Google Cloud Platform. To get started, you need to:

• create a billing account,
• create a project,
• enable one or more APIs or SDKs,
• get, add, and restrict an API key.

Each step of above is described in detail on Get Started with Google Maps Platform web page.

With the Maps SDK for Android and iOS, you add Google Maps to your app. The API automatically accesses Google Maps servers, map display, data downloading, response to users’ gestures. You can also add ground overlays, polylines, and markers to your app, to provide additional information and allow for better interaction.

Implementing Geolocation with Ionic

To use geolocation with Ionic, you need to use a Cordova geolocation plugin. This API is based on the W3C Geolocation API Specification. Repo: Cordova plugin geolocation. Here’s a tutorial on how to install the Geolocation Native plugin to Ionic Angular application. A Cordova plugin is the most basic one but it’s completely sufficient if you don’t need your app to perform any complex tasks in terms of geolocation. If you want your app to send location info in the background or you’d like to set up more efficient battery use, you will need a more complex plugin.

For iOS, you also have to add the configuration presented below to your configuration.xml file:

<edit-config file=”*-Info.plist” mode=”merge” target=”NSLocationWhenInUseUsageDescription”>

   <string>We use your location for full functionality of certain app features.</string>

</edit-config>

 

Dealing with Security Issues

An app that tracks a user’s location needs to be extra secure. Allocate enough time for QA testing. Also, try using these techniques to guarantee data safety:

• multi-factor authentication,
• encrypted communication,
• an SSL certificate, Network Security Configuration (Android) or App Transport Security (iOS).

In terms of storing the sensitive data on your user’s device, it is recommended, but you need to do it securely. That way, no-one who has access to the server will see the user’s data. Storing sensitive location data on the server is applicable only in cases when users don’t require the highest security measures. It’s also better not to store sensitive data on users’ devices.

 

A Few Tips from Our Developers

While configuring the settings, you need to find a compromise between accuracy and frequency of location info sending vs battery consumption.

Keep an eye on battery consumption optimization. Various optimization options (for example, those using information about the user’s physical location) entail detecting the phone’s movement to enable the localization or dislocating to switch to another base station.

You need to handle the geolocation permission requests correctly. Have in mind that along with new systems’ versions permissions change and become more strict.

 

Ionic Geolocation App – Example

We have decent experience in creating location-based apps. Actually, we really love developing cross-platform apps with a geolocation feature. (So, if you have any questions about implementing geolocation to your app, feel free to send us a question at hello@appstronauts.co.) 

One of the projects we are most proud of is ASAP – a transportation platform. It’s a cross-platform app developed with the Ionic Framework. The ASAP app is really complex and geolocation is one of its main features because it enables carrier tracking in real-time. Below, you’ll learn the details about this project.