| 7 minute read |

Web GIS applications are becoming an ever more common requirement in GIS projects and as GIS professionals we are often being taken out of our comfort zone when it comes to developing and deploying these online systems.

Tools like Mango are removing most of the pain from web mapping by allowing applications to be built without writing any code or managing any servers, but there are still some important considerations to be made when moving our maps from the desktop to the web. Below are some of the most important.

Most Web Map Users Don’t Even Know What a GIS Is

“The most common mistake in design is to assume that the users of your design see the world in the same way as you.”

In most cases the vast majority of web map users won’t even know what a GIS is, never mind know how to operate one. This is actually the great attraction of web maps, it gives us the opportunity to put the power of GIS in the hands of a much larger audience, but at the same time we need to consider how to serve up that power and insight in a format that is user friendly, accessible and intuitive.

The majority of web map deployments are overseen by someone with a background in GIS, therefore it’s not surprising that the interface of many web maps look quite a lot like that of a desktop GIS, this is something we should aim to avoid. What users are familiar with is Google maps, so when making your web map, your are aiming for this:

Not this:

Google Maps is really a different beast to what we are producing in terms of web maps as GIS professionals, but we should certainly take inspiration from its simplicity and accessibility.

Less is Always More and the KISS Principle

"Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius — and a lot of courage to move in the opposite direction."
— E.F. Schumacher

The most common mistake we as GIS professionals make when creating web maps is to try an make a single map do too much. This means it’s either conveying too much information or is drowning the user in tools and buttons. Web users don’t have the patience for a learning curve, they will just hit the back button the second they feel overwhelmed.

In short, you should strive to make your web map as simple as possible in order to improve usability. You should strive to remove features from your web map rather than add them and the more you can remove the better. It’s time for that measuring tool and overview map to get the chop! Does your thematic map of U.S state poverty rates really need a search function?

If a feature doesn’t in some way help to convey the story of your map then it has no place being there and should be removed. The same goes for map layers, if a layer isn’t adding something to the narrative of your map story then it needs to go. Also remember to remove any attributes from your identify popup windows that aren’t related to the theme of the map, they are nothing but a distraction.

Don’t Make Your Users Think

If we look at the evolution of the map it went from hand drawn, to print, to digital and now to the web, with each iteration in this evolution the attention span of the audience has decreased.


A web map is now vying for the attention of its users in a sea of content and online distractions. When a visitor sees our map for the first time we have a matter of seconds to convince their conscious and unconscious mind that there’s something here worth seeing, otherwise the user will be reaching for the back button.

This means that the user shouldn’t be left guessing what the map is about. The map should have a clear title, a simple clear legend and an obvious message or narrative. It’s better to make a series of small, simple, laser focussed maps than it is to try and make a single map that tries to do it all.

Web Maps Need to be Optimized for Search Engines

For most users the gateway to your web map will be Google. Search engines are the maps of the internet, without them we are completely lost and unless we please the Google gods we will never be given a prominent position. On this metaphorical map we need to ensure our web map is a capital city, with a prominent symbol and large typeface. We definitely don’t want to be a small village with a tiny symbol and a label that can only be made out by those with the keenest of eyesight.

Google uses the text on the page to figure out what the map is about and include it in the results for relevant search queries. If you followed the rules in the previous section about making it clear for users what the map is about, then is will be clear also for search engines by default.

Web Maps Need to be Optimized for Speed

When making maps on the desktop we rarely need to think about speed, all of our data is on the same machine or network as the client. With web maps we don’t have this luxury, the data we display on the map needs to be downloaded from the server to the web browser.

Rather than using vector data (that contains the raw geometry) the de facto standard in web mapping is render the map layers as a bitmap image and send them to the web browser as tiles.

The average web map tile is around 60KB, it doesn’t matter how many layers it contains the size will remain around the same. So it doesn’t matter whether a single tile set contains one layer or twenty, it will still have the same size and take the same time to load.

In a desktop GIS we are able to turn all of the individual layers on and off. In web map we can do the same, but each layer or group of layers that we allow to be turned on or off in the legend is a new tile set, with each tile set stacked on top of the other.

Every additional layer that we add as an individual tile set will double the number of tiles that need to be downloaded. Therefore the larger the number of tile sets on a single map, the slower the map will become.

In order to keep your maps fast it’s best to use as few tile sets (called layer groups in Mango) as possible. For example this would be slow:

  • Layer group 1: roads
  • Layer group 2: rivers
  • Layer group 3: cities
  • Layer group 4: hospitals
  • Layer group 5: GDP by county
  • Layer group 6: Employment rate by county

If we put all of this in just two layer groups, it would be much faster:

  • Layer group 1: roads, rivers, cities, hospitals
  • Layer group 2: GDP by county
  • Layer group 3: Employment rate by county (off by default)

In the first example the browser needs to load six tilesets when it loads. In the second example it only has to load two and the user has the option to also later turn on the Employment rate by county.

A web map server should also use caching so that the map image only needs to be rendered by the web map server once, on subsequent requests it just fetches the previously rendered map tiles from the file system which is much faster. Mango uses multiple levels of caching and as a result a map becomes faster once it’s in active use because the caches have been warmed up.

Summary

As you can see when it comes to web mapping there are many factors that need careful consideration above and beyond what we are used to when creating maps on the desktop, but with a little planning and a focus on speed and simplicity these challenges can easily be overcome.

 

Got Data? Get MangoMap.