Mapbox map change color of markers

💬 App Building
1

Hi, I'm trying to change the colour of the marker shown on my mapbox map based on a property value
eg
type = 1, color = blue
type =2, color = red

Tried to use the GeoJson Layer styling but not sure where to start

I believe the default map location marker/icon may not be able to change colours but I'm happy to use an 'X' from the Marker field if cna just change its font color.

2

Hi @MarkMcP!
Take a look at this topic, it includes some helpful workarounds and examples:

1 Like
3

Hey @MarkMcP ,
After reading what @Spacebar shared, here is how I would set it up.
In the GeoJSON field you define your points in this format

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-122.454, 37.766],
      },
      "properties": {
        "color_val": "#F00"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-122.510, 37.764],
      },
      "properties": {
        "color_val": "rgb(0,255,0)"
      }
    },
  ]
}

You can use a JS transformer to create these points in this JSON format.

and then below in the GeoJson Layer Styling you need to use something like

{  
  "type": "circle",
  "paint": {
    "circle-color": ['get', 'color_val']
  }
}

Without the styling you won't see any points on the map.
The color_val property of the marker will define the colour.
However with this method the interactions with the markers won't trigger events.
It is a bit of a hack and Retool is working on adding a better integration.

Screenshot 2025-07-15 at 20.37.08
Screenshot 2025-07-15 at 20.37.081710×1192 236 KB

Let me know if it works or helps. :slight_smile:

1 Like
4

Thanks for the pointer, the example there was most useful. So can display various colours now. Just cant click on them to trigger another action :frowning:

5

Many thanks for the details here - it does work!. Not being able to interact with the markers though to trigger events is a deal breaker for this app though, so will have to find a workaround for that too. Cheers

6

@MarkMcP makes sense, then consider developing a custom component with a Mapbox in it.
If you are familiar with React and Typescript.
https://docs.retool.com/apps/guà.ides/custom/custom-component-libraries/

Let me know if you need any help with it. :slight_smile:

7

That will be a bridge too far for a hack like me, and anyway really wanting ReTool to be a low-code solution for our needs here, which apart from this little hiccup I've been very impressed with.

Hoping the Retool team do add the ability for marker customisation based on a property, keeping the interactivity of course.
Thanks for engaging. cheers