Geolocation in Adalo

did you know that you can now use geolocation in your dollo app we're going to go over how to build a really simple app called coffee shops this is an app where you find the closest coffee shops to your current location and as a bonus feature a way to search near other locations too so this is what it looks like when it's finished we can click into a coffee shop see it on the map all of this is being done automatically for us based on the device location so if i were to log into a

browser somewhere else these would all update with new distances also all right so we're going to get started building this location based coffee shop finder now when you get started with locations there are a few setup steps that you have to go through and adalo has done a good job at giving you instructions to do these so if you go to their help resources you should find this location section it's under database and it has a getting your google api key page as a quick run through you do need to create a new project on

google cloud platform this is going to require that you have some sort of gmail or g suite account then you do need to also set up billing so you can use location features for free up to 200 worth of usage through google that's something they provide monthly 200 worth of credits after you go over that however anything that you have on file to build will be built so please keep that in mind also adolf has some information on estimating how much your api may be used but we're also going to look at my own personal

google cloud platform and we're going to see what the usage looks like just after building this app so let's keep scrolling down and see the other steps here i'm not going to go over these in detail because you'll have to walk through them on your own and all the screenshots are here too so we've got all of that about linking your google account also you will need to enable some apis so there's instructions on which apis to enable a couple more steps to get all of that done you'll end up getting an api key and

then putting that in a dollo under settings under google maps api key so that's how you set up the location feature for your app a few steps to get going probably take you about 10 minutes or so that's about how long it took me to get started but once you do that you should be all set to add really cool location features to your app so let's go back to my app i do have my api key already added so we're good to go and what i've done here is i've stripped the app of all

location specific features so we're back to ground zero right now if i were to open the app up and take a look it looks like some of this is maybe getting cached but for example like the the map isn't working at all this essentially the subtitle oh i still had that let's clear that out we'll get the subtitle out of here here we go so if we go into preview mode now we do have a list of locations these are just in the database that i've added i'll show you here in a second but nothing

is special about these they're not being sorted for me so what we want to do is fix that we want to make it so that wherever i am if i open this app it will get my location and it will sort the list and show me what's nearest to me okay so how do we do this first of all we have our database we have our coffee shops that we want to sort so i've added some of these already but you'll see there's this new property type called location this is available to use any time

but it's not going to actually work unless you've added your api key the billing is set up and everything is good to go on google's end so to do this in your database all you do is click add property and click location and then you can have a location property set i've already gone through and for all of my records set the location but just to show you that this location field is essentially like a google map search so you can type a place in here you can type an address and it will actually get

the rich information for you so look at the name it'll get the address it'll get the latitude and the longitude there's several different properties that come along with a location and just a note here that when you're using this location field and typing in a search that search counts as an action towards your api credits think about this anytime that you're doing something that requires talking to google and saying hey google give me something i hope i don't set anyone's google home devices off just now that's going to count towards an api action okay so

let's back out of here we've already got our list and i've already added the location for all of these so we're all set and ready to go now let's set this app up so that it is going to start filtering for me first and foremost your app does need to get permissions to use location this works on progressive web apps or pwas it also works on native ios and android apps but you do need to request permission before you can access somebody's device location adalo will do this automatically the first time you try to use

the device location if you haven't already asked for permission but if you have maybe an onboarding screen or something set up where you're already trying to get the permissions that you need for your app to run properly you can add it as a new action so for example if when somebody visited the home screen i wanted to not only get notification permissions but i also wanted to get location permissions i could do it like that and just make sure that we have location permissions on the home screen so we'll add that there now that we

have location permissions from the user let's go in and filter this you'll see that on our list since we have coffee shops linked and they have a location field we have an option under sorting to sort by location so we can do closest to farthest or farthest to closest i want to do closest to farthest on this one next we need to choose how we want that to relate so we want it to relate to the current device location but you can also do it by a custom location or if you add a location input

this is a new input option that will show you you can sort by that so we'll do that in just a second but for now we're gonna do the current device location you can also choose a fallback address so there's a tooltip here that says the fallback address will be used if the referenced sorting location cannot be found so for example if somebody doesn't give you their address or if there's some kind of issue with their connection to the api it'll use this address as the sorting reference we're going to leave this blank we don't

need to worry about that right now and then i think all of the rest of this is good so this is a pretty standard dollo app where we've got the list that links to a detail screen where we can view some more information so the only action on this is a link to details for title we have our coffee shop name this is a standard text field we have named it here but also we could get the name from the google information if we wanted to i'm not going to do this just because i want

to save on the amount of requests that we're making to google but it is an option should you want to use magic text to get the location name it is there you also have all these other options you can get the full address street address city state country postal code and latitude and longitude so several options there for the subtitle what i want to do is actually show the distance of this coffee shop from my current location so how am i going to get the distance that's actually a new formula so we'll click on this

