Mapbox - dynamically set map bounds/zoom level

[tumil]

Good day,

We are developing an app that relies heavily on the Zeroqode Mapbox plugin, however I am now running into an issue. I need it such that when a user takes a certain action, the map updates with a new route and **dynamically zooms to show the entire route, **no matter how long or short it may be.

Ideally this would be a feature that could be done with a bubble workflow as Mapbox GL JS has the “fitBounds” function that can take coordinates and use them to set zoom level. Is this possible currently?

If not, is it possible for me to do this by running Javascript in Bubble? In other words, since this is a simple method to construct, how can I get the variable name of the map in javascript so that I can implement the fitBounds function into my app?

Thank you in advance!

[dorel]

Hello @tumil,

Thanks for reaching out to us and apologies for the delay over the weekend

We are currently looking in your questions and will get back to you as soon as possible!

Best regards

[dorel]

Hello again @tumil,

Thank you for your patience!

To better assist you, I’d like to gather more details about your specific use case. Could you please let us know where more exactly you envision implementing this feature? For example, you wish to have the route centered on the element after it is created, or other situations.

Once I have this information, I’ll discuss it with our development team to ensure we explore options that best align with your needs.

Best regards

[tumil]

Hi @dorel , thank you for your response.

We are developing an app that will allow users to manage deliveries.

On the dispatcher’s screen, they will see a map and a list of deliveries. When they click on a delivery in the list, the map updates to show the route for the driver and to be centred in the middle of the route. This functionality works as expected.

Where we run into an issue, however, is that when the dispatcher clicks on a delivery and the map shows the route, we would like the zoom level of the map to adjust so that the whole route is visible. Currently, there is no way for us within a bubble workflow to dynamically adjust the map’s zoom level so that it shows the whole route every time the map is updated with a new route.

If your dev team doesn’t have a solution available for this, we are happy to use JavaScript in our bubble app to enable the functionality. Mapbox’s SDK includes the fitBounds function (method reference available here) which we can leverage to accomplish what we need, but in order to run the javascript on the map we need a way to get out the name of the Mapbox Map object instance (e.g. in Mapbox’s examples, they use the name “map”).

I can see from inspecting the preview of our app that this object name is dynamic, as expected. What I cannot see is a way to access the object’s name so that I can run the function on it.

In other words, if the map object is initialized with const map-name = new mapboxgl.Map({...});, I would like to be able to access the variable map-name so that I can run the function map-name.fitBounds([...]} using Bubble’s javascript tools.

I hope this clarifies what we are looking for.

All the best

[tumil]

Here’s an example. Correct centre but wrong zoom level:

What we would like to see is the correct centre and a zoom level that show’s the whole route automatically:

If your team wants to implement this as a workflow feature, there are simply two things that should be implemented:

1. A workflow step that allows you to Fit Map to Bounds. The inputs for the workflow step should be the latitude and longitude of the bottom-left bound, and the latitude and longitude of the upper-right bound, as per MapBox’s documentation. This will then run the fitBounds function with the required parameters.

2. A workflow step that allows you to get the Javascript name of a specific MapBox Map object. The output of this can then be used as a parameter in the Javascript tools of Bubble. This will allow us as users to use the full functionality of MapBox, even for functions that you may not have implemented as features in the bubble plugin yet.

[dorel]

Hello @tumil,

Thank you so much for the additional details!

I’ve assigned a task to the developer to explore your request further. Rest assured, I will reach out to keep you informed about their decision or when the features are implemented.

Should you have any more questions or concerns in the meantime, please don’t hesitate to contact us at any time

Best regards

[tumil]

Thanks @dorel, I look forward to hearing from you

[dorel]

No worries @tumil,

It’s a pleasure to be of assistance!

Best regards

[dorel]

Hi @tumil,

I’m thrilled to announce that the latest version of the Mapbox plugin - version 1.120.0 - includes a new action. The “Set Area” action has been introduced to help you achieve your use case.

Please update the plugin to this new version and explore the enhancements. I look forward to hearing your feedback!

Best regards

[tumil]

This is exciting, can’t wait to try it on Monday. Will send my feedback as soon as. Appreciate you guys!

[dorel]

Hi @tumil,

Did you have a chance to test out the new improvement of the plugin? I am waiting to hear your feedback, in case something is not clear with this new update

Best regards

[tumil]

Hi @dorel !

Firstly, thank you to you and your team for implementing this so quickly. Here’s my feedback so far:

1. It appears that the bounds function in Mapbox’s API is sensitive to the height of the map as it is displayed, and the padding/margin fed to the function. If, in the Set Area workflow, the Margin field’s value is less than half the height of the Mapbox Map as displayed, it throws the following error:
   

   
   
   Please warn users in the documentation that this may be the case.

2. On the topic of documentation, it appears that there is extra functionality in the plugin than is documented. Please ask the team to add documentation for the added fields (Zoom, Margins & Animation Duration) as I’m having trouble fully understanding their impact on the map. For example does the Zoom function dictate a zoom level at which the animation starts?

3. It appears that no matter what number I put into the Margin field, the map is zooming to the exact same level. In other words this is how the map appears when the distance gets large, despite the margin being set to 0:
   

   
   
   Whereas I would love to be able to make the margins tighter to look like this:
   
   

4. It has occurred to me that a similar function would be incredibly helpful for lists of map markers, clusters and other map features. For example, in our application we will show delivery routes containing multiple stops. It would be incredibly helpful if we could have a similar workflow function that could take a list of markers (or a cluster, or perhaps even GeoJSON objects if that makes more sense) and set the area based on that input.
   An example of how this could be implemented in JS is here, but this could also simply be a case of feeding the list of markers’ coordinates into the fitBounds function as demonstrated in Mapbox’s Fit to the bounds of a linestring demo

Thanks again

[dorel]

Hi @tumil,

Thank you for sharing your feedback. Let’s address each point for better clarity:

1. I attempted to replicate the error you mentioned but was unsuccessful. Could you provide more details on how you encountered this issue? I’ll do my best to understand and resolve this behavior.

2. The “Zoom, Margin, and Animation duration” fields function as described. The Zoom and Margin settings help center the markers on the map, while Animation Duration dictates the time taken for the action to complete. The key aspect here is the relationship between Zoom and Margin: if Zoom is greater, it dictates the display on the map. If Zoom is lesser, Margin takes precedence, centering the marker as closely as possible based on the Margin value.

3. For a practical tip, try setting the Zoom to 100 and adjust the Margin to your desired proximity between the route’s start and end to the map’s edges. This will ensure the “route” remains centered according to the margins.

4. The “Set Area” action is versatile; it’s not limited to routes. You can specify any two points on the map, and it will center the view accordingly.

I hope this helps, and I’m here for any further questions you might have.

Best regards,