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

Parks Finder - Print Functionality?

CraigMcDade

Looking to add printing capabilities to the Parks Finder Web application. Specifically, a printout that shows the map as well as the directions and amenities information in the left tab panel.

Looking through the API it looks like the PrintTask is the most likely solution. Am I on the right track? I can't seem to find any samples that show how the PrintTask works together.

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

sumanikunada

Thanks for the reply!

I was trying to accomplish the functionality using ESRI printing map service without having to use the third party reporting libraries.
I'll go with the suggested.
Thanks again.

VinayBansal

You can add a dynamic text element to map template and fill that with the directions string.

But I would recommend that you go with custom PDF.
1. Generate the image of current map view.
2. Create PDF using iTextSharp.
3. Add image on first page.
4. Add directions on second page.

You can create a multi-page PDF using iTextSharp.

Regards,
Vinay Bansal

sumanikunada

Trying to export map to PDF using ArcGIS Server 10.1/Javascript API using the service Utilities/Printing Tools/Export Web Map Task

Is there a way to print query results attributes in a table along with the map using this service?

Thanks.

derekswingley1

The first question is, is the advice you have provided so far the correct way to implement the end product?

The print functionality included in the API should be used to generate the map portion of your output. Once you have that, it'll be up to you to embed the image output alongside directions in a page that will print correctly using the browser's print function.

AlanToms

Hello Derek,

Thank you for the help, it is appreciated.

We are working to implement the Park and Recreation Finder template provided by Esri. We would like to extend the functionality to include an option to print a page that shows a map and the driving directions. Very similar to what Google Maps does.

The first question is, is the advice you have provided so far the correct way to implement the end product?

Thank you
Alan

DesiredOutput.PNG

Browser.jpg

derekswingley1

Well the code I inserted does not seem to run. I placed it at the end just before
}
        dojo.addOnLoad(Init);

It feels like we're not making much progress. Can you post a complete, simplified page that illustrates what you're trying to do?

CraigMcDade

Well the code I inserted does not seem to run. I placed it at the end just before

}
        dojo.addOnLoad(Init);

derekswingley1

Is the print widget being created in your app? Have you confirmed that the code to create the print widget is running? The easiest way to do this is to put a console.log() or alert() after you call startup() on the print widget.

CraigMcDade

Yes, Proxy is configured.

derekswingley1

Next step: have you configured a proxy?

CraigMcDade

I've set it to:

var app = {};
app.printUrl = "http://gisprod2/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export Web Map Task";

derekswingley1

What is the value for your printURL variable?

The way the code works is that once print template info is retrieved from your print service, print templates are built and then passed to the print widget. The print widget is inserted in the page in the DOM node returned by dojo.byId. In this case, it's the div with an ID of "print_button".

CraigMcDade

please forgive me if I'm unclear.

it was at the end of the code I added. I'm not sure if it fixed anything aside from the map now draws. I have tried using the sample html code provided in the sample:

<div id="print_button"></div>

            <div id="info">
              <a href="http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/printtemplate.htm">Print templates</a> are generated 
              from the Export Web Map Task's <a href="http://servicesbeta2.esri.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export Web Map Task">Layout_Template parameter</a>. This info is retrieved from the service 
              using <a href="http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/namespace_esri.htm#request">esri.request</a>. 
            </div>

          </div>

However, when added, the block of text and print button does not show.

I understand that the window.print() is the native print function and that it will need to be changed. That is what my end question is, assuming the print widget code I added actually works, what should be entered in the html area so that when I click on the icon, it triggers the print...

derekswingley1

I'm having trouble following you. Where was the missing semi-colon? And did adding it fix anything?

In your code, you're referencing window.print. That is the browser's native print function and will not print everything on a map (if it did, we wouldn't need the print task/print widget and print service from ArcGIS Server).

How about trying to get your app working with the print widget first?

CraigMcDade

I was missing a pesky ;

Used:

// get print templates from the export web map task
             var printInfo = esri.request({
             "url": printURL,
             "content": { "f": "json" }
             });
             printInfo.then(handlePrintInfo, handleError);


function handlePrintInfo(resp) {
   
        var layoutTemplate, templateNames, mapOnlyIndex, templates;

        layoutTemplate = dojo.filter(resp.parameters, function(param, idx) {
          return param.name === "Layout_Template";
        });
        
        if ( layoutTemplate.length == 0 ) {
          console.log("print service parameters name for templates must be \"Layout_Template\"");
          return;
        }
        templateNames = layoutTemplate[0].choiceList;

        // remove the MAP_ONLY template then add it to the end of the list of templates 
        mapOnlyIndex = dojo.indexOf(templateNames, "MAP_ONLY");
        if ( mapOnlyIndex > -1 ) {
          var mapOnly = templateNames.splice(mapOnlyIndex, mapOnlyIndex + 1)[0];
          templateNames.push(mapOnly);
        }
        
        // create a print template for each choice
        templates = dojo.map(templateNames, function(ch) {
          var plate = new esri.tasks.PrintTemplate();
          plate.layout = plate.label = ch;
          plate.format = "PDF";
          plate.layoutOptions = { 
            "authorText": "Made by: Marion County Information Technology",
            "copyrightText": "Maps are for display purposes only",
            "legendLayers": [], 
            "titleText": "Marion County Parks", 
            "scalebarUnit": "Miles" 
          };
          return plate;
        });

        // create the print dijit
        var printer = new esri.dijit.Print({
          "map": map,
          "templates": templates,
          url: printURL
        }, dojo.byId("print_button"));
        printer.startup();
      }

      function handleError(err) {
   alert(err);
   
        console.log("Something broke: ", err);
      }
    
    }

and now want to call it using the button I placed in the header:

<td align="center" style="width: 40px;" valign="middle">
<button dojotype="dijit.form.ToggleButton" id="imgprint" title="Print Map" onclick="window.print();">
<img style="border:none;" src="images/print.png" alt="Print Map"/>
</td>

Should I change the html to reference "print_button" since that is what it is expecting?

CraigMcDade

Thanks for your response. So would I be able to use either the printTask or the Print Widget? Essentially I am trying to configure a WYSIWYG print option.

Right now I have placed a print icon inbetween the Share and Help Icons on the ParksFinder app. Right now it just calls the basic windows print function. Obviously, I want it to call the printTask or Widget.

<td align="center" style="width: 40px;" valign="middle">
<button dojotype="dijit.form.ToggleButton" id="imgprint" title="Print Map" onclick="window.print();">
<img style="border:none;" src="images/print.png" alt="Print Map"/>
</td>

I've attempted to assemble the code that relates to the printTask from the sample you provided, but it causes my map to fail. The header draws, but the map does not.

derekswingley1

The print task is a good way to go, but, relative to the print widget, it takes a little more work from the developer.

The print task is essentially a geoprocessing service that requires a print parameters passed to it. A print template also needs to be a part of your print parameters.

The Portal API "Web Map Viewer" sample shows how to use the print task.

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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