Make Repeating Group Responsive to map view and map markers (Uber-like or Airbnb-like effect)

I want to share how one can now use the zoom feature to create an “uber-like” map. In the application example provided below, you can render to a repeating group those locations and markers visible within the mapview. As you modify which markers are visible in the map, the repeating group in turn displays information about those visible markers.

Thank you to those who make the zoom feature available to us as well as to the other bubblers who share my interest in the feature.

@neerja
@Tomdez1989
@seanhoots
@AliFarahat

Disclaimer: I am a total Bubble hack and not a programmer or developer in the professional sense. My solution is a sloppy, clumsy attempt at achieving the aforementioned functionality, so I would love for one of the actual developers in this forum to make this effect available in a cleaner, more stable manner.

As my attempt does not pretend to be an actual solution, there are a few limits worth noting. First, the solution I hobbled together requires a 400 pixel by 400 pixel “Google Maps Extended” plugin. Second, I shaded those areas of the map where visible map markers will not render data in the corresponding repeating group since this solution is based upon the radius from the center of the map and not the full bounds of the map. Third, the solution is dependent upon a couple of tables I added to the example database that make the computation required possible. There may be an easier approach using plugins, but I was unable to figure out how to do it. Without the calculations, the solution would inaccurately display in the repeating group what is visible on the map due to the way the circumference of the earth changes, depending on your latitude. What is visible on the map in the southern U.S. might represent a mile radius while the same size map shown at the same zoom level at the northern-most tip of Alaska would only represent half a mile radius.

To make the example work, you will need to add your own Google API key. You can add information the the incident database that contains the location data or drag the map to Albuquerque to see the locations already entered. (I live near Albuquerque, so I entered in some random locations there)

As this was my first attempt to post an application to the forum, and given that I am still pretty lame when it comes to my Bubble skill level, I may have either exposed important personal information in the example application or failed to do something to make is accessible by anyone who might be interested, or both. Feel free to let me know if I need to do anything to either secure the example application or make it more accessible.

Click the big blue button to start. Enter Albuquerque, NM as the address to search, and then click and drag the map, hiding and revealing the map markers. Watch the repeating group respond.

–Destry

7 Likes

That’s some serious creativity @destryhunt.dh I am really impressed ! As you said it has its limitations (e.g. if the map is of rectangular shape), however, it has the advantage of showing Bubble how the missing feature should work.

1 Like

Thank you for the kudos. I did work hard on it, so as amateur as my attempt was, your kind words help a lot. Until there is a more professional solution, I plan to use what I made with a fixed width so that I do not have to contend with the rectangle issue you mentioned. Thanks again for your feedback.

1 Like

This was a great solution. Do we have any timeline for this functionality to ship natively within the Bubble editor? This is a crucial functionality of any map and directly impacts my app’s functionality.

1 Like

Well, I don’t work at Bubble. I’m not near smart enough to create the actual solution that I proposed, although I did stay in a Holiday Inn Express.

I will defer to them for a response. The solution I proposed actually works, but it is a pretty sloppy way of going about it. I am sure that the Bubble devs would do a much better job at solving the problem

1 Like

Want to vote for this as well. It’s critical to my app as well. Actually to multiple ones I’m working on come to think of it.

2 Likes

+1, did we have any progress… is there a plugin

Google maps (bdk) already has this. Outputs list of (your things associated with) visible markers dynamically that you can simply use as source data for repeating group. See this thread:

3 Likes

Hey All,

Google maps extended plugin below has almost everything you need and its free, just off the top of my head

  • Custom Maps
  • Styles
  • Customize map controls
  • Marker
  • Marker List
  • Marker Hover
  • Marker Click
  • Map events like, center, bounds change
  • Panto markers
  • Markers in view
  • directions
  • Multi-step directions
  • GeoJSON
  • GeoJSON styling
  • Panto GeoJSON
  • and so much more

The plugin is here

Demo site here

Missing a feature? sponsor it and make it available to you and the community. DM me for details

4 Likes

Hi @AliFarahat, thanks for the plugin, works so well, repeating group showing only what’s on the map when moving or zooming, adding geoJSON… Great job and mega useful.

Quick question, is there a way to detect if a marker (or list of markers) is within a polygon’s limits ?

For a town it’s quite easy to compare the addresses with extract city function and display results accordingly, but for neighborhoods it becomes more complicated because in some countries google doesn’t show anything when extracting neighborhood’s component. That’s where the “marker is within polygon” would come in handy.

Hey @Tomdez1989

Yes there is but that feature may mot be baked in the plugin. Please DM me with more details about what your trying to do. I can help there

Hey @AliFarahat, I’m looking for a similar solution (the ability to check if location is within polygon).

Any solution you might be able to help me with?

Thanks!

Hi! Tell me, please, was it possible to find a solution? I really need this feature. Thanks!