About Esri ArcGIS and how to turn an ArcGIS map into a JPG

I recently studied the Esri ArcGIS JavaScipt API and after hours of trying and failing, I managed to find out how to use the Printer API to create (and also be able to download) pictures of my existing ArcGIS maps. Here, I will share the code as I’m very sure that there might be someone looking for the same. In this post, I will also show why I had to use ArcGIS and not Google Maps.

Integrating maps into web and mobile applications is an easy task with API’s such as Google Maps. You practically do anything like adding layers, styling, drawings and markers, offer advanced services and features and adding custom controls on the maps. This all is of course very nice and the maps themselves are detailed enough for almost any kind of application. But not all kinds and this is where Esri’s ArcGIS map system comes handy, which is a system for creating and sharing geographic information. Google Maps is free of charge (at least up to 25k map loads) and it’s maybe by far the most popular map API, however, there is cases where its maps actually just is’nt good enough.

One such example is the Svalbard and Jan Mayen islands, which because of their unique geography has made them extremely popular places to do research on artic climate and wildlife. But when looking at Svalbard and Jan Mayen islands in Google Maps there is absolutly nothing there. This is why the Norwegian Polar Institute (NPolar) created their own detailed base maps and layered thematic maps of both Svalbard and Jan Mayen islands. Here is how the capital of Svalbard, Longyearbyen looks like in Google Maps (left picture) and the ArcGIS based NPolar version (right picture):

Google Maps Longyearbyen NPolar ArcGIS Longyearbyen

Taking into consideration the large number of scientific research projects ongoing in Svalbard and Jan Mayen, we can clearly see why it is so important to be able to create detailed maps with systems like Esri’s ArcGIS.

It’s very easy get startet with ArcGIS and its Javascript API, which is based on the Dojo framework. Some years ago I had to use the legacy version 1.6 and it was nothing except an endless pain. Luckly ArcGIS is based on the version the creators of Dojo call the “Modern Dojo”, so except for how the Esri modules are loaded there is nothing special about the code. Its mostly plain javascript. In my project, we even managed to integrate Esri ArcGIS into our AngularJS application through directives! If you struggle to get AngularJS working with ArcGIS then send me message.

If you start using ArcGIS in your application then make sure you use a version above 3.5. ArcGIS version 3.5 is now considered as legacy and uses an old way of importing modules. As an example of how to use ArcGIS, I want to show you how I used the ArcGIS Dojo Toolkit to create a map with a button for downloading the map as a picture. My example is a build on this sample from the ArcGIS tutorial. Here is the live demo.

The original tutorial has done a good job explaining how get startet with ArcGIS, so I will not go into further details about that here. The above code will creates a button and after clicking it, it will turn into a link directly the picture. You’ll also see three callback function which you can use for further work. If you instead of a JPG prefer PDF, then just change the label and the format settings on the PrintTemplate into (see the documentation for more information):

t.layout = "A4 Portrait"
t.label = "Portrait (PDF)";
t.format = "jpg";

One of the important reasons for sharing my code is because the Print and PrintTemplate samples on the ArcGIS site are all to complex or they are not so easy to customize. What I needed was a small sample with as few “nice-to-have” functionality as possible.

You can download the complete source code from my Gist repo.

This entry was posted in Javascript, Web and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>