maps: When adding textField symbol layer is not rendered
Describe 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
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 1
- Comments: 15
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.