question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

When adding textField symbol layer is not rendered

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:15

github_iconTop GitHub Comments

4reactions
ospfrancocommented, Jan 4, 2020

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.

0reactions
YuukanOOcommented, May 10, 2022

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):

<MapView styleJSON={`{ "glyphs": "https://github.com/openmaptiles/fonts/blob/gh-pages/{fontstack}/{range}.pbf?raw=true" }`}>
Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found