mapbox-gl-draw
mapbox-gl-draw copied to clipboard
Published
20 hours ago •
mapbox
mapbox
Is it possible to use symbol type so I can have text
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
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