I’ve been getting deeper into web mapping lately, and have started to accumulate some good resources for learning. Here are the sites I’ve been using. I’m sure there are a lot of others to add. Please let us know what they are in the comments!

• Don Meltz’s Geo Sandbox blog series wherein he gives us the play-by-play as he implements his own web mapping server from home.




• This OpenGeo Architecture white paper describes what’s in the OpenGeo map stack. It also mentions what the alternatives are, which is great if you have no idea in the first place.




• Take Control of Your Maps is a well written introduction to the map stack (hint: memorize what the map stack is, there will be a quiz later. Okay, not really but you should definitely know what this term means).




• This JavaScript tutorial is simple and easy to plow through.

If what you really want is for someone else to do this for you, check out mapbiquity. It’ll host your shapefiles, which you can style the way you’d like, and put them on a nice basemap. It gives you a small amount of HTML code to place on your website and that’s all there is to it.

If you are creating a web map from scratch but need help getting your GIS data created (say you need the locations of your school districts delineated, for example), then let me know because I’ve been doing a lot of that kind of GIS data prep-work lately and would be happy to help you out too!

GOOD WEB MAP!

• Speed
• Non-obtrusive controls
• Color cohesion with the rest of the page
• Style contiguity with the rest of the page
• Scale-dependent rendering of labels
• Scale-dependent rendering of layers (sometimes)
• Smart layer draw-order
• Testing on multiple monitors and browsers

BAD WEB MAP!

• Lack of adequate color contrast
• Lots of text that can’t be hidden
• Too much clicking to get information
• Too much information
• Too little information
• Poor projection choice
• Data is just plain wrong (it’s been known to happen!)

Lately the posts here have been more about the latest goings-on in the GIS world and GIS analysis/data rather than cartographic design principles. Thinking about this today, I realized it is because I’m a bit perplexed about how to modify traditional cartography for digital media. But that’s not the right way to think about it. Even those who are designing maps for digital presentations (e.g., slide shows), interactive web maps, smaller device apps, and the like, still need to know fundamentals of:

• Color
• Text
• Arrangement,
• Figure-ground,
• Hierarchy,
• Placement,
• Purpose,
• Audience, and
• Peer-review.

Furthermore, less major subjects such as isolines, terrain depiction, road casing, for example, still remain important as well. Only now you have to know how to program these things rather than draw them.

We saw it in this great Google maps analysis where, despite the fact that it is an online map, it is extremely sophisticated. Think about all the things they are able to do like dynamically “clearing” an area of labels around a major city to provide a visual distinction between cities and their surroundings. If anything, the art and science of cartography has only grown more complex.

Your thoughts???

Here’s a somewhat developed (get it? get it?) concept about how an independent web map developer can drum-up some business:

Recently, one of the big online custom printers (think business cards, stationary, that sort of thing) began offering a little web map type of service into its offerings. I was in the middle of designing a postcard when I noticed an “Add A Map” button. This button takes you to a pop-up screen with a small map and a place to input a location. This puts a star on the location and then allows you to put that map (for an extra fee) on the postcard, business card, or whatever it is you are designing.

Now, I’m not entirely convinced of this particular concept since it seems as though it is rudimentary for the time being, but I could see it being useful for certain businesses who want an easy to display a basic map on their printed products. My point in using this as an example is that there are all kinds of places where your web map expertise can be applied that nobody has thought of yet. Independent consultants could come up with a list of these integration ideas and then get the word out to those businesses about how much potential value there is. (Hey, for all I know, you are already doing this. If so, be kind and let us know how it is working out.)

This is different from building a web mapping concept into its own business. An event mapper sent me a twitter message the other day as soon as I announced the details about an environmental film night happening locally. These types of web mapping services are also neat, and some of them will probably catch on in some form or another, but this is a whole different angle from the web map integration concept. In the web map integration concept you are going directly to an already established company to propose a solution you can provide. This can bring in revenue much faster than the web map service-as-separate-business concept.

The trade off here is potential for fast revenue versus potential for automatic revenue. A fast revenue stream gets food on your plate quickly but you have to keep getting new business to continue to eat. The automatic revenue stream is most likely going to induce famine at the outset and only potentially bring about a feast later on. If that’s not your bag and you are freelancing, get your creative-mind on and start making out that list of companies that could would have never dreamed of integrating a web map themselves but with your help will see its value.

