I am constructing a map assisted search page, so I am displaying map markers based on basic search criteria.
The user can then scroll around the map and zoom in on different areas meaning the markers in view will change based on where this user is looking. I would like to display a list of the objects that those markers represent that are currently in view. How would I go about doing this?
@drew.payette . I have the same need. Did you make any progress yet?
Not as of yet, it’s not a critical feature for me. If I discover something I’ll update.
there is an app I helped build using Bubble that had similar functionality, but in this app, the list of locations is displayed fully beside the map (with filters of course) and when a pin in clicked on the map, the list scrolls to that item. But you would like the list items displayed to change dynamically as user scrolls around the map, right? doable, you would need to make the map center a filter and refresh the list as that changes, but it’s not very practical. It’s heavy work if you have a big database.
this is the app I told you about; built by piblo
I can walk you through it if you decide to go for it.
I am curious how you would filter? My question arises from a thought that the center point of a map at different zoom levels would affect the filter as the only filter I could think to apply would be to filter by distance from the center, and without having a sense of how to determine which distance (number of km or miles from value) to put in the filter constraint.
I’m think that, if it was possible, to find the maps northeast, southwest etc. lats and lngs to know what are the four border points of the map and try to filter by identifying only the data entries whose address/coordinates is contained within the border points.
I meant that you can always choose a list of items that are within a certain distance from the map center, like you said. Items visible on the map will match the list if you disable zooming. It really depends on your own product’s map functionality and the ability to zoom/drag.
Yes, thanks for that. I’m hoping to find a way to know the coordinates of the maps NE, SW, SE, NW lat/lng values to know the entire area of the map, regardless of the zoom level to show a list of items whose coordinates fall within the boundaries of the map.
Do you know how to find the boundaries of the map?
I think it’s gonna be tricky since the lat/lng values will be functions of the map element height and width as well as zoom level, all of which are variable based on the page design and device size. it’s something to think about, though.
Hey, looking to build a similar feature in our app. How’d you do this “the list of locations is displayed fully beside the map (with filters of course) and when a pin in clicked on the map, the list scrolls to that item” ?
I’m assuming you already have your map and repeating group of locations, correct? in that case, you can give the map a custom state of type location (which is the same data type in your repeating group) and when a pin is clicked, set up a workflow that:
- sets the new custom state (the one you just created for the map) to to this location.
- apply “scroll to entry” on the RG. Entry should be map’s custom state value you set in step 1.
Thank you. Yes you were correct in your assumption. Ok, I’ll give that a go!