Hi,
I am trying to create layer list but it doesn't show when running in the JavaScript. I am not sure what is missing here. Below is the code I am using.
var FiberInfoTemplate = new InfoTemplate();
FiberInfoTemplate.setTitle("<b>Fiber Provider</b>");
var Fiber1InfoTemplate = new InfoTemplate();
Fiber1InfoTemplate.setTitle("<b>Fiber Provider</b>");
var Fiber2InfoTemplate = new InfoTemplate();
Fiber2InfoTemplate.setTitle("<b>Fiber Provider</b>");
FiberInfoTemplate.setContent("PROVIDER: ${PROVIDER}<br/>");
Fiber1InfoTemplate.setContent("PROVIDER: ${PROVIDER}<br/>");
Fiber2InfoTemplate.setContent("PROVIDER: ${PROVIDER}<br/>");
var FiberLayerURL = "https://corp.abc.com/network/rest/services/AMTools/Fiber/MapServer";
var FiberLayerOptions = {
"id": "demographicsLayer",
"opacity": 0.75,
"showAttribution": false
};
var FiberLayer = new ArcGISDynamicMapServiceLayer(FiberLayerURL, FiberLayerOptions);
FiberLayer.setInfoTemplates({
0: { infoTemplate: FiberInfoTemplate },
1: { infoTemplate: Fiber1InfoTemplate },
2: {infoTemplate: Fiber2InfoTemplate}
});
//1 and 5 are the layer id number.
//FiberLayer.setVisibleLayers([0, 1, 2]);
//map.addLayer(FiberLayer);
FiberLayer.on("load", buildLayerList);
map.addLayer(FiberLayer);
function buildLayerList() {
var items = arrayUtils.map(Fiberlayer.layerInfos, function(info, index) {
if (info.defaultVisibility) {
visible.push(info.id);
}
return "<input type='checkbox' class='list_item'" + (info.defaultVisibility ? "checked=checked" : "") + "' id='" + info.id + "'' /><label for='" + info.id + "'>" + info.name + "</label>";
});
var ll = dom.byId("layer_list");
ll.innerHTML = items.join(' ');
Fiberlayer.setVisibleLayers(visible);
on(ll, "click", updateLayerVisibility);
}
function updateLayerVisibility() {
var inputs = query(".list_item");
var input;
visible = [];
arrayUtils.forEach(inputs, function(input) {
if (input.checked) {
visible.push(input.id);
}
});
//if there aren't any layers visible set the array to be -1
if (visible.length === 0) {
visible.push(-1);
}
Fiberlayer.setVisibleLayers(visible);
}