Mapbox rendering empty labels if background color is not null - Stack Overflow

admin管理员组

文章数量:1287490

I’m working on a web application where I need to exclude labels from rendering if their values are null or empty. In my labelingInfo, the issue arises when labels have no valid value—the background color for the symbol still displays, which results in empty boxes being rendered.

I am attempting to resolve this by dynamically hiding the background when the labels are null or empty. Here is my current implementation:

const textLayer = {
  id,
  type: 'symbol',
  source: sourceId,
  layout: {
    ...(this.textSymbolLineLayoutProperties(line,
      textAnchor, labelingInfo)), // to be used for line labels
    'text-field': text || textExpression,
    'text-rotate': angle ? -angle : 0,
    visibility: this.asset.visibility ? 'visible' : 'none',
    'text-size': ptToPixel(size),
    'text-font': ['Roboto Black', 'Open Sans Regular', 'Arial Unicode MS Regular'],
    ...(!line ? {
      'text-variable-anchor': [textAnchor],
      'text-offset': offset,
      ...(stackLabel ? {
        'text-max-width': (labelingInfo.stackRowLength / 2),
      } : {}),
    } : {}),
    'text-justify': 'auto',
    ...(backgroundColor ? {
      // 'icon-image': background,
      'icon-image': [
        'case',
        ['==', ['get', ['to-string',
         ['get', objectIdField?.name]], ['literal', { ...textExpression[2][1] }]], null],
        null, // Use the icon if FieldName has a value
        background, // Hide the icon otherwise
      ],
      'icon-text-fit': 'both',
      'icon-text-fit-padding': Array(4).fill(borderLineSize + 5),
      'icon-allow-overlap': !!['none', 'dynamicNeverRemove'].includes(deconflictionStrategy),
    } : {}),
    'text-allow-overlap': !!['none', 'dynamicNeverRemove'].includes(deconflictionStrategy),
  },
  paint: {
    'text-color': this.rgbaColor(color),
    'text-halo-color': this.rgbaColor(haloColor),
    'text-halo-width': haloSize || 0,
    'text-opacity': opacity,
    'text-translate': [ptToPixel(xoffset), ptToPixel(yoffset)],
    'icon-translate': [ptToPixel(xoffset), ptToPixel(yoffset)],
    // 'background-color': this.rgbaColor(haloColor),
    // 'background-color': [],
  },
  metadata: {
    expression,
    text: true,
  },
  ...(filter ? { filter } : {}),

};
this.mapAdapter.addLayer(textLayer, this.asset.uuid);

I’m working on a web application where I need to exclude labels from rendering if their values are null or empty. In my labelingInfo, the issue arises when labels have no valid value—the background color for the symbol still displays, which results in empty boxes being rendered.

I am attempting to resolve this by dynamically hiding the background when the labels are null or empty. Here is my current implementation:

const textLayer = {
  id,
  type: 'symbol',
  source: sourceId,
  layout: {
    ...(this.textSymbolLineLayoutProperties(line,
      textAnchor, labelingInfo)), // to be used for line labels
    'text-field': text || textExpression,
    'text-rotate': angle ? -angle : 0,
    visibility: this.asset.visibility ? 'visible' : 'none',
    'text-size': ptToPixel(size),
    'text-font': ['Roboto Black', 'Open Sans Regular', 'Arial Unicode MS Regular'],
    ...(!line ? {
      'text-variable-anchor': [textAnchor],
      'text-offset': offset,
      ...(stackLabel ? {
        'text-max-width': (labelingInfo.stackRowLength / 2),
      } : {}),
    } : {}),
    'text-justify': 'auto',
    ...(backgroundColor ? {
      // 'icon-image': background,
      'icon-image': [
        'case',
        ['==', ['get', ['to-string',
         ['get', objectIdField?.name]], ['literal', { ...textExpression[2][1] }]], null],
        null, // Use the icon if FieldName has a value
        background, // Hide the icon otherwise
      ],
      'icon-text-fit': 'both',
      'icon-text-fit-padding': Array(4).fill(borderLineSize + 5),
      'icon-allow-overlap': !!['none', 'dynamicNeverRemove'].includes(deconflictionStrategy),
    } : {}),
    'text-allow-overlap': !!['none', 'dynamicNeverRemove'].includes(deconflictionStrategy),
  },
  paint: {
    'text-color': this.rgbaColor(color),
    'text-halo-color': this.rgbaColor(haloColor),
    'text-halo-width': haloSize || 0,
    'text-opacity': opacity,
    'text-translate': [ptToPixel(xoffset), ptToPixel(yoffset)],
    'icon-translate': [ptToPixel(xoffset), ptToPixel(yoffset)],
    // 'background-color': this.rgbaColor(haloColor),
    // 'background-color': [],
  },
  metadata: {
    expression,
    text: true,
  },
  ...(filter ? { filter } : {}),

};
this.mapAdapter.addLayer(textLayer, this.asset.uuid);

• mapbox
• mapbox-gl-js
• mapbox-gl

Share Improve this question Follow asked Feb 25 at 7:24 Kamal KantKamal Kant 1,14811 gold badge1414 silver badges2525 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The issue has been resolved by correcting the condition used to check whether the field is empty. In the original implementation, the logic was flawed, causing the background color to persist for empty labels. Below is the updated configuration.

Previous Implementation: The condition was improperly checking for null values, leading to incorrect behavior:

'icon-image': [
    'case',
    ['==', ['get', ['to-string', ['get', objectIdField?.name]], ['literal', { ...textExpression[2][1] }]], null],
    null, // Use the icon if the field has a value
    background, // Hide the icon otherwise
],

Updated Implementation: The condition has been simplified and corrected to directly check if the field value is null:

'icon-image': [
    'case',
    ['==', ['get', 'fieldName'], null], // Check if the field is null
    'none', // Hide the icon for null values
    background, // Use the specified background icon for non-null values
],

This fix ensures that icons are only displayed when the associated field has a value. It also eliminates the issue where background colors were rendered for empty labels.

本文标签： Mapbox rendering empty labels if background color is not nullStack Overflow