topic Re: JavaScript Labels in ArcGIS JavaScript Maps SDK Questions

JavaScript Labels

willgoe_geocgi — Wed, 06 Mar 2024 22:22:14 GMT

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

Re: JavaScript Labels

JeffreyThompson2 — Thu, 07 Mar 2024 13:48:56 GMT

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.

Re: JavaScript Labels

willgoe_geocgi — Thu, 07 Mar 2024 14:43:50 GMT

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,

});

Re: JavaScript Labels

JeffreyThompson2 — Thu, 07 Mar 2024 15:05:44 GMT

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' }

Re: JavaScript Labels

willgoe_geocgi — Thu, 07 Mar 2024 15:57:31 GMT

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?

Re: JavaScript Labels

MatthewDriscoll — Thu, 07 Mar 2024 20:59:20 GMT

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)

Re: JavaScript Labels

willgoe_geocgi — Thu, 07 Mar 2024 22:33:32 GMT

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

Re: JavaScript Labels

MatthewDriscoll — Fri, 08 Mar 2024 16:05:24 GMT

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