Mapbox use JavaScript function inside addLayer

Question

I have create a cluster map with Mapbox and i want customize the cluster number inside the map. In this example i have "{data}" inside the "text-field": and i'm trying to round this number. For instance: 24124.324123123.

// Cluster counter  
  map.addLayer({
    id: "cluster-count",
    type: "symbol",
    source: "sites",
    filter: ["has", "point_count"],
    layout: {
      "text-field": "{data}",
      "text-size": 12,
    },
    paint: {
      "text-color": "red",
    }
 });

I have try different solution like: "text-field": parseFloat("{data}").toFixed(2), but it doesn't work.

How can i use some JavaScript function to costumize the output of the layer?

Answer 1

How can i use some JavaScript function to costumize the output of the layer?

The short answer to this question is you can't. Layers are statically defined and it's not possible to execute any functions within them the way that you're describing.

However , Mapbox's style expressions allow you to achieve this. I would strongly recommend you review the documentation to see what's possible: https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions

This tutorial in particular should help you get familiar with them: https://docs.mapbox.com/help/tutorials/mapbox-gl-js-expressions/

---

⚠️ Disclaimer: I currently work for Mapbox ⚠️