Maps: When adding textField symbol layer is not rendered

[ospfranco]

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
  
  

[anttijva]

I had this same problem, fixed it by defining a font (textFont: ["Open Sans Semibold"],) in the layer style. Make sure that font actually exists in your project.

[ospfranco]

@anttijva I tried adding the textFont field, but it is still not working, would you mind pasting your entire style?

[anttijva]

@anttijva I tried adding the textFont field, but it is still not working, would you mind pasting your entire style?

Here you go. I would try making sure that the textField actually returns something (in my case, {name}). After that, maybe try adding a basic Text field with your specified font (eg. textFont: ["Open Sans Semibold"]) to see if your app can use that font.

markerStyle: { iconImage: marker, iconSize: 0.13, iconAllowOverlap: true, textAllowOverlap: true, textFont: ["Open Sans Semibold"], textField: '{name}', textOffset: [0,2.5], textSize: 13 },

[ospfranco]

Nope, not working, I added textFont (and also tried with other fields), I'm also sure the textField actually returns, but nothing gets rendered:

const baseIconStyle = {
  iconAllowOverlap: true,
  iconAnchor: 'bottom' as 'bottom',
  iconSize: 1,
  iconIgnorePlacement: true,
  // symbolZOrder: 'viewport-y',
  // symbolPlacement: 'line'
};

const greenIconStyle = {
  iconImage: pinGreenOutline,
  // textField: ['get', 'blah'],
  textField: 'name',
  // textField: '{blah}',
  textFont: ['Roboto Regular', 'Open Sans Regular', 'Arial Unicode MS Regular'],
  iconAllowOverlap: true,
  textAllowOverlap: true,
  textOffset: [0, 2.5], textSize: 32,
  // textLineHeight: 2,
  // textLetterSpacing: 1,
  // textJustify: 'left',
  // textAnchor: 'center',
  // textRotate: 1,
  // textPadding: 2,
  // textKeepUpright: true,
  // textTransform: 'uppercase',
  // visibility: true,
  // iconTextFit: 'both',
  ...baseIconStyle,
};

[anttijva]

What version of RN/react/RN mapbox gl are you running?

"@react-native-mapbox-gl/maps": "^7.0.7",
"react": "16.9.0",
"react-native": "0.61.2",

My config, symbol layers work normally.

[ospfranco]

configuration is in the issue description:

I updated to RN 0.61.3 and mapbox: 7.0.8, but those are minor bumps

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ospfranco]

not stale

[ospfranco]

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.

[NathanNovak]

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.

@ospfranco Can you go into more detail of how to use this line? Do we have to save the fonts locally and how would we reference them? Thanks!

[ospfranco]

Did you try to copy and paste the line? If I remember correctly the sdk downloads the font from map box, you cannot replace the fonts yourself

[NathanNovak]

Did you try to copy and paste the line? If I remember correctly the sdk downloads the font from map box, you cannot replace the fonts yourself

I did. I am using react-native-mapbox and am trying out where to insert the line.

[ospfranco]

https://ospfranco.github.io/post/2020/08/04/use-the-mapbox-sdk-to-render-any-tile-set/

[NathanNovak]

Thank I will read your article! I am in the field so I may have some questions afterwards when I get back into the office. Thanks for responding!