nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Directions Widget, modify Logo at top of Print Results

JoshV

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.

directions.jpg

タグ付けされた投稿をもっと見る

ArcGIS Enterprise

Accepted answers

JoshV

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

All comments

JoshV

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

JoshV

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

2023-12-15_08-50-11.png

JoshV

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?

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.