Change the colors of the mapbox component

App Building
1

How about changing the color, not that gray layer?

2

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
3

can you give an example please!

4

Hey @CoderNadir! Thanks for reaching out. I broke this part of your conversation with @WidleStudioLLP out into a separate topic, as the question you initially posed was previously answered.

In this case, I don't think there is a simple way to change the color of the primary Mapbox layer. It's definitely possible to style any points or other GeoJSON layers using the component inspector, though.

image

If you really want to fully customize the appearance of the map, you likely need to build your own custom component that configures a map from scratch.

1 Like
5

Hi Darren, thank you so much, yes that's what I'm working on for now

1 Like
6

Glad to hear it! Let me know if you have any questions as you get that set up. :+1:

2 Likes
7

Hi Darren, actually yes I would like you to help me as I'm having an issue of the map won't load in the HTML component, I attached a button and added a click event so when I was clicking and logging the map, it was saying: map not found.

  • So please see what I am doing wrong and let me know and thanks in advance!

Here is the code that I'm writing in HTML component:

<html>
  <head>
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.9.4/mapbox-gl.css" rel="stylesheet"> 
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.9.4/mapbox-gl.js"></script> 

  </head>
  <body>
    <div id="mapBox"></div>
    <button id="test" data-click-target="test">Click</button>
    <script>
    
        mapboxgl.accessToken = "<token>";
        const map = new mapboxgl.Map({
            container: "mapBox", 
            center: [-74.5, 40], 
            zoom: 9
        });
  </script>
  </body>
</html>
8

@Darren CC!

9

Do you see any errors in the browser console? My guess is that the script isn't running due to sandboxing rules. For that reason, I think a custom component will be the more reliable solution!

1 Like
10

@Darren
I want to bring to your attention that I want to create this map in a module and then use that module in multiple apps.

I can't find the custom component anymore!!! I thought it's been replaced by HTML component, no?

So here is what I'm seeing in the browser console:

image-02-04-2025_09_58_PM
image-02-04-2025_09_58_PM1010×982 83.5 KB

11

The HTML component can be useful for relatively simple use cases, but the new Custom Component Library feature that I linked previously is the true successor to the version that is now deprecated.

Looking at the screenshot that you've shared, nothing jumps out to me as particularly suspicious. Have you double checked that you have the right token?

2 Likes
13

Okay, I'll work on it later and update here , Thank you @Darren

1 Like