Using Geopoints
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:
At any time, you can access the complete Ionic Project built with this tutorial at our GItHub repository.
Prerequisites
To complete this quickstart, you need:
- An app created at Back4App.
1 - Set up Google API Key
Install Angular Google Maps - AGM.
Import the SDK adding the generated key to ./src/app/app.module.ts.
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 plugin.
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.
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:
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.
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.
1 <agm-map
2 [latitude]="current.lat"
3 [longitude]="current.lng"
4 [zoom]="10"
5 [mapTypeId]="'roadmap'">
6
7 <agm-marker
8 *ngFor="let m of markers; let i = index"
9 [latitude]="m.lat"
10 [longitude]="m.lng"
11 [label]="m.label">
12 </agm-marker>
13 </agm-map> 4 - Showing current user’s location in map
Now we have a page to display the Map locations.
- Let’s head back to home.ts and implement a method to display the user’s location on the map
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 }- Let’s make use of Parse easiness now and look for the peers closest to the user location
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().
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.
- 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.
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.
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!
1 <div text-center class="gps-buttons">
2 <button ion-button block margin-top (click)="findMyLocation()">
3 Find my location
4 </button>
5
6 <button ion-button block margin-top (click)="getClosestUser()">
7 Find closest user
8 </button>
9
10 <button ion-button block margin-top color="secondary" (click)="getAllStores()">
11 Find all store
12 </button>
13
14 <button ion-button block margin-top color="secondary" (click)="getClosestStore()">
15 Find closest store
16 </button>
17 </div> 8 - Test your app
- 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.
- 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!