If you’re building a ride-hailing app or on-demand service, this is the guide for you.
By calculating the distance between two addresses on a map, you can display the total number formatted as kms or miles.
Beyond this, you can even use this distance to calculate how much a ride will cost based on a delivery drivers set rate.
The process of calculating the distance between two locations in Bubble includes:
- Designing your application
- Creating a dynamic calculation
- Displaying & properly formatting the distance as a number
- Structuring your database with the relevant data fields
- Showing both location points on a map
Full Transcript of Tutorial
1. How to design your application
In a demo application, you’ll see there’s currently two input fields displayed on our page.
If we add a location into both of these fields, Bubble will then calculate the distance between these two values. For example, if we set our first location to London, then our second location as San Francisco, Bubble will calculate and display this distance as 5,352 miles.
So how can you recreate this feature within your own Bubble editor?
If you open your application in Bubble, you’ll need to start by adding two input fields onto the page. As we’ll be working with locations today, these input fields will need to be the ‘search box’ element.
Within Bubble, search boxes allow you to pull and display data from ‘geographic places’. If you select the geographic places option, this will automatically integrate with Google Maps – providing you with real-world location data.
2. How to perform the calculation
After designing the UI, we can now create the functionality to calculate the actual distance between two location points.
To get started, we’ll need to add a text element onto our page. You can position this below your two search box fields.
Now, we’ll choose to ‘insert dynamic data’. For this value, we’ll reference the search box that contains the destination we’d like to travel to.
In our dynamic expression, we’ll then select the ‘distance from’ option, referencing the location of the origin address.
After specifying both your locations, Bubble will then allow you to format the distance between these two points in miles or kilometers.
For our example today, we’ll use miles to determine the full distance.
3. How to display & properly format the distance as a number
When displaying the distance between two points as a number, you’ll notice that the resulting metric will often have quite a few decimal places. In its current state, decimal places aren’t necessary within our application.
To remove these decimal places, we can simply select the ‘more’ option after our dynamic text expression, then choose the ‘format number as’ operator. This will now allow us to customise the resulting number however we’d like.
In this instance, we’re going to update the number of places displayed in our decimals to 0. This will allow Bubble to automatically round up any decimal places to become whole numbers.
If we then run a preview of our application, you’ll see that when calculating the distance between two points, the resulting number is cleaner for our end users.
4. How to setup your database with the relevant data fields
At this point in our app, we now know how to calculate the distance between two locations using search fields. But what I’d now like to focus on is a more advanced use case for calculating the distance.
In our example today, we’ll create a ride-sharing app like Uber. In this app, users can add their pickup location, then request a driver.
When a driver is requested, our app will run a workflow that calculates which driver is closest to the current user’s location.
Beyond this, it will then calculate the distance from the pickup address and the drivers current location, then determine how much this trip is going to cost by the driver’s rate.
Now, in this example, instead of just storing location data in two separate input fields, we’re actually going to store this in our database.
If you open your data tab within Bubble, you’ll need to create a new data type called ‘driver’. This will store all of the information for each individual driver within our app.
Inside this data type, we’ll then need to create a few separate data fields. These include:
- Name – stored as a text type
- Location – stored as a geographic address type
- Price per mile – stored as a number type
While you’re working in your database, I’d recommend taking the time to also create a series of dummy entries for both your user and driver data types. This will allow you to populate your app when running a preview.
5. How to show both points on a map
After configuring our database, we can now build the UI to power our ride-sharing app.
If we open our design tab, we’ll start by adding a map element to the page. This map will be used to display a driver’s location.
When building our map, we’ll have this display a list of markers instead of a single point. This will allow us to display the location for all the drivers in our database instead of just one at a time.
We’ll then need to configure which data field we’d like to display on the map. In this case, it will be the driver’s ‘location’ data field.
Below this map, we’ll then add in a text element, as well as a button. The text element will be used to display the distance between a user and the closest driver.
For the text element, we’ll need to insert dynamic data to perform our calculation. We’ll start by performing a search for all of the drivers in our database.
We can then choose to sort the list of drivers by their ‘location’ data field. When sorting by a location field, you’ll see that Bubble prompts you to add an origin address. This allows Bubble to calculate the distance between two points.
In our example today, the origin address will be the ‘current geographic position’ of the user.
Now Bubble will determine which drivers location is closest to the current user requesting a ride.
Once Bubble knows who the closest driver is, we can display that driver’s information, as well as their distance from the current user.
This will look something like ‘Bob is 15 miles from your current location’.
Finally, I’d not only like to display the distance between our driver and rider, but also calculate how much this trip would cost based on a driver’s rate.
If you remember, in our database, we have a field called ‘price per mile’ under our driver data type.
After calculating the distance between two points, we can easily multiply this distance by a driver’s rate – allowing us to determine how much the trip will cost.
As a result, our text element will now display something like ‘Bob is 15 miles from your current location. This journey will cost you $12.50’.
And just like that, you now know how to calculate the distance between two locations on a map in Bubble.