Services Plugins FAQs

MapBox Pins Disappear and Reappear on Zoom

Hi,

I would like for my MapBox plugin for my app: https://route-manager.bubbleapps.io/ to automatically zoom to the dimensions of the map that make all pins visible.

Furthermore, I do not want pins to disappear and reappear on different zoom levels as you can see is happening here: MapBox%20Zoom%20Issue

Is this possible?

Hi @harrisonalley, let us check on this use case and get back to you asap. Thanks!

1 Like

Thanks for looking into it.

I found this article: https://github.com/mapbox/mapbox-android-demo/issues/1057 that mentions PropertyFactory#iconAllowOverlap and PropertyFactory#iconIgnorePlacement layer properties which are possibly related to this issue.

Is it possible to control these properties with the Toolbox plugin?

Similarly, I’d like to add a zoom control to my MapBox Map as described here: https://docs.mapbox.com/mapbox-gl-js/example/navigation/

Can I also do that with the Toolbox plugin or is this possible in your plugin without using javascript?

Hi @harrisonalley, for zooming your MapBox, it can be accomplished by using Set Zoom MapBox element action in the workflow. Here is a screenshot to showcase:

image

You can set the Zoom Level to adjust the zooming on the map to make all pins visible.

Regarding the disappearing effect of the pins, it happens because of the pins collision, as pins are based on Lat and Long and can be located pretty much close to each other. A workaround to this can indeed be the adjustment of layer properties.

Unfortunately, it is not currently possible to control the zoom with our plugin. There is a workaround to this too, and yes, even using Toolbox can help. But it is required anyway to run JavaScript code as a workflow action in order to make it work.

Hope it helps.

Thanks.

How do I, “set the Zoom Level to adjust the zooming on the map to make all pins visible”?

When I set zoom level to 1 as you did in your screenshot, my map zooms in on Africa (where none of my pins are).

Also, can you give me an example of how to modify the following Javascript (from the Mapbox API documentation) to make the zoom controls appear on my map?

<script>

mapboxgl.accessToken = ‘<your access token here>’;

var map = new mapboxgl.Map({

container: ‘map’, // container id

style: ‘mapbox://styles/mapbox/streets-v11’,

center: [-74.5, 40], // starting position

zoom: 9 // starting zoom

});

// Add zoom and rotation controls to the map.

map.addControl(new mapboxgl.NavigationControl());

</script>

@harrisonalley, the screenshot provided was just an example to showcase the plugin’s possibilities that can accomplish the zooming functionality, based on first request.

We’ve taken into consideration your feedback about the map zoom control feature that’s currently not available and we may add in future updates. But unfortunately, since it is not part of our plugin functionality, we cannot help on this matter. You can use the JS workaround at your discretion.

Thank you in advance for understanding :pray: