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 prerequisites 1 set up google api key install angular google maps agm import the sdk adding the generated key to /src/app/app module ts 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 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 let’s pull up the maps html now and make it display the data 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 let’s make use of parse easiness now and look for the peers closest to the user location 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 back4app website login, find your app and open its dashboard go to core > browser > create a class, as shown in the image below in the field what type of class do you need?, choose the custom option in the field what should we call it?, type “ stores ” and then click on create class button 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 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 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 easy, right? now, let’s get the closest one 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! 8 test your app login at back4app website https //www back4app com/ 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!