CODEWITHSUNDEEP
javascriptmapboxmapbox-gl
Felix
Felix

Reputation: 1017

Change text color in mapbox cluster map

I am trying to change the text color in the mapbox cluster map (https://www.mapbox.com/mapbox-gl-js/example/cluster/), but I can't figure out how.

Here is the relevant code piece:

map.addLayer({
    id: "cluster-count",
    type: "symbol",
    source: "grundbuch",
    filter: ["has", "point_count"],
    layout: {
        "text-field": "{point_count_abbreviated}",
        "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
        "text-size": 12
    }
});

Does anybody know how to do this? I would like to change the number labels to white.

Upvotes: 16

Views: 12385

Answers (1)

Denis Tsoi
Denis Tsoi

Reputation: 10404

To change the text color in a map layer you need the "paint" property to set the text-color property REF:

paint: {
  "text-color": "#ffffff"
}

Example

map.addLayer({
  id: "cluster-count",
  type: "symbol",
  source: "grundbuch",
  filter: ["has", "point_count"],
  layout: {
    "text-field": "{point_count_abbreviated}",
    "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
    "text-size": 12
  },
  paint: {
    "text-color": "#ffffff"
  }
});

Upvotes: 57

Related Questions