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.
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){
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; }
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?
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
