Is it possible to use symbol type so I can have text

[instantgis]

Is it possible to configure draw to use a style that renders both a circle AND text?
In other words, the style has both a paint: and a layout: configuration.
The layout picks up a property on the feature (say title or label) to display text next to the circle.

I tried this...

    this.draw = new MapboxDraw({
      userProperties: true,
      displayControlsDefault: false,
      controls: {
        point: true,
        line_string: false,
        polygon: false,
        trash: true,
        combine_features: false,
        uncombine_features: false,
      },
      styles: [
        {
          id: 'highlight-active-points',
          type: 'circle',
          filter: [
            'all',
            ['==', '$type', 'Point'],
            ['==', 'meta', 'feature'],
            ['==', 'active', 'true'],
          ],
          layout: {
            // name of the marker
            'icon-image': 'marker',

            // get the title name from the source's "label" property
            'text-field': ['get', 'user_label'],

            // text properties
            'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
            'text-offset': [0, 1.25],
            'text-anchor': 'top',
          },
          paint: {
            'circle-radius': 20,
            'circle-color': '#FFFF00',
            'circle-stroke-color': 'black',
            'circle-stroke-width': 2,
            'circle-opacity': 0.5,
          },
        },
        {
          id: 'points-are-blue',
          type: 'circle',
          filter: [
            'all',
            ['==', '$type', 'Point'],
            ['==', 'meta', 'feature'],
            ['==', 'active', 'false'],
          ],
          layout: {
            // name of the marker
            'icon-image': 'marker',

            // get the title name from the source's "label" property
            'text-field': ['get', 'user_label'],

            // text properties
            'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
            'text-offset': [0, 1.25],
            'text-anchor': 'top',
          },
          paint: {
            'circle-radius': 20,
            'circle-color': '#CCCCFF',
            'circle-stroke-color': 'white',
            'circle-stroke-width': 2,
            'circle-opacity': 0.5,
          },
        },
      ],
    });

    this.map.addControl(this.draw, 'top-left');

I get this in the console...

layers.highlight-active-points.cold.layout.icon-image: unknown property "icon-image"
mapbox-gl.js:31
layers.highlight-active-points.cold.layout.text-field: unknown property "text-field"
mapbox-gl.js:31
layers.highlight-active-points.cold.layout.text-font: unknown property "text-font"
mapbox-gl.js:31
layers.highlight-active-points.cold.layout.text-offset: unknown property "text-offset"
mapbox-gl.js:31
layers.highlight-active-points.cold.layout.text-anchor: unknown property "text-anchor"
mapbox-gl.js:31
layers.points-are-blue.cold.layout.icon-image: unknown property "icon-image"
mapbox-gl.js:31
layers.points-are-blue.cold.layout.text-field: unknown property "text-field"
mapbox-gl.js:31
layers.points-are-blue.cold.layout.text-font: unknown property "text-font"
mapbox-gl.js:31
layers.points-are-blue.cold.layout.text-offset: unknown property "text-offset"
mapbox-gl.js:31
layers.points-are-blue.cold.layout.text-anchor: unknown property "text-anchor"
mapbox-gl.js:31
layers.highlight-active-points.hot.layout.icon-image: unknown property "icon-image"
mapbox-gl.js:31
layers.highlight-active-points.hot.layout.text-field: unknown property "text-field"
mapbox-gl.js:31
layers.highlight-active-points.hot.layout.text-font: unknown property "text-font"
mapbox-gl.js:31
layers.highlight-active-points.hot.layout.text-offset: unknown property "text-offset"
mapbox-gl.js:31
layers.highlight-active-points.hot.layout.text-anchor: unknown property "text-anchor"
mapbox-gl.js:31
layers.points-are-blue.hot.layout.icon-image: unknown property "icon-image"
mapbox-gl.js:31
layers.points-are-blue.hot.layout.text-field: unknown property "text-field"
mapbox-gl.js:31
layers.points-are-blue.hot.layout.text-font: unknown property "text-font"
mapbox-gl.js:31
layers.points-are-blue.hot.layout.text-offset: unknown property "text-offset"
mapbox-gl.js:31
layers.points-are-blue.hot.layout.text-anchor: unknown property "text-anchor"

