While working on my first bubble-app, I could need some help from the community.
I have a list of geographic addresses in a database which I like to show on a Map (-> achieved this already). Now I would like to show the user’s actual position as well. In addition, only the addresses within a range of e.g. 5 km to the user’s position should be shown on the map.
I already searched this forum (and google). And I found so much information that I am a bit confused. Do I need a special Plugin for this task? Do I need the google places API plugin? Is there a tutorial of how to achiev this task?
I’d highly appreciate any advice or idea concerning this issue.
If you have not already, add a field to the type User called location (type geographic address) and also to your list of things, eg to your restaurants, add a field called location , type address, too.
To the map element, which should show a list of markers, type geographic address, add to the source: plus item: Current User. The example shows how this would look for all restaurants within 10km plus the current user’s location.
The limitation here is that all markers (the restaurants and the user are red) so hard for user to see which is which. If you want to improve the user experience, you can e.g. have the map standard settings to only show the restaurants, and add a button, show my location, that if clicked changes the data source of the map to all restaurants plus item current user’s location. Alternatively, you can maybe look for plugins to customize map markers.
You asked if you need google places API. For this you do not. If you want users to be able to show existing restaurants findable on google on a map or search those, you would.
To update the user’s location you can run a workflow every 5 minutes, or edit user’s location on page load. To do this go to your workflow tab, click the empty box to add an event and add a workflow for “On page load” or "Every 5 seconds). [edit] As a colleague has remarked, doing every 300 seconds, still takes up a lot of resources, so unless you expect the user to change locations a lot, doing it once on page load, or if a button is pressed is probably most resource efficient for bubble.
hope this helps & happy bubbling, do pm me if you need more help. also can help auf Deutsch,
regards,
Julius
WOW. Thank you very much for this detailed explanation!!!
I managed to do achieve my goal by using the google map (bdk) plugin. The plugin can show different (custom) markers. So I used a blue one for the user’s position and red markers for the Addresses.
At the moment I am struggling with balancing a dynamic map-zoom in relation to the radius-distance. The user can change the Distance Radius with a slider (0-200 km). The map zoom has to change from 14 to 6. The linking of these values is not that difficult (used an expression via the Toolbox plugin). Unfortunately (as many things in life) the the outcome needs to be exponential rather than linear. I did’t find out how to apply a curve to remap the values, yet.
To update the user’s location you can run a workflow every 5 minutes, or edit user’s location on page load.
That’s a very good point! I didn’t realize, that the user’s position needs to be updated at all. Thought that google does this in the background. Thanks for this hint.
… do pm me if you need more help. also can help auf Deutsch …
