How to set the vertex dots on the top of stroke lines of the polygons?

Nobody has claimed this yet.

Hi,

I have this custom style:

```ts

export const createDrawStyles = () => {
return [
// ACTIVE (being drawn)
// Line stroke
{
id: "gl-draw-line",
type: "line",
filter: ["all", ["==", "$type", "LineString"], ["!=", "mode", "static"]],
layout: {
"line-cap": "round",
"line-join": "round",
},
paint: {
"line-color": "#16a34a",
"line-width": 5,
},
},
// Polygon fill
{
id: "gl-draw-polygon-fill",
type: "fill",
filter: ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]],
paint: {
"fill-color": "#ef4444",
"fill-opacity": 0.1,
},
},

// Vertex point halos
{
id: "gl-draw-polygon-and-line-vertex-halo-active",
type: "circle",
filter: ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]],
paint: {
"circle-radius": 10,
"circle-color": "#FFF",
},
},
// Vertex points
{
id: "gl-draw-polygon-and-line-vertex-active",
type: "circle",
filter: ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]],
layout: {
"z-index": 9999
},
paint: {
"circle-radius": 12,
"circle-color": "#ef4444",
"z-index": 9999
},
},
// Inactive polygon fill
{
id: "gl-draw-polygon-fill-static",
type: "fill",
filter: ["all", ["==", "$type", "Polygon"], ["==", "mode", "static"]],
paint: {
"fill-color": "#3b82f6",
"fill-outline-color": "#3b82f6",
"fill-opacity": 0.1,
},
},
// Inactive polygon outline stroke
{
id: "gl-draw-polygon-stroke-static",
type: "line",
filter: ["all", ["==", "$type", "Polygon"], ["==", "mode", "static"]],
layout: {
"line-cap": "round",
"line-join": "round",
},
paint: {
"line-color": "#16a34a",
"line-width": 5,
},
},
// Inactive vertex points
{
id: "gl-draw-polygon-and-line-vertex-static",
type: "circle",
filter: ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["==", "mode", "static"]],
paint: {
"circle-radius": 3,
"circle-color": "#3BB2D0",
},
},
// Polygon outline stroke
// This doesn't style the first edge of the polygon, which uses the line stroke styling instead
{
id: "gl-draw-polygon-stroke-active",
type: "line",
filter: ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]],
layout: {
"line-cap": "round",
"line-join": "round",
},
paint: {
"line-color": "#16a34a",
"line-width": 5,
"line-opacity": 1,
},
},
{
id: "gl-draw-polygon-custom-color-fill",
type: "fill",
filter: ["all", ["==", "$type", "Polygon"], ["has", "user_roofStatus"]],
paint: {
"fill-color": ["get", "user_roofStatus"],
"fill-outline-color": ["get", "user_roofStatus"],
"fill-opacity": 0.1,
},
},
{
id: "gl-draw-polygon-custom-color-stroke",
type: "line",
filter: ["all", ["==", "$type", "Polygon"], ["has", "user_roofStatus"]],
layout: {
"line-cap": "round",
"line-join": "round",
},
paint: {
"line-color": ["get", "user_roofStatus"],
"line-width": 5,
},
},
]
}

```

This produces this output:


However, I want to ensure the vertex dots remains on the top of the green lines.

As you see in the code above, I tried to set the `z-index` but nothing changed.

Start with the createDrawStyles entry point shown in the issue and review how the listed Mapbox GL Draw layers are ordered. Verify why the vertex circle layers do not appear above the polygon stroke, then confirm the dots render on top of the green lines in the resulting map.

Written by the indexing model from the issue text.