AnsweredAssumed Answered

Customize LayerList widget to add interactive image between layers

Question asked by khanal.suunita on Sep 12, 2018
Latest reply on Sep 12, 2018 by khanal.suunita

I want to add an image between the layers and embed it with a link so that when an image is clicked, the link will open in a new tab. I updated the Widget.js code within the show layers function (around line132) and I am partially successful i.e, my image won't display (as in the image below), but I am can click on the small icon to go to another page. I am a not sure what code I am missing for displaying the image. I am a newbie to WAB and programming and Any help will be highly appreciated. 

Thanks,

Sunita

 

setTimeout(lang.hitch(this, function(){
var node = query('.layer-tr-node-OsuStwTree_9178_1')[0];
var layerTrNodeClass = 'layer-tr-node-OsuStwTree_9178_1';
var layerTrNode = domConstruct.create('tr', {
'class': 'treeInventory',
'layerTrNodeId': 'OsuStwTree_9178_1'
});
var layerTdNode = domConstruct.create('td', {
'class': 'col col1',
'style': 'width: 40px;'
}, layerTrNode);
var layerTitleTdNode = domConstruct.create('td', {
'class': 'col col2'
}, layerTrNode);
var layerTitleDivIdClass = 'layer-title-div-OsuStwTree_9178_1';
var divLabel = domConstruct.create('div', {
'innerHTML': '<br><div id = "treeInventory"><br><a target="_blank" href="http://arbordayblog.org/tree-campus-usa/10-year-tree-campus-usa-spotlight-university-of-nebraska-lincoln/"><img height = "50px" src= "images/treeCampus.png"></a>',
'class':layerTitleDivIdClass + ' div-content jimu-float-leading',
style:{
height: this.height +'px'
}
}, layerTitleTdNode);
domConstruct.place(layerTrNode, node, 'after');
}), 1000);

Outcomes