I’m fairly new to WeWeb, I’m just moving here from Bubble.
I’d like to build a booking website with an interactive map using Mapbox.
Now I’ve come as far as building the map, loading data and having it interact with a list of the same data.
So when a user hovers a pin on the map, the corresponding listing is highlighted in the map.
Now I’d like the listings on the left to be sorted on distance from the center of the map.
I’ve made a Xano endpoint for this, but I need to fetch the center latitude and longitude.
Mapbox documentation says the following:
// Return a LngLat object such as {lng: 0, lat: 0}.
const center = map.getCenter();
// Access longitude and latitude values directly.
const {lng, lat} = map.getCenter();
I just don’t know how to fetch the map object from WeWeb.
Does anyone know how to do this or if this is even possible?
Any tips or tricks would be really appreciated!
Sorry for now its a limitation we have, you can’t access the instance of the map and I don’t see a way to get this information
But we will try to update mapbox next week with a new feature for that.
How did you provide the current center of the map ? It fit your markers ? Do you will need to get the center info again every time the user move the map or are the bounds of the map are fixed ?
I will probably make the instance of mapbox available but I guess you would like to have a trigger like on map bounds change and request your backend with the updated center info for example
For the current center I’m just using the coordinates of a central point in the Netherlands, I’m not sure if the bounds are fixed.
Up until now I have a little workaround where when the user clicks anywhere on the map, a variable (mapCentre) is updated as the center of the map.
The best case scenario would be that I could update the variable whenever the map bounds are changed, to the map center.
If the map bounds could be exposed as well, as an array of coordinates, that would also be great. I could then filter the search result to only show the listings within the map bounds.
We added the feature you needed. You can now access the current center of the map through a component variable. You can also react to an user dragging the map. More info in this post : Mapbox, Please Help! - #16 by Alexis
