Mapbox Scroll Zoom and Point Layer Order

Hi There:

I am trying to use the Mapbox Mobile component, and have come across a few annoyances that I am unsure if it is a bug or user error. For example:

When adding points, they display underneath layers.

Also, I can't seem to get the Mapbox to not take forever scrolling to the actual location on the map. It always start at the opposite side of the world any they flyes to the location I specify. The data is already loaded in the view, so it isn't like it is waiting for it to load. Any tips?


Hello @darenhunter!

Apologies that you are having these issues, let me see if I can help.

For the zoom, that is very odd behavior. Could you share the Inspect view of the map component?

From the video it looks like the map is trying to get to your current location. The maps default behavior should be to render in on the coordinates/point that it first passed in to the components Points and/or GeoJSON.

My guess is that if there's no target it goes to the equator?...But then receives the current location coordinates a split second later and tries to re-center. I need more info on how the component is set up but you might need to feed in current location to Points/GeoJSON if you aren't already.

I was calculating the centerpoint, longitude and latitude and then passing those coordinates into the coordinates field. The coordinates are coming from the previous view (not based off a query) - so I don’t think it is a race condition. I was out today but will definitely get you that info. Are you saying that if I were to just leave the coordinates blank – it should automatically zoom in into the GeoJSON? Thanks!

1 Like

Thank you for the info!

From my testing it seems that the Longitude and Latitude fields at the top of the Inspect Panel under Content set the map's starting point. See if feeding that data into your map component will get it to start where you want and not move/zoom.

Out of curiosity – are you testing on an actual device or just in the preview? It works in the preview for me, but not on an actual device. Specifically iOS. I don’t have android to test

Good catch! I was testing in edit/preview. Let me deploy to an app on my iOS device and see which of the three is the best for setting the start screen for the map.


Here is the screenshot of the data. The latitude and longitude aren't zero or null at any point - so I think that rules that out. Like I said - this works perfectly on the simulator. It is only on a device that it doesn't seem to work.

I got ahead of myself and thought this fixed it. It doesn't. Can't get the map to initialize with anything other than null on device

Ahhh unfortunate. That is definitely not expected behavior, I have been able to get my mobile apps to load in without needing null.

Can you join retool office hours and we can further test/live debug!

One option would be this workaround

{{parseFloat( || 0}} and then you can try replacing the zero with the hard coded coordinates you want.

More details about a user with a similar issue here hopefully it helps.

Also under Appearance set Zoom to a higher number. My maps also start zoomed out, not much more I can do besides adding a feature request for fixed load in zoom on hard coded lat/long.

Another option would be to set the map to be hidden if the coordinates are null, then when you are the coordinates to set the map should load in to the coordinates once the values are available to be populated.

Hey Jack:

Thanks for your efforts. I guess I am going to chalk this up to it being a bug at this point. The problem with these solutions is that it assumes those values are null - but I have changed my code so that it never evaluates to null. I did try parse float - but didn't help. I can't set the map to hidden because the coordinates are never null.