I have a Web Appbuilder developer application with 2 layers. Each layer is symbolized using a Unique Value Renderer with the following code:
let standAloneSymbol = new PictureMarkerSymbol ({
"url": "./widgets/LocalLayer/images/StandAloneRamp_open.png",
"height": 16,
"width": 16,
"type": "esriPMS",
"angle": 0
})
let handLaunchSymbol = new PictureMarkerSymbol ({
"url": "./widgets/LocalLayer/images/HandLaunch_open.png",
"height": 16,
"width": 16,
"type": "esriPMS",
"angle": 0
})
let withMarinaSymbol = new PictureMarkerSymbol ({
"url": "./widgets/LocalLayer/images/RampWithMarina_open.png",
"height": 16,
"width": 16,
"type": "esriPMS",
"angle": 0
})
let uvrJson = {
type: "uniqueValue",
field1: "RampType",
//field2: "Status",
fieldDelimiter: ", ",
defaultSymbol: standAloneSymbol,
uniqueValueInfos: [{
value: "Stand Alone Ramp",
label: "Stand Alone Ramp",
symbol: standAloneSymbol
}, {
value: "Boat Ramp within Marina",
label: "Boat Ramp within Marina",
symbol: withMarinaSymbol
}, {
value: "Hand Launch Only,",
label: "Hand Launch Only",
symbol: handLaunchSymbol
}]
}
const openRampsUrl = "https://mydomain/arcgis/rest/services/mapservicename/MapServer/0";
const openRampLayer = new FeatureLayer(openRampsUrl, {
id: "Open Boat Ramps",
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"],
opacity: 1
});
let layerName = this.config.layers.layer[1].name;
openRampLayer.title = layerName;
openRampLayer._titleForLegend = layerName;
let options = ({
title: "${RampName}",
content: this._createPopupContent
});
let template = new InfoTemplate(options);
openRampLayer.setInfoTemplate(template);
//Add layer to map and set mouse events
let sgRendUnique = new UniqueValueRenderer(uvrJson);
openRampLayer.setRenderer(sgRendUnique);
map.addLayer(openRampLayer, 2);
I have been trying to figure out where the LayerList widget gets the symbology because it doesn't appear to be from the renderer. This is the way the legend should appear according to the renderer and the map service:
The above legend is a screenshot from a version of the app prior to being exported to our local server. I am not using a custom renderer for the above legend so I assume the legend is being taken from the map service.
Here is an image of the current LayerList (which is incorrect). I am using a custom renderer for this version of the app, but as you can see from my code, I am clearing only defining 3 values. I don't know where the 'others' is coming from and haven't been able to figure out how to get rid of it. I can't see anything in the layer properties that provides any clues as to where this is coming from. I have also attempted to just remove the dom element, but this is proving to be extremely difficult. Does anyone know what I am missing? Thank you!