Geographic help

Hey @mpozek :slight_smile: Here is a similar post about displaying Events on a map that are within X miles of a location:

In your app, instead of having an Event data type, it could be called “Store”, with two fields to start:

  1. Name (type: text, list: no) This would store the name of the Ice Cream Store
  2. Address (type: geographic address, list: no) This would store the address of the Ice Cream Store

And then you would need a page which allows Users to create new Stores, using a set up like this (for example):


*Note: The Name Input is a regular Input Element, but the Address is a Searchbox Element, with the following settings:

When “Create” is clicked, the workflow to Create a Store is:

Here we’re just telling Bubble to first create a new Store (using the Data → Create a New Thing Action, with the Thing being a Store), and saving the Name Input’s value to the Name field, and the Searchbox Address’s value to the Address field. Once that is saved, we reset the inputs where the User just typed in the new Store’s information. If we had a store called “Sally’s Ice Cream” in New York City, it could look like this:

Then when Submit is clicked, it’s added to the database. You can view it in the app data tab by going to:

To display stores on a map, within 50 miles of a User’s location (for example), we can set up our map in this way:

In preview mode, it looks like this:

Beneath the map, there is a repeating group which is showing more information about the Stores as well:

You can also use an input to make the “within X miles” dynamic as well. So if you wanted to allow the User to enter “5” for the radius, the constraint expression would be: “Address is within [Input Miles] miles of [Searchbox Location’s value]”. And that should do it! Feel free to let me know if you have any questions or need any help in setting this up :slight_smile:

Editor:

Preview:

4 Likes