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:

2 Likes
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

8

Hi @MarkMcP, this feature is often requested but currently in our backlog! I bumped it for you but can't give any timeline. I agree with Filippo that a custom component would be the way to go otherwise.

1 Like
9

Thanks. Will keep a look out. I'm actually trying to put together something just like this for intneral use. The way their Mapbox works is just what I'm chasing

10

Hi @MarkMcP and @Mike_M,

I saw your post and wanted to share something that might help!

I recently built a custom Retool component for a client that sounds pretty similar to what you’re looking for, so I decided to open source it in case it’s useful to others too.

:film_projector: Quick demo:

:toolbox: GitHub repo:

:page_facing_up: Installation instructions:

You’ll find everything in the README:

Feel free to fork it, suggest improvements, or reach out if you have questions! Hope it helps. :slight_smile:

3 Likes
11

You're working on a car tracker map in Pakistan using Mapbox and want to change the marker color based on the vehicle type (e.g., type 1 = blue, type 2 = red), you can achieve this easily with a custom GeoJSON layer. Instead of using the default Mapbox marker, which has limited styling options, use a custom HTML marker (like an 'X' or icon) and style it using CSS. When you create each marker, check the type property in your GeoJSON data and assign a corresponding color using inline styles or class names. This way, you can clearly differentiate vehicle types visually on the map without relying on the default icons.

12

Yes using GeoJSON layer will display different colours, but the markers are then no longer interactive, so cannt click on them to display popups or filtered tables etc.

13

Great, thanks for sharing @Fillipo. I'll give it a go

1 Like
14

This is way better than the original one, orders of magnitude, thank you!

2 Likes