JavaScript Labels

[willgoe_geocgi]

I'm trying to display labels for a polygon feature layer in my react leaflet map. I'm able to get the layer to come in and display correctly, but none of the labels are coming in. The field musym is displaying correctly when I call it from a popup but everything is blank with this labeling method. Just wondering if there is anything wrong with my code or if the L.canvas() renderer is messing up the labels? 

const labelClass = {

      // autocasts as new LabelClass()

      symbol: {

        type: 'text', // autocasts as new TextSymbol()

        color: 'green',

        haloColor: 'black',

        font: {

          // autocast as new Font()

          family: 'playfair-display',

          size: 12,

          weight: 'bold',

        },

      },

      labelPlacement: 'always-horizontal',

      labelExpressionInfo: {

        expression: '$feature.musym',

      },

    };

    // Create the FeatureLayer with authentication using your API key and apply the label class

    const SoilsLayer = new FeatureLayer({

      url: 'https://services1.arcgis.com/uye9M5KkL8B18MZq/arcgis/rest/services/KS_Soils/FeatureServer/0',

      apiKey: apiKey,

      minZoom: 12, // Minimum zoom level of 12

      renderer: L.canvas({ pane: 'middle' }),

      labelingInfo: [labelClass],

      lablelsVisible: true,

      style: {

        color: 'yellow', // Grey border

        weight: 1, // Border width

        fillColor: 'none', // No fill

        fillOpacity: 0,

      },

    }).addTo(map);

[JeffreyThompson2]

I don't see anything wrong with your label class.

Do you have a lot of labels in your map? There is a property that prevents labels from being displayed if they will overprint other labels.

https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-LabelClass.html#de...

Adding deconflictionStrategy: 'none' to your label class should turn this feature off.

[willgoe_geocgi]

Thank you for the response Jeffrey!

There would be around 18,000 labels being placed. I'm not sure if it's trying to place them all at once and that is making it difficult for the browser to load. I've modified the code to include the deconflictionStrategy but the labels still don't seem to be placing. I haven't really seen code for labeling polygon features but I'm wondering if people use a different renderer than L.canvas for large polygon sets? 

   const labelClass = {

      // autocasts as new LabelClass()

      symbol: {

        type: 'text', // autocasts as new TextSymbol()

        color: 'yellow',

        haloColor: 'black',

        haloSize: 1,

        font: {

          // autocast as new Font()

          family: 'playfair-display',

          size: 12,

          weight: 'bold',

        },

      },

      deconflictionStrategy: 'none',

      maxScale: 0,

      minScale: 15000,

      labelPlacement: 'always-horizontal',

      labelExpressionInfo: {

        expression: '$feature.FID',

      },

    };

    // Create the FeatureLayer with authentication using your API key and apply the label class

    const SoilsLayer = new FeatureLayer({

      url: 'https://services1.arcgis.com/uye9M5KkL8B18MZq/arcgis/rest/services/KS_Soils/FeatureServer/0',

      apiKey: apiKey,

      minZoom: 12, // Minimum zoom level of 12

      renderer: L.canvas({ pane: 'soils' }),

      labelingInfo: [labelClass],

      lablelsVisible: true,

      style: {

        color: 'yellow', // Grey border

        weight: 1, // Border width

        fillColor: 'none', // No fill

        fillOpacity: 0,

      },

    });

[JeffreyThompson2]

The font properties are very picky and not very well documented. I think the proper call for the font you want is family: 'Playfair Display'. If that does not work, try this font. It definitely works.

font: {
    size: 10,
    family: 'Noto Sans',
    weight: 'bold'
}

[willgoe_geocgi]

The font didn't seem to be making a difference 😞 I'm trying to go with a different renderer, not sure if that's the issue. I'm getting an error "Provided object is not a layer", not sure what I'm doing wrong with the renderer settings. Do I need to modify my import of modules? 

[MatthewDriscoll]

This works for me.

         const labelClass = {
          // autocasts as new LabelClass()
          symbol: {
            type: 'text', // autocasts as new TextSymbol()
            color: 'yellow',
            haloColor: 'black',
            haloSize: 1,
            font: {
              // autocast as new Font()
              family: 'playfair-display',
              size: 12,
              weight: 'bold',
            },
          },
          deconflictionStrategy: 'none',
          maxScale: 0,
          minScale: 15000,
          labelPlacement: 'always-horizontal',
          labelExpressionInfo: {
            expression: '$feature.FID',
          },
        };
        
        
        const SoilsLayer = new FeatureLayer({
          url: 'https://services1.arcgis.com/uye9M5KkL8B18MZq/arcgis/rest/services/KS_Soils/FeatureServer/0',
          //apiKey: apiKey,
          //minZoom: 12, // Minimum zoom level of 12
          //renderer: L.canvas({ pane: 'middle' }),
          labelingInfo: [labelClass],
          lablelsVisible: true,
          style: {
            color: 'yellow', // Grey border
            weight: 1, // Border width
            fillColor: 'none', // No fill
            fillOpacity: 0,
          },
        })
        
        map.add(SoilsLayer)

[willgoe_geocgi]

Matthew are there any modules I'm missing on import? I'm still not getting anything to draw 😞

[MatthewDriscoll]

Here is a working code pen using your same layer.  Your area is just west of where my map loads.

https://codepen.io/mbdriscoll/pen/gOyprmg?editors=1010