Directions Widget, modify Logo at top of Print Results

614
3
Jump to solution
12-13-2023 09:59 AM
Labels (1)
JoshV
by
Occasional Contributor

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.  

0 Kudos
1 Solution

Accepted Solutions
JoshV
by
Occasional Contributor

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){

View solution in original post

0 Kudos
3 Replies
JoshV
by
Occasional Contributor

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?

0 Kudos
JoshV
by
Occasional Contributor

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;
}

 

0 Kudos
JoshV
by
Occasional Contributor

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){
0 Kudos