---
title: Using Geopoints
slug: back4app/vDRGb0wIPpJ5eSIl0dxdH
description: In this tutorial you’ll learn how to use geo points on your Ionic app to find out what user is closest to another user or which places are closest to a user.
image: https://www.back4app.com/images/logo-social.png
createdAt: 2024-03-08T14:13:55.114Z
---
# Using geo points with Ionic framework
## Introduction
Parse allows you to associate real-world latitude and longitude coordinates with an object. Adding a **ParseGeoPoint** to a **ParseUser**, you will be able to easily find out which user is closest to another, show the locations of the users of your app and also store the user’s location information, among other possibilities.
You can also associate a **ParseGeoPoint** to any **ParseObject**. For example, if your app is associated with a store with physical affiliates, you will be able to create a page to show the location of those stores or to show the user which store is closest to him. Another example of this association usage: if your app is a game in which you created ParseObjects to represent characters, adding ParseGeoPoints to these characters would allow them to be shown along the player’s path.
This tutorial explains how to use some features of ParseGeoPoint through Back4App.
After following this tutorial, you will be able to do this:
::Image[]{src="https://api.main.archbee.co/api/optimize/yD3zCY-NNBBIfd0uqcfR5/lC9NUmr8W2RwRGh9nPGSM_image.png" size="40" width="359" height="639" position="center" showCaption="false"}
:::hint{type="success"}
At any time, you can access the complete Ionic Project built with this tutorial at our [GItHub repository](https://github.com/back4app/ionic-email-verification).
:::
## Prerequisites
:::hint{type="info"}
**To complete this quickstart, you need:**
- [Visual Studio Code ](https://code.visualstudio.com/download)(or any web IDE you like).
- [Ionic Framework ](https://ionicframework.com/getting-started/)
- An app created at Back4App.
- Follow the [New Parse App tutorial](https://www.back4app.com/docs/get-started/new-parse-app) to learn how to create a Parse app at Back4App.
- Followed the [Start Ionic from Template](https://www.back4app.com/docs/js-framework/ionic/ionic-template) tutorial to learn how to connect your Ionic app to Back4App.
- A [Google Maps API key](https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en) for map display.
:::
## 1 - Set up Google API Key
Install [Angular Google Maps - AGM](https://angular-maps.com/api-docs/agm-core/).
:::BlockQuote
$ npm install @agm/core
:::
Import the SDK adding the generated key to `./src/app/app.module.ts`.
:::CodeblockTabs
app.module.ts
```typescript
1 @NgModule({
2 imports: [
3 AgmCoreModule.forRoot({
4 // please get your own API key here:
5 // https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en
6 apiKey: 'API-KEY'
7 })
8 ]
9 })
```
:::
## 2 - Retrieve user’s location
To retrieve user’s location, we’ll need to install [Ionic Geolocation](https://ionicframework.com/docs/native/geolocation/) plugin.
:::BlockQuote
$ ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION\_USAGE\_DESCRIPTION="To locate you"
$ npm install --save @ionic-native/geolocation
:::
Now that we installed and imported `Geolocation` to `providers` at `./src/app/app.module.ts`, let’s implement the get location method and store the results to a class attribute.
:::CodeblockTabs
app.module.ts
```typescript
1 @NgModule({
2 imports: [
3 AgmCoreModule.forRoot({
4 // please get your own API key here:
5 // https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en
6 apiKey: 'API-KEY'
7 })
8 ]
9 })
```
:::
## 3 - Create a page to display the map
Now that we have the user location, let’s create a page to display the map, using the already mentioned \[Angular Google Maps].
First, run the helper:
:::BlockQuote
$ ionic generate page Maps
:::
Let’s now make it receive a `Marker` that holds the **current** position the map is displaying and an array of `Markers` that will be the pin points around the map.
:::CodeblockTabs
maps.ts
```typescript
1 let data = this.navParams.get('data');
2 this.current = data.current;
3 this.markers = data.markers || [];
```
:::
Let’s pull up the `maps.html` now and make it display the data.
:::CodeblockTabs
maps.html
```html
1
6
7
12
13
```
:::
## 4 - Showing current user’s location in map
Now we have a page to display the Map locations.
1. Let’s head back to `home.ts` and implement a method to display the user’s location on the map
:::CodeblockTabs
maps.ts
```typescript
1 findMyLocation() {
2 let current:Marker = {
3 lat: this.geoposition.coords.latitude,
4 lng: this.geoposition.coords.longitude
5 };
6
7 this.navCtrl.push('MapsPage', {data: {current, markers: [current]}});
8 }
```
:::
1. Let’s make use of `Parse` easiness now and look for the peers closest to the user location
:::CodeblockTabs
home.ts
```typescript
1 getClosestUser() {
2 let geoPoint = new Parse.GeoPoint(this.geoposition.coords.latitude, this.geoposition.coords.longitude);
3 let query = new Parse.Query(Parse.User);
4 query.near('Location', geoPoint);
5 query.limit(1);
6
7 query.find().then(users => {
8 let user = users[0];
9 console.log('Closest user', user);
10
11 let current:Marker = {
12 lat: user.get('Location').latitude,
13 lng: user.get('Location').longitude,
14 label: user.get('name')
15 };
16
17 let me:Marker = {
18 lat: this.geoposition.coords.latitude,
19 lng: this.geoposition.coords.longitude,
20 label: 'Me'
21 };
22
23 this.navCtrl.push('MapsPage', {data: {current, markers: [me, current]}});
24 }, err => {
25 console.log('Error getting closest user', err)
26 })
27 }
```
:::
You can see how simple it is. Basically all we had to do is instantiate a `query` object for the `User` collection and make it look for the closest geo location by calling `near()`.
:::BlockQuote
1** let** query **=** **new** Parse.Query(Parse.User);
2 query.near('Location', geoPoint);
:::
## 5 - Set up Back4App to associate ParseGeoPoint to ParseObjects
Suppose that the example app you are building is associated with a group of stores with physical affiliates. It would be interesting to show all the physical affiliates of this store in the map. In order to do so create a Stores class on Back4pp Dashboard, save the existing stores as ParseObjects, their locations and after that the app will be able to query the physical affiliates and display their possitions on the map. The following steps will help you with that.
1. Go to [Back4App website ](https://www.back4app.com/)login, find your app and open its Dashboard.
2. Go to `Core` > `Browser` > `Create a class`, as shown in the image below.
3\. In the field `What type of class do you need?`, choose the `Custom option`
4\. In the field `What should we call it?`, type “**Stores**” and then click on `Create class` button.
5\. Then a new class called “**Stores**” will be shown and you should insert 2 columns on it: a collumn with data type `String` called `Name`, as well as another column with data type `GeoPoint` called `Location`. Your class should end up like this:
6\. Now, fill this class with information. To do so, click on `Add a row` button in the menu on the top right or in the middle of the page, as shown in the image below.
7\. Then fill the row with the informations required: the name of the store and its latitude and longitude. After inserting some data, your Stores class should look like the image below. If you want to insert more data, you can click on the `Add a row` button on the top, or in the `+` button bellow the last row of data.
Now you are ready to use the location information of the stores in your app.
## 6 - Display all the stores location on Map
Now that we have the stores location stored, let’s code a method to get the objects and display them.
:::CodeblockTabs
home.ts
```typescript
1 getAllStores() {
2 let query = new Parse.Query('Store');
3
4 query.find().then(stores => {
5 console.log('Stores', stores);
6
7 let markers = stores.map(s => {
8 return {
9 lat: s.get('Location').latitude,
10 lng: s.get('Location').longitude,
11 label: s.get('name')
12 };
13 });
14
15 this.navCtrl.push('MapsPage', {data: {current: markers[0], markers}});
16 }, err => {
17 console.log('Error getting closest user', err)
18 })
19 }
```
:::
Easy, right? Now, let’s get the CLOSEST one.
:::CodeblockTabs
home.ts
```typescript
1 getClosestStore() {
2 let geoPoint = new Parse.GeoPoint(this.geoposition.coords.latitude, this.geoposition.coords.longitude);
3 let query = new Parse.Query('Store');
4 query.near('Location', geoPoint);
5 query.limit(1);
6
7 query.find().then(stores => {
8 let store = stores[0];
9 console.log('Closest user', store);
10
11 let current:Marker = {
12 lat: store.get('Location').latitude,
13 lng: store.get('Location').longitude,
14 label: store.get('name')
15 };
16
17 let me:Marker = {
18 lat: this.geoposition.coords.latitude,
19 lng: this.geoposition.coords.longitude,
20 label: 'Me'
21 };
22
23 this.navCtrl.push('MapsPage', {data: {current, markers: [me, current]}});
24 }, err => {
25 console.log('Error getting closest user', err)
26 })
27 }
```
:::
You can see how it’s just like getting the closest `User` as we have done earlier.
## 7 - Add buttons to Home Page
You probably noticed we have no way of calling those methods, let’s add the buttons to the `home.ts` then and make it happen!
:::CodeblockTabs
maps.html
```html
1
2
5
6
9
10
13
14
17
```
:::
## 8 - Test your app
1. Login at [Back4App Website](https://www.back4app.com/).
2. Find your app and click on `Dashboard` > `Core` > `Browser` > `User` and create some users with location associated to them to allow the method `getClosestUser` to work.
3. Run your app in a real device or in the browser to sign up and log in. Try every feature!
## It’s done!
At this stage, you can use some features of ParseGeoPoint through Back4App!