I'm using Enterprise 11.1, and some of us are still using Web App builder. My question is specifically on the Directions widget. There is a print button within the widget that puts a generic ESRI logo at top of the results page along with a map and turn by turn directions. I just want to know how to change that ESRI logo to another logo. I've seen @RobertScheitlin__GISP posts on how to change the stop icons in the map results but I can't seem to find the function in Widget.js that handles the popup page of html results for the print job.
Solved! Go to Solution.
I ended up solving this by making my own customized html page within the onDirectionsFinished function of widget.js of Directions widget. the printresult function is where you can populate a global variable to store the map jpg url
//added code............................................................................................
const div = document.createElement('div');
const img = document.createElement('img');
const mapImg = document.createElement('img');
//Had to set a timeout to allow the printtask results time to catch up
const myTimeout = setTimeout(finishhim, 7000);
//Use printtask to get image
var url = 'https://arcgis.com/mapping4/rest/services/Custom_Print_Service/GPServer/Export%20Web%20Map';
var oWid = map.width/2;
var oHgt = map.height/2;
var printTask = new PrintTask(url);
var template = new PrintTemplate();
var br = document.createElement("br");
template.format = "jpg";
template.layout = "MAP_ONLY";
template.preserveScale = true;
template.showAttribution = false;
img.src='https://localhost:3344/webappbuilder/apps/7/widgets/Directions/images/coplogo.png';
var params = new PrintParameters();
params.map = this.map;
params.template = template;
printTask.execute(params, lang.hitch(this, this.printResult));
function finishhim(){
const mapImg2 = document.createElement('img');
div.appendChild(img);
div.appendChild(br);
const p = document.createElement('p');
var x = [];
x.push('<br/>');
div.innerHTML += x;
if (evt.result.routeResults.length > 0) {
const features = evt.result.routeResults[0].directions.features;
count = 0;
features.forEach(function (result, i) {
if (count > 0) {
x.push(result.attributes.text);
div.innerHTML += count + '--' + x[count] + '<br>';
}
count = count + 1;
});
}
mapImg2.src=img2txt;
div.appendChild(mapImg2);
const htmlString = div.outerHTML;
const newWindow = window.open();
newWindow.document.write(htmlString);
}
//............................................................................................................
if(lang.isArrayLike(routeResults) && routeResults.length > 0){
Any ideas anyone? by the way, I'm using LaunchPad theme if that helps any. I've seen a few different examples in the style.css of that theme for different issues others were encountering. I haven't been able to locate that esri logo image itself so I'm wondering if I need to override a setting in that directions widget popup once the print button is clicked to change that logo?
this code when added to the index.html is close but it only adds a logo to bottom left of my map. I need to change the logo to the html page where the directions are printed
.map .esriMapContainer .esriMapLayers:before {
background-image: url(images/image.png);
background-size: cover;
background-repeat: no-repeat;
position: absolute;
bottom: 2px;
left: 5px;
z-index: 1000;
height: 36px;
width: 148px;
content: ' ';
padding: 0;
}
I ended up solving this by making my own customized html page within the onDirectionsFinished function of widget.js of Directions widget. the printresult function is where you can populate a global variable to store the map jpg url
//added code............................................................................................
const div = document.createElement('div');
const img = document.createElement('img');
const mapImg = document.createElement('img');
//Had to set a timeout to allow the printtask results time to catch up
const myTimeout = setTimeout(finishhim, 7000);
//Use printtask to get image
var url = 'https://arcgis.com/mapping4/rest/services/Custom_Print_Service/GPServer/Export%20Web%20Map';
var oWid = map.width/2;
var oHgt = map.height/2;
var printTask = new PrintTask(url);
var template = new PrintTemplate();
var br = document.createElement("br");
template.format = "jpg";
template.layout = "MAP_ONLY";
template.preserveScale = true;
template.showAttribution = false;
img.src='https://localhost:3344/webappbuilder/apps/7/widgets/Directions/images/coplogo.png';
var params = new PrintParameters();
params.map = this.map;
params.template = template;
printTask.execute(params, lang.hitch(this, this.printResult));
function finishhim(){
const mapImg2 = document.createElement('img');
div.appendChild(img);
div.appendChild(br);
const p = document.createElement('p');
var x = [];
x.push('<br/>');
div.innerHTML += x;
if (evt.result.routeResults.length > 0) {
const features = evt.result.routeResults[0].directions.features;
count = 0;
features.forEach(function (result, i) {
if (count > 0) {
x.push(result.attributes.text);
div.innerHTML += count + '--' + x[count] + '<br>';
}
count = count + 1;
});
}
mapImg2.src=img2txt;
div.appendChild(mapImg2);
const htmlString = div.outerHTML;
const newWindow = window.open();
newWindow.document.write(htmlString);
}
//............................................................................................................
if(lang.isArrayLike(routeResults) && routeResults.length > 0){