Control the Map zoom by another component event (icon click)

App Building
, ,
1

  • Goal:
    To have a method that can let us control the zoom whether in or out, for now wen have only static zoom

  • Details:
    Hi, I'm building a map component and I want to add the functionality to zoom in/out when I click on an icon (+ | -) see SS below, but I can't find a way to do that!

  • Screenshots:

    image
    image719×637 72.2 KB

  • App json export: (here's how to get a json export)

2

Hello @CoderNadir ,

To implement the zoom functionality, follow these steps:

1 I have a solution for you. First, create a variable named zoomLevel as shown in Screenshot 1.

image
image793×169 9.98 KB

Next, set the value of this variable in the Mapbox zoom option as shown in Screenshot 2

image

Then, create two buttons, and in the button event handler, add the following script:

button +

zoomLevel.setValue(zoomLevel.value + 1)

For the second button -

zoomLevel.setValue(zoomLevel.value - 1)

This approach will work perfectly.

Thank You.

4 Likes
3

Hi @WidleStudioLLP
I've just implement it that way, thank you so much, here is how my code looks like:

-- To increase
var_detailsMapZoom.setValue(
  var_detailsMapZoom.value >= 16 
  ? var_detailsMapZoom.value 
  : (var_detailsMapZoom.value + 1)
)

-- To decrease
var_detailsMapZoom.setValue(
  var_detailsMapZoom.value <= 0 
   ? var_detailsMapZoom.value 
   : (var_detailsMapZoom.value - 1)
)
1 Like
4

How about changing the color, not that gray layer?

5

Hey @CoderNadir,

There are two ways to change Mapbox colors in Retool:

  1. Custom Style URL: Modifying the default style or using a custom style JSON file.
  2. Custom CSS: By inspecting the Mapbox component, you can identify the relevant classes. Once identified, you can apply custom CSS in the app's settings to modify the map's appearance.

Thank You.

4 Likes
6

can you give an example please!