How to Make an Awesome Print Tool for Your Web Map

How to Make an Awesome Print Tool for Your Web Map

When making web maps it's easy to overlook the print feature when there are so many sexier features to work on. This is a major mistake and the reason that the print feature in most web maps is left wanting.

In this post I'm going to show you what you need in order to provide your users with a first class print experience. But before we begin let's take a look at what your print tool shouldn't do.

Web Map Print Done Wrong

The print "feature" for many web maps does nothing more than take the map image currently displayed on screen and dump it into the browser's print composer.

  • No title
  • No description
  • No legend
  • No scale bar
  • No highlight and info box for selected features

When you compare this to what is possible in a desktop GIS, it really falls short.

Now if you've read any of my other posts you will know already that I'm a firm believer that web maps shouldn't try to imitate desktop GIS systems. With the main reason being, that if your users had a GIS and the experience to operate it, then they probably would.

The huge benefit of a web map is to put the power of GIS in a medium that can be accessed by anyone, from anywhere and on any device. A big part of that accessibility is simplicity.


For web maps, accessibility means simplicity


So while we don't want a map image dumped on a piece of paper as described above, we also don't want a complex print composer with a steep learning curve.

What we need is a compromise that sits somewhere between those two extremes.

Web Map Print Done Right

At Mango we have a lot of experience in building print tools for web maps, the print composer in Mango is currently the third version of the feature. With each version being completely rewritten from the ground up.

The first version was very similar to the poor design described above, and an upgrade was by far our most requested feature.


Mango's original print function - it was limited and our users needed more

Mango's first print tool lacked functionality and context.


The second version addressed a lot of the main failings of our original system. It included a legend, a title and a north arrow.


Mango's previous print was lacking, so we made it better.

Mango's second print tool offered a little more, but still failed to address user's real need.


But it still had some pretty significant failings. Firstly, the print PDF was generated on the server and often due to resolution issues the print didn't match the exact bounds and scale of the map viewed on screen and secondly it didn't include any overlays visible on the map such as the highlight for a selected feature and a box containing their attributes.

Our third version addressed these issues and now when the print button is pressed the map is placed on a virtual piece of onscreen paper on which the user can pan and zoom to include the exact area of interest.

We also maintain any highlighted areas or selected features, added a scale bar and added an option menu from which the user can select options menu where users can configure what they want displayed on the printed map.


The new web map print composer in Mango

Mango's current print tool. Powerful, customizable, and creates gorgeous map prints.


The new print version has proved very popular but goes to show how much work is involved in getting print right. The number of requests we received for added print feature also stands as testament to how important a print feature still is in this digital age.


Mango's latest print feature offers comprehensive options to style pixel perfect map print


Configuring Your Print Tool Using Mango

Setting up a custom print tool in Mango is very simple. All you need is a Mango account and a web browser, then everything can be setup with just a few clicks.

As with all Mango features what you won’t needs is:

  • Any programming skills
  • A server
  • Expensive software licenses


Want to check out the Mango print tool and try building your own map?

Why not sign-up for a free 30-day trial and take it for a free test drive. You'll be amazed at how simple it is.

Share this!
Chris Brown is the founder and CEO of Mango (simple online web GIS for everyone).

Give Your Users the Tools They Need