mapbox / mapbox/mapbox-gl-draw
Is it possible to use symbol type so I can have text
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1.1k
- Forks
- 612
- Avg merge
- 8d 9h
- Merged PRs (30d)
- 5
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No repository file or test is named. Start by reviewing the supplied custom styles and Mapbox GL layer-type validation to understand why symbol layout properties are rejected on circle layers. Define whether combined circle-and-label rendering should be supported, and identify the documentation or tests needed to establish the expected behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100