Select to view content in your preferred language

Export the map to an image, client-side, for printing?

19332
18
06-20-2013 06:48 AM
IanWatkins
Emerging Contributor
I'm guessing the answer is still no and I'm guessing it is still not planned.

I have a requirement to output an image of the final map for the user to save. The map has a tile base with overlays of contour lines generated by our application.

As the application will be run deployed (server and client on a laptop) we don't want to have to build/maintain an ArcGIS 10.1 box just for the purpose of allowing the print service (our tiles are static on our web server). Simple cannot justify it on cost alone.

A simple way to simply output a JPEG/PNG of what the map is showing would be great. A "native" to ESRI JS API "screenshot" is all.

Any plans? Any real reason why not?

It's a little frustrating. "Get away from native desktop apps., go Web 2.0" they said. So we started using Flex/Flash which can do these sort of things clientside. "Get away from Flash/Flex, move to HTML5, it's the future" they said. Now look, we are trying to do desktop type work on a web type app. Can you explain this to your managers, nope. :mad:

Cheers

Ian
0 Kudos
18 Replies
simoxu
by MVP Regular Contributor
MVP Regular Contributor

I just stumbled across this post, and it's interesting to see people are still talking about this two- years -old topic. and it's also surprised me that we still don't have a very good solution in JavaScript API for ArcGIS ( according to what people said here)

There are lots of benefits to have a screenshot of the current map on the screen programmatically, one of them is efficiency.

In one of my Flex projects, when generating a report in a "classic and proper" way -  from server side using python of course -- it took up to 3 minutes! and that was in the testing environment and no concurrent requests at all. of course, hundreds of layers in my map was to blame... then I scraped the "classic" way and took a shortcut by generating the report on the client side, then I trimmed the report generating time to seconds. the map quality in the report? not too bad. Furthermore, using the unique Flash feature, I could even put some sequence numbers on the selected map features (so that the items in the list can be referred back to the map) in one Frame, and took a snapshot, then restore the map in the next Frame... Yes, flex running in flash player frame after frame like playing a video...

http://mapiq.dfc.sa.gov.au

Do a proximity search and view report, then you know what I mean. This function was built about 4 years ago.

I'v done the transition from flex to JavaScript, I have built some apps using JavaScript API for ArcGIS, but my personal view is Flex was more elegant than JavaScript as a programming language... not only in the ability it allows you to create a bitmap clipping and copying the map area on the screen, but in the simplicity and elegancy as an advanced language whole. well, although I have this reflection, but don't get me wrong, I am sober:  the trend has been set: HTML5 and JavaScript are the future, like it or not, we have to embrace it. Just hope we'll get the cool stuff we had in Flex in JS soon.

Thank you for reading this post and sorry it did not provide a solution.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Simo,

   Coming form the Flex world myself I remember how easy it was to get a bitmap of the map and use it in my custom client side reporting. I have asked a couple of the JS API development team about this and found that this ability does not exist currently but with 4.x of the API it will be more like to a possibility. Currently I use the PrintTask to print a JPG of the map and then use that JPG in the report that I am generating clientside. The advanced report generation that I had in Flex was actually pretty easy to migrate to JS once I figured out how to get the maps image.

simoxu
by MVP Regular Contributor
MVP Regular Contributor

Thanks Robert.

It sounds promising. I will do more research on this when I need to migrate the stuff I did into JS or in some other projects. This should be a very common function in web mapping applications.

0 Kudos
by Anonymous User
Not applicable

Ah yes @simu_xu, I agree many things were easier in Flash. Some, were even better, to this day. This particular thing though is because Flash as a plugin can cut through browser security restrictions. Javascript not being able to take screenshots is a good security restriction. Re-rendering the DOM like my ScreenshotKevin's Custom WAB Widgets​  or Jeff Jacobson's is really the only way, but I can see how it is useful. And Jeff, that is a neat widget! Thanks for sharing!

By the way, due to various issues with my Screenshot widget like rendering complex text labels and annotations, I had to punt so to speak.  I copied the About widget, then put in a photo of a keyboard with the Print Screen key highlighted and a message that simply tells users to use their Print Screen key. (They're Windows users. For Mac, you could just add text for the Cmd-Shft-3 key combo).

0 Kudos
JeffJacobson
Frequent Contributor

I wrote a web application about a year ago that uses the HTML canvas to create a thumbnail image of a map.

WSDOT-GIS/arcgis-map-thumbnail-builder · GitHub

RobertScheitlin__GISP
MVP Emeritus

Jeff,

   How cross platform is this solution?

0 Kudos
JeffJacobson
Frequent Contributor

Everything is done client-side, so the only requirement is a modern web browser.

0 Kudos
ChrisSmith7
Honored Contributor

Nice! I am using the "print" service as our "export" feature. For browser printing, I am simply scraping the HTML from the map container and creating a static print pop-up. This works fairly well.

0 Kudos
deleted-user-z9OjN-EoUVWn
Deactivated User

This is a great utility!  I'm having a small issue and am hoping you can provide some guidance.  When I create my map 'screenshot' it is the same size as the map view in my application.  I would like to make the screenshot a thumbnail size.  Can you offer any direction on how to do this? 

EDIT: Right after posting this I though I'd try modifying the CSS stylesheet...worked like a charm!