Maps Should Be Crafted, Not “Plugged In”

It’s easier to limit our web map designs to the what third parties offer straight out of the box:

• A self-contained map embedded on a page, centered and zoomed to your taste
• Map markers that, when selected, display pop-ups with more detail about that location
• The ability to zoom and pan the map

In effect, web maps are typically assumed to be interactive worlds bound inside a box, whose only relation to the content around them is their subject matter.

We sweat every detail of users’ experience with things like navigation, or how users add items to a shopping cart and check out. So why, then, does the design process for web maps so often get reduced to copy-pasting some code and calling it a day?

We’re fortunate that the chief limitation in designing experiences with web maps today is simply our ability to shake old assumptions.

Game-changing Tools

In 2010, Vladimir Agafonkin and a growing team of contributors released an open-source Javascript library for building interactive maps that has sparked inventive ways to interact with content and maps, together. It’s called Leaflet, and it’s lightweight (28 KB) and tremendously flexible.

Like Mapbox, ArcGIS, Polymaps, and Modest Maps, Leaflet supports custom tile layers, markers, pop-ups, and layer groups, and works in the must-have browsers. It’s a standout solution for web maps, because it’s free, open-source, well-documented, supported by an active developer community, and plays well with others.

Its most important contribution, in my experience, is its ability to treat map elements just like every other page element: something you can easily select and manipulate with CSS and Javascript.

While that capability may seem pedestrian, it’s quite powerful in practice. Tapping a marker on a map can trigger an event related to elements outside of the map, and vice versa. And once you begin playing with the power that offers, the traditional boundaries between the map and “the rest of the page” vanish.

With preconceptions gone, you can arrive at some fantastic design solutions. MapTales, for instance, offers a tool for telling stories chronologically, scene-to-scene, and location-to-location using immersive web map design. Foursquare’s Explore service helps users find useful places nearby using Leaflet- and MapBox-powered web maps. Instagram made a commitment to maps last year when it introduced Photo Maps, an alternative view for photos that plots their tagged locations on an interactive map. Though the experience isn’t included in Instagram’s website, many of the core user interactions in its iOS and Android app, like clustering, are supported by Leaflet.

A Case Study: Crowdmap

Before joining Happy Cog this year, I led the design and front-end development of Crowdmap, a service for crowdsourcing location-based information. I was part of a three-person team responsible for re-imagining the service, and we set our sights on making it dead easy to use, removing its dependency on a back-end “Control Panel,” allowing posts to appear on multiple maps, and streamlining the post-authoring process.

I’m embarrassed to admit that I made it through four months of design and front-end development — on a product with the word “map” in its name — without giving any serious consideration to the map experience. I tabled it as something that would work itself out, because, you know, it’s a web map. It would just work like a web map (whatever that meant).

This thinking led to an unimaginative design solution that offered two modes for viewing content:

• Map: posts plotted on a map, represented by markers with pop-up summaries.
• Posts: posts listed chronologically, as text and photos.

This approach fell apart when people with fresh eyes attempted to use re-imagined Crowdmap and couldn’t make heads or tails of the relationship between the “map” and “posts” views or the puzzling absence of well-designed maps, given the product name. I was quickly challenged to forget about what I thought web maps were capable of and instead design an experience that erased the divide between the map and the content.

A few weeks later, I arrived at a solution that pitted the map as the surface on which everything else sat. At the outset, posts were represented by markers on the map, like any other web map. Upon selecting them, though, rather than revealing the traditional popup with a link to “see more,” the concept introduced a white “sheet” that slid in and out of view to toggle focus between location and the post’s detailed content.

Sheets flew in and out of view, containing different content (e.g. single post, clusters of posts, all recent posts), depending entirely on what you interacted with.

Off and Running

Building your own custom behavior for tapping or clicking markers (rather than using Leaflet’s built-in pop-ups) can prove to be a very powerful development technique in projects like Crowdmap. After including the necessary files from Leaflet’s library on your website, the technique boils down to three steps that’ll help you break the boundaries between your map and its surrounding content.

In the following example, we’ll stage a web map that, upon clicking a marker, reveals an overlying element and loads the marker’s details into the overlay from a separate web page.

Let’s assume the following HTML structure:

<!DOCTYPE html>
<html>
<head>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
</head>
<body> 
 <div id="map"></div>
 <div id="overlay-container">
 <div class="overlay-window"></div>
 </div>
</body>
</html>

1. Assemble a separate web page with the post’s detailed content.

Capture your posts’ detailed content in a separate web page such that it can be loaded into an overlay via AJAX. In addition to the performance benefits of only loading the content of markers that users interact with, this separate page can double as your post’s permanent, unique webpage.

2. Add a marker.

When adding markers to your map, you don’t need to stray far from Leaflet’s basic marker structure. Instead of binding Leaflet’s built-in pop-up method, bind the .on() method, listen for ‘click’ events, and define variables for its latitude, longitude, and the URL for the post’s detailed view.

	L.marker([39.960046, -75.172937]).addTo(map).on('click', function(){
 var postLocation = [39.960046, -75.172937],
 postURL = 'http://domain.com/post/title';
 popupPost(postLocation, postURL);
});

At the end, we call a custom function, popupPost(), which we’ll pass our location and URL to so we can define the behavior we intend for our custom overlay.

3. Write a custom function to replace Leaflet’s built-in L.Popup.

The popupPost() function first pans the map to the selected marker’s location. It then reveals the #overlay-container element and places the HTML content from the post’s permanent URL inside it (specifically the portion intended for the sheet, with the class “overlay-target”).

function popupPost(postLocation, postURL) {
 map.panTo(postLocation);
 $(‘#overlay-container').fadeIn('fast', function(){
 $('#overlay-container .overlay-window').load(postURL + ' .overlay-target’);
 });
 }

Combined with CSS, this small package of code can pave the way for some unique and immersive web map experiences. You’ll find it in play throughout Crowdmap and in a recent Happy Cog project, Digital PM Summit.

Both projects call for location to be central to how content is experienced — not just a visual aid. Libraries like Leaflet leave few excuses not to deliver these experiences. But, as frameworks like these mature, the case strengthens for location earning first-class status among images, text, audio, and video as the most imaginative turf for communication on the web.

Back to Top