nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Encuentra más publicaciones etiquetadas con

Accepted answers

All comments

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

willgoe_geocgi

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

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

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?

Jeff.Thompson@arlingtontx.gov_arlingtontx

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

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,

});

Jeff.Thompson@arlingtontx.gov_arlingtontx

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#deconflictionStrategy

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

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.