Geographic help

[mpozek]

Hey all,
I just started to work in Bubble and took the tutorials but I am still having a hard time with a concept that I would think is easy.

I have a list of locations, let’s say ice cream stores and I want the user to input an address and based on this dynamic information the various ice cream stores within X miles will appear. For some reason, I cannot figure out how to do this.

I created an input box and a button that says submit. I also created another page which has a map on it. I can get the map to display my locations but I don’t see a way to limit it to within X miles. Plus, in other map features, there is a pin where their location is, but I cant get this to work.

Also, with the above approach, won’t I overload my database with user locations? Is this the best way to set up the search function?

Any ideas? What am I doing wrong?

[Bluflame_Labs]

Rodrigo Vega from https://bluflame.xyz here,

You can make the research by using search conditionals, if you are working with a geographic elements, the option display by miles will appear and with dynamic values you will be able to put the value desired

[Bluflame_Labs]

Also about the pin in the center, its a simple trick. You just have to put an icon in the exact center of the map, and when selecting in the map a location, use the option “center of the map” (or something like that, I don’t fully remember).

best!

[fayewatson]

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

Filter Based on Geolocation

Hi @cfisher440 One way to do this would be to use the ‘Searchbox’ element which automatically detects the User’s ‘current geographic position’, or searches for other addresses depending on what the User types in: [image] [image] Then you can set the center point of the map to be the location entered in the Searchbox: [image] To only show Events near that location (for example, within 50 miles), you can add a search constraint in the “Do a Search for Events” expression, whi…

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

Editor:

Bubble Editor - faye-demo-app

Preview:

Bubble - Visual Programming