Rendering labels on a GeoJSON layer in the Map component

Hello! I am trying to figure out how to render labels on a map component using the GeoJSON layer styling. I can successfully render a GeoJSON MultiPolygon and style it using fill-color. For example:

However, all of my attempts to render the "name" property (in this example, "Cool shape") somewhere on the map have failed. From the docs here, it seems plausible that a "symbol" layer should work, referencing the "name" property, e.g.:

  "type": "symbol",
  "layout": {
    "text-field": ["get", "name"]
  },

However, whenever I try to add anything like this to the GeoJSON styling layer, it seems to remove the styling altogether. Does the map component assume that the layer is a "fill" layer? I tried providing an array of style layers, but that also didn't work.

Providing the styles directly in the original GeoJSON feature collection also does not work.

Any help is appreciated, thanks!

Sorry for the confusion here! After some more testing, it seems like our Mapbox component is a bit limited and it might not support the exact label functionality you're looking for. However, we could click a point on the map populated a separate Text component with information from the selected point. Could that work for your use case?

For example, you could include additional information with each point under a different key in your points array and reference that data in a separate point.

If this doesn't work for you, I'd be happy to go back to the drawing board with you!

I synced with some team members and we're not sure of a better workaround, unfortunately :pensive:

We took a look at the version of react-map-gl we use for our Mapbox component, and it's from back in 2018. This means we're not up to date on the more recent major version of Mapbox GL JS v2.0 or above, which is an upstream dependency of that react-map-gl library. There was quite a bit changed from earlier versions to v2.XX.

It's possible some parts of the style spec or GL JS functionality relevant was changed in Mapbox GL JS since, which could be why trying something currently documented in Mapbox docs isn't working as expected in our Mapbox component.

I'll post in this thread if we do have any updates here, though!

I too need to render map labels for the mapbox component for geojson polygons (see screenshot example). I need to show the name of the corresponding polygon as the cursor hovers over/polygon is selected. Mapping things without being able to show labels is not really useful. Any updates on this?

Hi there! This request hasn't been picked up quite yet :disappointed: We'll post back here when it does.

I know some customers have used a custom component in the meantime to create their own map component. Custom components takes more time/maintenance since they're something you spin up on your own, but I thought I'd share just in case it helps as a workaround :crossed_fingers: