MapBox GL JS - set set polygon Z-ordering on a layer

Question

I would like to set the Z-ordering of the polygons on my MapBox GL JS vectortile layer with only one vector tile source. There is a "category" attribute with values: 1 and 2. Polygons with category 2 should be on the top.

This is the definiton of my layer:

map.addLayer({
  'id': 'testLayer',
  'type': 'fill',
  'source': 'testSource','source-layer': 'polygons',
      "paint": {
'fill-color':   {    "property": "cat",
          "type": "categorical",
          "stops": [
            [1, "#8dd3c7"],
            [2, "#ffffb3"]
          ]}
    }
});

How can I set Z ordering?

I'vew find this: https://docs.mapbox.com/help/troubleshooting/optimize-map-label-placement/

Order of features inside layers For each layer in your style, you must specify a source. For vector sources, you must also specify a source layer for each style layer. The draw order of features inside a single vector tileset source layer can be specified in two ways: At runtime with symbol-sort-key: If you don't have control over the data at the time of tileset creation, you can influence the draw order of features at runtime using symbol-sort-key.

How to use it? I don't know the syntax and I didn't find any examples.

UPDATE: I tried with symbol-sort-key, but I got this error: "unknown property "symbol-sort-key""

map.addLayer({
  'id': 'testLayer',
  'type': 'fill',
  'source': 'testSource','source-layer': 'polygons',
  'layout': {"symbol-sort-key": ["to-number", ["get", "cat"]]},
      "paint": {
'fill-color':   {    "property": "cat",
          "type": "categorical",
          "stops": [
            [1, "#8dd3c7"],
            [2, "#ffffb3"]
          ]}
    }
});

ahmetkilinc ahmetkilinc · Accepted Answer · 2021-03-03T07:03:03

as far as I know layers in mapbox can not be specified in a numeric value of z-index. but there is moveLayer function. moveLayer, moves a layer to a different z-position.

map.moveLayer('polygon', 'polygon2');

Move a layer with ID 'polygon' before the layer with ID 'polygon2'. The polygon layer will appear beneath the polygon2 layer on the map.

another way:

I think you can try to add fill-sort-key to your layers seperately something like this:

"fill-sort-key": ["to-number", ["get", "priority"]],

Note: credits to this answer

MapBox GL JS - set set polygon Z-ordering on a layer

1 Answers