ESRI Print Task Sample for the JSAPI 2.1

I failed at giving myself deadlines, so I thought I would challenge myself. There are examples of creating a PrintTask, but they seem to be hard to follow, at least for me. If you have found this to be the case, then this utility and post is for you. This example will be very basic as will show you how to print a map to pdf using the ESRI ArcGIS Server JSAPI 2.1; but just the map. To simplify the code, I have not included code to format the pdf itself. This is a how to, because any solution is better than no solution when a solution is needed. There are only two blocks of code in the entire application; one block in JavaScript and one in VB.NET so don't let the details of this post overwhelm you.

Well I just finished writing the PrintTask for the ESRI ArcGIS Server JSAPI 2.1. It took me 45 minutes to build the site from scratch. Unfortunately, I missed a parameter that I was passing and it slowed down my development time. It then took me the additional time to write this blog, not to mention adding the images manually after writing the blog in MS Word. But now the blog and the utility are ready.

I used ESRI's web service in the REST API at http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer which displays below in the exportMap.aspx. Yes, a .NET page using the JSAPI.

What happened? We used the .NET control and had it run some JavaScript on the ClientClick event and then passed the variable to a label .NET control. If you have had problems in the past with using .NET controls with the ESRI JSAPI, you may need to lay out the button like the following image.

With that in place, we can click on our .NET button with worrying about the page refreshing. Be careful! Not including the ContentTemplate tag within the UpdatePanel and surrounding the Button will make your application crash. I have been there a few times.
So, we click our button and then just for you information, a JavaScript message comes up. Everything is going smooth so far if you see this.

A new browser window opens, but before we look at that. Check out what displayed on our page of the world right above the Print Map button. Where did that come from?

Before we can print the image, we need to use the export function. You can read more about exportImage in ESRI online documentation at http://resources.esri.com/help/9.3/arcgisserver/apis/rest/index.html?export.html.
But, what about the code? If you have a hard time following it, let me take you through it.
Remember our .NET control? Take a look below and you will see that the OnClientClick event calls up our JavaScript that resides at the top of the page. The function we call is exportimg();

Before we even called that function, there were a few things handled behind the scenes.
We first put in a block of code telling our application that we want to use the ESRI ArcGIS Server JavaScript API 2.1.

Next, we start a new script block and tell our application we will be using esri's dojo tools. Now the question to ask ourselves, even before writing code is; what do we want? The application wants to know the same thing. Just like a restaurant, you place your order and what you requested is prepared for you. With this information in hand, let's place our order. We need three things total and that is it. At our sit down web service, the application uses parameters, the variables that will be used to plug into our code to make it work. It's just like, if you don't order steak, you don't get steak. So, if you don't ask for a map, you won't get a map. To do this we add three declarations.

The first is our web service, displayed as dynamicMapServiceLayer. The second is the variable params which we need for the purpose of defining the output of our map image that we export. The final variable is the printMapURL. Remember the old saying about the most important thing is "location, location, location". This holds true for the printMapURL. It serves one purpose. When the map is exported, it will tell you where it went. And we need that for our PrintTask. Below is the entire script block. Don't worry, we will go through it, but take a look at the line function init() and right at the bottom of the script where you see dojo.addOnLoad(init); dojo.addOnLoad(init); will run as it does not reside in a function. Time to load the code; we define our map in the first line. In the next line, here is one of our three parameters; params. Here it defines the dpi or dots per inch for printing, the width and height of the map and the format to be exported. Define the web service in the dynamicMapServiceLayer and then add it to the map with map.addLayer. Everything is ready to enable exporting our map. We haven't talked about the printMapURL. Do I really need to say; but wait there's more? Jump down below the next block of code and keep reading.

There was a lot to talk about once we clicked that button, but I wanted you to know how everything got wired so this next piece would make more sense.
Now that we have clicked the button to call the exportimg function, it's nice to have information for our variables as we use them immediately.
The exportimg function uses the parameters that we already have and then we use the expmapimagfunc(mapimg) function to return our third variable. The printMapURL.

We use the getElementById and then set the lblMapLocation text to the URL and the image file that was exported. And finally we open the CreatePdf.aspx and append the printMapURL as a variable to pass into our new browser window. From here we leave JavaScript and move to VB.NET. Now if you want the project written in C#; you can use a free converter to do so at Developer Fusion.

Our code runs and our new browser window opens and there you have it; a pdf embedded in our web page. And we are finally at that awkward question; where do embedded pdf's come from? That's not a pdf down below, but it plays a real one on print sample site I will be sharing with you.

Our web page has already defined a pdf in this line of code below. You can use it if you just want to embed a pdf; no printing required. It just references our pdf in the pdfs folder named "Image.pdf".

But that did not create the pdf. I used a tool called iTextSharp which you can download. Many examples are written in C#, so converted C# code to VB.NET. If you have would like a C# example, just ask. Or if you have try to create a C# example and have problems, just post your question about it too.

In our Page_Load event, we define the location of the pdfs folder and variable that we want to use to print our pdf. We first defined the URL of the image as printMapURL. Once we had the value, we assigned it to sender. At the top of our web page is where that image went to.
You will notice that within the address bar after the current web page, sender was added it was set to the value of the location of the image and the image itself.
CreatePdf.aspx?sender=http://sampleserver1b.arcgisonline.com/arcgisoutput/_ags_map687a6f058c52422f9503a216b51da659.png
Finally, we create a new document and then attempt to write our our pdf in the PdWriter by creating a pdf in the pdfs folder named "Image.pdf" . Our pdf is created, but there is no image yet, so we open the new document to write on it or is this case, to add the image. To do that we look at the sender value, which is the URL of our map image; and then we add it to the pdf. Once it is written, we close the pdf and then for informational purposes only, I add the text PDF has been created. You do not need this.
And there you have it, the PrintTask for the ESRI JavaScript API 2.1 using Visual Basic .NET and the .NET Framework 4.0. Try this tool out and tell me what you think. I will be integrating, but for now; I wanted to keep it simple.
Or share a tool or make this one better.

And here is the PrintTask for the ESRI JSAPI 2.1 written in both VB.NET and C# - http://www.arcgis.com/home/item.html?id=56bc091f27134b6b9296db9ad52261a9

Other GIS Resources

For a few other examples of GIS pages in .NET, you can take a look at samples of just basic .NET Framework 3.5 maps that I created with no feature as of yet in the following API's: Microsoft Bing version 6.3,Yahoo AJAX version 3, and Google version 3. An example of Google maps in the previous version 2 as just basic html pages are at: http://sergentsolutions.net/maps.html which includes images from Flickr, an example on how GeoRSS can be applied and another at http://sergentsolutions.net/maps/testmap.html which provides you with an example on how to create tabbed balloons like below. That's all I have to share for now. What would you like to share? Your feedback is important to me. Talk to you soon.

Chris

GeoBloggers Posts You May Like

Book Review: OpenStreetMap - Be Your Own Cartographer