magic text button click on new formula and then you have to click on this once you see custom formula just click on it to expand it and here we'll choose this button right here and click on functions miles there's also kilometers available if you need to use those but we're going to use miles for our app and here what we need to do and you'll see here when you're looking at the functions that this this example shown is that you want latitude a longitude a latitude b and longitude b so we're going to start with

the coffee shop so we're going to grab the coffee shop locations latitude this is pulled from google automatically add a comma and then get the longitude and then we need our location so we're going to get the current device location's latitude and the current device location's longitude all right there we go so this should now calculate how many miles are between the coffee shop and our device so we're going to add some suffixes here we'll start with a singular suffix for mile and a plural we're going to add an s to that and we should

be set so let's preview this let's see what we're looking like all right that's a lot of decimal places it is working so that's nice but we want to go through and clean that up let's go to the subtitle and for this let's change the number format let's do default okay now when we preview this that's a lot better so this is looking pretty good and it is sorted so we have the closest coffee shop and the farthest coffee shop in my list from top to bottom this is pretty nice but this is an app

to show coffee shops near me and i feel like seeing these coffee shops from seattle that are 1600 miles away from me in north texas as not very helpful so what i want to do is actually go through and add a filter so something cool we can do now is we can get a custom filter for location and choose a range or a boundary so we have is within or is not within but we're going to do is within and let's do 20 miles so we'll do is within 20 miles of the current device location

so now automatically when we go into preview mode here we should only see coffee shops that are within 20 miles from me still sorted closest to farthest but we're only going to see the close coffee shops so that's great what we want to do next is we want to set up the detail screen so when we click on here we want to make sure that the address and the location is shown so we'll just replace the address placeholder here we're going to get the current coffee shop's full address for that okay next for the map

what we want to do is go into markers and we want to add the current coffee shops latitude and then longitude also so what that should do is give us a pin right where the coffee shop is and that looks right so great now we have a really dynamic way to show where these coffee shops are all these distances are showing up for us let's add one more feature so we have this link to find near somewhere else what i want to do is basically give users the option to enter a location and get coffee

shops near there for example maybe you're planning some travel or you have somewhere to go and you want to get coffee when you're there rather than where you currently are so let's set that up right now first of all what we need is we need a way for the user to add a location um to do that we want to actually give them suggestions while they're typing if i'm traveling to seattle and i want to be able to put in the seattle airport rather than going and looking up the seattle airport address and then putting

that in and then using that in my functions i want to actually grab it from google so we have this new location input it's one of the elements if you go down to forms and fields it's called location input i've added it already but you can go and add it and then add some styling as well we're going to put this placeholder find coffee shops near you can add an icon default value styles all that good stuff so we've already added it and set it up next what we need to do is set up our

list to mirror what we're searching so for our list we want to sort closest to farthest from the location input so rather than the current device location like our first list we're going to choose location input and then fallback address we're going to leave as empty here and we also need to set up the subtitle so for the subtitle if you remember we'll go and add magic text click new formula open this new miles function up and then we're going to get the coffee shop latitude a comma coffee shop longitude add a comma but here

now instead of the device location we want to get the location input latitude and the location input longitude make sure to close that off with the end parentheses and then for the number format we wanted default and let's add a mile and miles here as well and all set there so now we should be able to see coffee shops that are near a location let's test it out and see what it looks like we'll go to this new screen currently we don't have anything in the location search so we don't see any distances that's correct

let's try seattle airport so we have the seattle tacoma airport and there we go so now we have the coffee shops that are near there with the distance from that location rather than our device locations the issue here is we're now showing all of my local coffee shops because they're part of my list so let's narrow this down we'll just add a filter really fast we want to do location is within 20 miles of the location input so now when we go in and we preview and we search we'll only have results within 20 miles

still sorted from nearest to farthest this is all set now showing us our locations dynamically we're getting coffee shops that are nearest to us or we can go search by a specific location and this is all being done dynamically with google maps before we close out let's go look at my api usage so keep in mind i've set this up twice i had to enter all these locations in i was using the google places api to get location information and every time we go in and we look at one of these screens it's going and

asking google where's the address where's the map what's the latitude and longitude where should i put the pin all these things so it's probably going to be several but let's just have a look real fast all right so this is my google cloud platform it's what i've connected to only this app and we have our places api with 83 requests our geocoding api with 34 requests and our maps javascript api with nine requests so not too bad you can see how this is several for just me hopping in here but you can use this as

an idea for how many users you have how many actions they may be taking on a regular basis and how much you might actually be spending on google maps in order to enable this for your app so remember you get 200 of credit google has a cool calculator to show you how much you might need but every month you have 200 in credit and then past that you will be responsible for billing i hope this video was helpful for you if you have any questions drop them in the comments or join us on discord and

i would be happy to chat with you there thanks