Focus on a small number of customers on your list at first so that you can deliver a personalized proposal to each. If you’ve made a huge creative effort to come up with a concept then you will be psyched up enough to put forth a huge effort to pitch it to company reps. With the right concept and a thorough follow-through these efforts could enable a prosperous business.

A Web map needs to be easy to use. Duh. Easy enough concept, but how do you really implement it? You can use usability testing when the Web map is finished but when just starting a project, what principles do you go by in order to achieve this ease of use that everyone so (rightly) covets?

One thing you should not do: get rid of features solely for the sake of simplification. In fact, Donald Norman, the author of several design books, says, “simplicity does not mean fewer features.” To argue his point he talks about tools that are very simplistic in design but yet take a while to learn how to use. A pencil would be a good example of this. Other objects that are simplistic just don’t do very much, like a garage door opener. Yet other objects are simple yet are fairly hard to figure out like a pair of salt and pepper shakers where you can’t determine which is which.

One thing you should do: organize the features in a logical way. Norman’s example for this is an airplane cockpit. There are a whole lot of buttons, levers, and other devices in there but they are organized in such a way as to enhance the usability of the cockpit. I’m not sure that he is arguing that a cockpit is simple, since it seems fairly clear that it is not. However, the central thesis is that

Taking away features increases usability but decreases functionality, and is not really necessary. (In my own words.)

If you can, instead, figure out a way to integrate, blend, and organize those features, you can keep the functionality and increase the usability at the same time!

Somewhat Related:
Take the American FactFinder website – the new version. I tried to use it about a month ago, had some trouble figuring it out*, went to the help feature, and discovered the most unhelpful help ever. No actually, I take that back. Most help files are extremely unhelpful. You know why? Because they simply state the obvious. I want to yell at the help and say things like, “Yes I knew that the box that says ‘parameters’ is the place where I type my parameters, but what I want to know is what the h*$% is a parameter and is there a list of them somewhere?”

*I just discovered that I am not alone in having trouble using it so I feel less like an idiot now.

*This article was originally posted on 1/24/2011 on GISUser.com. I’ll be writing a monthly expert column there. Woohoo! The link to all my columns (only 1 so far) is here. In this column I try my best to sound like I know what I’m talking about, re: web map design. There’s a big audience for web map design concepts but I’ll only be able to cover the basics as I’m not completely schooled in this area. Please help the readers by commenting if you’ve got some tried-and-true design ideas!

You know the old stock character of a writer hunched over a typewriter, balls of discarded drafts cluttering up the desk? Web map designers need to do more of that. We need to be editing our web mapping projects with as much fervor as an author. Perhaps then we can design web maps with a perfect balance of simplicity, usability, and knowledge transfer – or at least try to get closer to perfect.

Half of the problem is that lack of effort, the other half is a lack of good designs to emulate. Web maps have so many benefits over the traditional paper map but design principles for them are very new and still evolving. However, enough years have passed for cartographers to now understand what doesn’t work (long load times and trying to recreate GIS software on the Web are just two examples) and what does work (fast, informative, real-time). Speaking just from the aesthetic design point of view, which includes usability, there are some emerging elements of style that are effective and worth trying in your next project. Two of them are covered here.

The first is to steer away from what used to be the staple web map design element: the clickable table of contents holding every conceivable data layer that an organization produces. It’s not just slow and clunky, a lot of users don’t even know how to use it. On small screen mobile devices the table of contents is almost impossible to deal with.

How do you present multiple layers in an intuitive way, then? Take a look at www.govmaps.org. Each type of information gets its own thumbnail map – think highly visual and intuitive – that, when clicked, goes to a web map that contains just the layers pertinent to that subject. Now, if presenting all the layers on one map is something that the users just have to have, then try listing the layers in an integrated drop-down menu like on http://innovista.sc.edu/map/.

Another new style technique is to utilize click and hover capabilities in place of traditional annotation. Annotation that gives the user an instant location awareness (“USA”, “Spain”) is still okay. Annotation that provides details about data points, however, is often better served up upon a mouse click or mouseover in order to keep the original map visually uncluttered and more interactive. For example, the map for this business (yes, it’s pink!) gives you a small picture and name of a few places you might be familiar with that are nearby, but only via a mouseover: http://odopod.com/contact/.

By paying attention to newer and better style techniques such as these and by ruthlessly “throwing away” or editing early drafts, web map designers can vastly improve our work products. Perhaps then we can avoid being admonished in the way of my former boss who would sometimes exclaim, “of all the unmitigated audacities!”