When adding textField symbol layer is not rendered
See original GitHub issueDescribe the bug When I add a textField into the style field and it matches a property name, the symbol layer is not rendered, here is the code I’m using:
const baseIconStyle = {
iconAllowOverlap: true,
iconAnchor: 'bottom' as 'bottom',
iconSize: 0.6,
textAllowOverlap: true,
};
const greenIconStyle = {
iconImage: pinGreenOutline,
// textField: ['get', 'blah'],
textField: 'name',
// textField: '{blah}',
textAllowOverlap: true,
// textAnchor: 'top',
textMaxWidth: 90,
textSize: 12,
textOffset: [0, 0], // [right, down] in ems
...baseIconStyle,
};
you can see I tried different ways to access the property, including hardcoding it, but the result is the same
and the feature is constructed like this:
let normalCollection = (Mapbox as any).geoUtils.makeFeatureCollection();
validTickets.forEach((t: Ticket) => {
const generatedGeometry = {
type: 'Point',
coordinates: [t.xCoordinate, t.yCoordinate],
};
const feature = (Mapbox as any).geoUtils.makeFeature(generatedGeometry, { blah: 'quack' });
feature.id = t.id;
normalCollection = (Mapbox as any).geoUtils.addToFeatureCollection(
normalCollection,
feature,
);
});
and inside the mapView:
<Mapbox.ShapeSource
id="normalSource"
shape={normalCollection}
onPress={this.onTicketSelect}
>
<Mapbox.SymbolLayer
id="normalSourceSymbols"
style={greenIconStyle}
/>
</Mapbox.ShapeSource>
To Reproduce Add a textField property on the latest version
Expected behavior The symbol layer is rendered with icons and the text label
Screenshots
Versions (please complete the following information):
- Platfrom: iOS
- Device: iPhone X
- OS: 13
- SDK Version: 7.0.7
- React Native Version: 0.59
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:15
Top Results From Across the Web
When adding textField symbol layer is not rendered · Issue #481
When I add a textField into the style field and it matches a property name, the symbol layer is not rendered, here is...
Read more >How to set the Mapbox symbol layer textfield with GeoJSON ...
Try the following code: PropertyFactory.textField(get("rlabl")). Specifically the get() method is com.mapbox.mapboxsdk.style.expressions.
Read more >Layers | Style Specification | Mapbox GL JS
A symbol style layer renders icon and text labels at points or along lines on a map. You can use a symbol layer...
Read more >Add a Symbol layer to a map - Azure - Microsoft Learn
The textField property of the symbol layer requires an expression to be specified. In this case, we want to render the temperature property....
Read more >Add icons to text layers with icon fonts - Figma Help Center
Ligatures not working ↓. Jump to fix conflicting font issues ↓. A. Missing font warning in some files. The font is an available...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I just found the problem, the issue was that I was generating the style json to replace the tile set, however I did not specify a glyph property on the generated json, I added the following property to the generated StyleJSON:
glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
And now things are working properly.
I was in the same boat, a local empty style JSON so glyphs were not found. For testing purpose (next step is to reference a local assets), this one works great (referencing github hosted glyphs):