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 Screenshot 2019-10-17 at 15 05 21 Screenshot 2019-10-17 at 15 05 14

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

Most upvoted 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.