Any ideas how to achieve this?
Thanks

[instantgis]

Correction ... I used symbol instead of circle

      styles: [
        {
          id: 'highlight-active-points',
          type: 'symbol',
          filter: [
            'all',
            ['==', '$type', 'Point'],
            ['==', 'meta', 'feature'],
            ['==', 'active', 'true'],
          ],
          layout: {
            // name of the marker
            'icon-image': 'marker',

            // get the title name from the source's "label" property
            'text-field': ['get', 'user_label'],

            // text properties
            'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
            'text-offset': [0, 1.25],
            'text-anchor': 'top',
          },
          paint: {
            'circle-radius': 20,
            'circle-color': '#FFFF00',
            'circle-stroke-color': 'black',
            'circle-stroke-width': 2,
            'circle-opacity': 0.5,
          },
        },
        {
          id: 'points-are-blue',
          type: 'symbol',
          filter: [
            'all',
            ['==', '$type', 'Point'],
            ['==', 'meta', 'feature'],
            ['==', 'active', 'false'],
          ],
          layout: {
            // name of the marker
            'icon-image': 'marker',

            // get the title name from the source's "label" property
            'text-field': ['get', 'user_label'],

            // text properties
            'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
            'text-offset': [0, 1.25],
            'text-anchor': 'top',
          },
          paint: {
            'circle-radius': 20,
            'circle-color': '#CCCCFF',
            'circle-stroke-color': 'white',
            'circle-stroke-width': 2,
            'circle-opacity': 0.5,
          },
        },

In the console...

layers.highlight-active-points.cold.paint.circle-radius: unknown property "circle-radius"
mapbox-gl.js:31
layers.highlight-active-points.cold.paint.circle-color: unknown property "circle-color"
mapbox-gl.js:31
layers.highlight-active-points.cold.paint.circle-stroke-color: unknown property "circle-stroke-color"
mapbox-gl.js:31
layers.highlight-active-points.cold.paint.circle-stroke-width: unknown property "circle-stroke-width"
mapbox-gl.js:31
layers.highlight-active-points.cold.paint.circle-opacity: unknown property "circle-opacity"
mapbox-gl.js:31
layers.points-are-blue.cold.paint.circle-radius: unknown property "circle-radius"
mapbox-gl.js:31
layers.points-are-blue.cold.paint.circle-color: unknown property "circle-color"
mapbox-gl.js:31
layers.points-are-blue.cold.paint.circle-stroke-color: unknown property "circle-stroke-color"
mapbox-gl.js:31
layers.points-are-blue.cold.paint.circle-stroke-width: unknown property "circle-stroke-width"
mapbox-gl.js:31
layers.points-are-blue.cold.paint.circle-opacity: unknown property "circle-opacity"
mapbox-gl.js:31
layers.highlight-active-points.hot.paint.circle-radius: unknown property "circle-radius"
mapbox-gl.js:31
layers.highlight-active-points.hot.paint.circle-color: unknown property "circle-color"
mapbox-gl.js:31
layers.highlight-active-points.hot.paint.circle-stroke-color: unknown property "circle-stroke-color"
mapbox-gl.js:31
layers.highlight-active-points.hot.paint.circle-stroke-width: unknown property "circle-stroke-width"
mapbox-gl.js:31
layers.highlight-active-points.hot.paint.circle-opacity: unknown property "circle-opacity"
mapbox-gl.js:31
layers.points-are-blue.hot.paint.circle-radius: unknown property "circle-radius"
mapbox-gl.js:31
layers.points-are-blue.hot.paint.circle-color: unknown property "circle-color"
mapbox-gl.js:31
layers.points-are-blue.hot.paint.circle-stroke-color: unknown property "circle-stroke-color"

It sortof works but no text