Skip navigation

Web mapping

warning: Creating default object from empty value in /var/www/vhosts/ on line 33.
Original author: 
(author unknown)

Web maps have come a long way. Improved data, cleaner design, better performance, and more intuitive controls have made web maps a ubiquitous and critical component of many apps. They’ve also become one of the mobile space’s most successful transplants as more and more apps are powered by location-aware devices. The core web map UI paradigm itself—a continuous, pannable, zoomable surface—has even spread beyond mapping to interfaces everywhere.

Despite all this, we’ve barely begun to work web maps into our design practice. We create icon fonts, responsive grids, CSS frameworks, progressive enhancement strategies, and even new design processes. We tear down old solutions and build new ones, and even take an extra second to share battle stories in prose and in person. Yet nearly five years since Paul Smith’s article, “Take Control of Your Maps,” web maps are still a blind spot for most designers.

Have you ever taken apart a map? Worked with a map as a critical part of your design? Developed tricks, hacks, workarounds, or progressive enhancements for maps?

This article is a long overdue companion to Paul’s piece. Where he goes on a whirlwind survey of the web mapping stack at 10,000 feet, we’re going to walk through a single design process and implement a modern-day web map. By walking this path, I hope to begin making maps part of the collective conversation we have as designers.

Opinionated about open

Paul makes a strong case for why you might want to use open mapping tools instead of the established incumbent. I won’t retread his reasons here, but I would like to expand on his last: Open tools are the ones we hack best.

There is nothing mysterious about web maps. Take any spatial plane, split it up into discrete tiles, position them in the DOM, and add event handlers for panning and zooming. The basic formula can be applied to Portland, Mars, or Super Mario Land. It works for displaying large street maps, but nothing stops us from tinkering with it to explore galleries of art, create fictional game worlds, learn human anatomy, or simply navigate a web page. Open tools bare the guts of this mechanism to us, allowing us to see a wider range of possibilities.

 character navigation, Mars, and Super Mario Land.
The mechanics of web maps are not limited to street maps.

We should know the conditions under which map images are loaded and destroyed; we should argue whether map tiles are best positioned with CSS transforms or not; and we should care whether vector elements are drawn with SVG or Canvas. Open tools let us know and experiment with these working details of our maps. If you wouldn’t have it any other way with your HTML5, CSS, or JavaScript libraries, then you shouldn’t settle for less when it comes to maps.

In short, we’ll be working with a fully open mapping stack. MapBox, where I work, has pulled together several open source libraries into a single API that we publish under mapbox.js. Other open mapping libraries that are worth your time include Leaflet and D3.js.

Starting out

I’m a big fan of Sherlock Holmes. Between the recent Hollywood movies starring Robert Downey Jr. and the BBC’s contemporary series, I’m hooked. But as someone who has never been to London, I know I’m missing the richness of place and setting that Sir Arthur Conan Doyle meant to be read into his short stories.

A typical approach would be to embed a web map with pins of various locations alongside one of the Sherlock stories. With this approach the map becomes an appendix—a dispensable element that plays little part in Doyle’s storytelling. Instead, we’re going to expand the role of our map, integrating it fully into the narrative. It will set the stage, provide pace, and affect the mood of our story.

Comparing a map used as embedded media versus one used as a critical design element.

A tale of places

To establish a baseline for our tale, I restructured The Adventure of the Bruce-Partington Plans to be told around places. I picked eight key locations from the original text, pulled out the essential details of the mystery, and framed them out with HTML, CSS, and JavaScript.

Text only demo.
A Sherlock Holmes story in text only. View Demo 1.

  • The story is broken up into section elements for each key location. A small amount of JavaScript implements a scrolling flow that highlights a single section at a time.
  • Our page is not responsive yet, but it contains scaffolding to guard against bad choices that could thwart us. The main text column is fluid at 33.33% and pins to a min-width: 320px. If our content and design flow reasonably within these constraints, we’re in good shape.

Next, we’ll get started mapping. Initially we’ll work on our map separately from our story page to focus on learning key elements of a new technology.

Maps are data

The mapping equivalent of our abridged Sherlock story is a dataset of eight geographic points. GeoJSON, a format for describing geographic data in JSON, is the perfect starting point for capturing this data:

    "geometry": { "type": "Point", "coordinates": [-0.15591514, 51.51830379] },
    "properties": { "title": "Baker St." }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.07571203, 51.51424049] },
    "properties": { "title": "Aldgate Station" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.08533793, 51.50438536] },
    "properties": { "title": "London Bridge Station" }
}, {
    "geometry": { "type": "Point", "coordinates": [0.05991101, 51.48752939] },
    "properties": { "title": "Woolwich Arsenal" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.18335806, 51.49439521] },
    "properties": { "title": "Gloucester Station" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.19684993, 51.5033856] },
    "properties": { "title": "Caulfield Gardens" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.10669358, 51.51433123] },
    "properties": { "title": "The Daily Telegraph" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.12416858, 51.50779757] },
    "properties": { "title": "Charing Cross Station" }

Each object in our JSON array has a geometry—data that describe where this object is in space—and properties—freeform data of our own choosing to describe what this object is. Now that we have this data, we can create a very basic map.

Basic web mapping demo.
The basics of web mapping. View Demo 2.

  • Note that the coordinates are a pair of latitude and longitude degrees. In the year 2013, it is still not possible to find a consistent order for these values across mapping APIs. Some use lat,lon to meet our expectations from grade-school geography. Others use lon,lat to match x,y coordinate order: horizontal, then vertical.
  • We’re using mapbox.js as our core open source mapping library. Each map is best understood as the key parameters passed into
    1. A DOM element container
    2. One or more Photoshop-like layers that position tiles or markers
    3. Event handlers that bind user input to actions, like dragging to panning
  • Our map has two layers. Our tile layer is made up of 256x256 square images generated from a custom map on MapBox. Our spots layer is made up of pin markers generated from the GeoJSON data above.

This is a good start for our code, but nowhere near our initial goal of using a map to tell our Sherlock Holmes story.

Beyond location

According to our first map, the eight items in our GeoJSON dataset are just places, not settings in a story full of intrigue and mystery. From a visual standpoint, pins anonymize our places and express them as nothing more than locations.

To overcome this, we can use illustrations for each location—some showing settings, others showing key plot elements. Now our audience can see right away that there is more to each location than its position in space. As a canvas for these, I’ve created another map with a custom style that blends seamlessly with the images.

Web map with illustrations.
Illustrations and a custom style help our map become part of the storytelling. View Demo 3, and then read the diff.

  • The main change here is that we define a custom factory function for our markers layer. The job of the factory function is to take each GeoJSON object and convert it to a DOM element—an a, div, img, or whatever—that the layer will then position on the map.
  • Here we generate divs and switch from using a title attribute in our GeoJSON to an id. This provides us with useful CSS classes for displaying illustrations with our custom markers.

Bringing it all together

Now it’s time to combine our story with our map. By using the scroll events from before, we can coordinate sections of the story with places on the map, crafting a unified experience.

Web map coordinated to story text by a scroll handler.
As the user reads each section, the map pans to a new location. View Demo 4, then read the diff.

  • The bridge between the story and the map is a revamped setActive() function. Previously it only set an active class on a particular section based on scrolling position. Now it also finds the active marker, sets an active class, and eases the map to the marker’s location.
  • Map animation uses the easey library in the mapbox.js API, which implements animations and tweening between geographic locations. The API is dead simple—we pass it the lon,lat of the marker we want to animate to, and it handles the rest.
  • We disable all event handlers on our map by passing an empty array into Now the map can only be affected by the scrolling position. If users wanted to deviate from the storyline or explore London freeform, we could reintroduce event handlers—but in this case, less is more.

Displaying our fullscreen map together with text presents an interesting challenge: our map viewport should be offset to the right to account for our story on the left. The solution I’m using here is to expand our map viewport off canvas purely using CSS. You could use JavaScript, but as we’ll see later, a CSS-only approach gives us elegant ways to reapply and adjust this technique on mobile devices.

Using an off-canvas map width to offset the viewport center.

At this stage, our map and story complement each other nicely. Our map adds spatial context, visual intrigue, and an interesting temporal element as it eases between long and short distances.

Maps in responsive design

The tiled, continuous spatial plane represented by web maps is naturally well-suited to responsive design. Web maps handle different viewport sizes easily by showing a bit more or a bit less map. For our site, we adjust the layout of other elements slightly to fit smaller viewports.

Adding a responsive layout.
Tweaking layout with web maps. View Demo 5, then read the diff.

  • With less screen real estate, we hide non-active text sections and pin the active text to the top of the screen.
  • We use the bottom half of the screen for our map and use media queries to adjust the map’s center point to be three-fourths the height of the screen, using another version of our trick from Demo 4.

With a modest amount of planning and minimal adjustments, our Sherlock story is ready to be read on the go.

Solve your own case

If you’ve been following the code between these steps, you’ve probably noticed at least one or two things I haven’t covered, like the parameters of ease.optimal(), or how tooltips picked up on the title attribute of our GeoJSON data. The devil’s in the details, so post to this GitHub repository, where you will find the code and the design.

You should also check out:

  • The MapBox site, which includes an overview of tiling and basic web map concepts, and MapBox.js docs and code examples.
  • Leaflet, another powerful open source mapping library.
  • D3.js, a library for powering data-driven documents that has a broad range of applications, including mapping.

This example shows just one path to integrating web maps into your designs. Don’t stick to it. Break it apart. Make it your own. Do things that might be completely genius or utterly stupid. Even if they don’t work out, you’ll be taking ownership of maps as a designer—and owning something is the only way we’ll improve on it.

Your rating: None

One more look into the fascinating New York City Municipal Archives, and their recently-released database of over 870,000 photos throughout the 20th century, a follow-up to this earlier entry. Their subjects include daily life, construction, crime, city business, aerial photographs, and more. Today's selection from this remarkable collection includes numerous street scenes that are visible today through Google Maps Street Views, and links are provided to let you see the difference the years have made. [50 photos]

Lower Manhattan skyline at night, seen beneath the Brooklyn Bridge, Brooklyn end in February of 1938. See this scene today in this Google Map street view. (E. M. Bofinger/Courtesy NYC Municipal Archives)

Your rating: None

waderoush writes "Google wants to 'organize the world's information,' but there isn't a marketplace or a category of knowledge it can organize without remaking it in the process. A case in point: public transportation. Largely outside the media spotlight, Google has wrought a quiet revolution over the last five years in the way commuters get schedule information for local buses and trains, and the way public transit agencies communicate with their riders. GTFS and GTFS-realtime, which Google invented, have become the de facto world standards for sharing transit data, and have opened up space for a whole ecosystem of third-party transit app developers. This in-depth article looks at the history of GTFS and Google's efforts to give people information (largely via their smartphones) that can help them plan their commutes on public transportation — and, not incidentally, drive a lot less."

Share on Google+

Read more of this story at Slashdot.

Your rating: None

New York redesign

Google Maps is one of Google's best applications, but the time, energy, and thought put into designing it often goes unnoticed because of how easy it is to use, for a variety of purposes. Willem Van Lancker, a user experience and visual designer for Google Maps, describes the process of building a map application — color scheme, icons, typography, and "Googley-ness" — that practically everyone can use, worldwide.

We have worked (and driven) around the world to create a "map" that is a collection of zoom levels, imagery, angles, and on-the-ground panoramas all wrapped into one. Through these varied snapshots of our world, we are attempting to sew together a more seamless picture of the Earth—from its natural beauty to the surprising (and often absurd) details that make it our unique home. As our work progresses, new technologies give us the opportunity to get away from the limitations and complexity of standard cartography to provide a much more approachable and easy-to-understand map, loaded with data and information.

Remember when we had to refresh the page to see more of map?

[Core77 via @awoodruff]

Your rating: None


It is often the case in interaction design that the best solutions simply get out of the way, allowing the user to achieve their goal and get on with their life. With Google Maps, this is certainly the desired outcome. Geographic navigation and search should be smooth, efficient, and ultimately straightforward. When this is successful and the product works as it should, the nuances and details behind these experiences can often go unnoticed, written off as algorithmically derived and invisible.

Since its launch in 2004, Google Maps has come a long way from its relatively simple beginnings as a simple pannable and zoomable road map of the United States and United Kingdom. Today we display business and transit networks, three dimensional cities, natural terrain, and much more. It is a map that serves pedestrians, motorists, tourists and locals alike. Soon it was not only used it as a "clean" map for wayfinding and browsing but also as a base for overlays, search results, directions, and personal customization—with sources from all over the web. In the same vein as Google's mission, we are organizing the world's information in a geographic context.

The work and evolution behind this ambitious undertaking is a combination of design vision, product strategy, engineering prowess, and ethnographic and usability research. Our User Experience team comprises a small group of designers, researchers and prototypers in offices around the globe. The research and experience gained in these diverse locations give us insights into real-world usage and help us better serve the needs of our users.

The breadth of our collective work, whether it's anything from helping a local business connect more meaningfully with their customers to helping you find your gate at the airport on time, is harmonized by our common goal to deliver a more complete picture of the Earth. From its roadways and cities to weather patterns and natural wonders, our team is attempting to capture the complexity and variance of these multiple systems in a product that just about anyone can use.

To accomplish this vision, we work in our studios flipping between sketchbooks and whiteboards, Photoshop and Fireworks, visualizing user scenarios and creating new design concepts quickly and in high-fidelity. We complement this process by hacking rendering specs and tweaking Javascript to produce interactive demos. Occasionally, we will even turn to programs like Apple Keynote and Adobe After Effects to quickly demonstrate interactive transitions and animations. These lightweight models give us the ability to test and experiment with highly interactive designs without demanding the resources of a full engineering team. As the design process continues, these prototypes (and static design mocks) are crucial in our early "cafe" usability studies where we often walk a user through a single-outcome user "journey" (e.g. getting directions or finding a hotel).

1.jpegA snapshot of Google Maps' design evolution 2009 (top) - 2011 (bottom). click for more information.

Synthesizing all of this information in an approachable and aesthetically pleasing way carried obvious challenges. As the product grew and evolved, the map varied widely from one country to another, and the universal familiarity and usability that made Google Maps a success was being undermined by complexity and "feature creep." To better understand which of these variances were useful, we audited the map styles, colors, and iconography of maps all over the world with the help of local users. We examined the leading online and offline mapping providers in each country, in addition to researching local physical signage and wayfinding. This undertaking provided us with a look at mapping as a local exercise—with cultural, ethnic, and region-specific quirks and nuances.

2.jpegOur global cartography audit in progress.

With this research in mind, we came to the realization that there was little consistency between this collection of maps and no real indication of a common "correct" palette for color and style rendering. By unifying and simplifying our own Google color palette down from hundreds to a small handful of colors, we were able to produce an experience that provided familiarity and uniformity as you browse the world.

3.jpegA sampling of our color palette studies and refinement.


Your rating: None

Deaths in Just Cause landscape

Sometimes visualizing everything can turn out beautiful results. It seems to work especially well when the data is geographic, as we saw with All Streets, OpenStreetMap edits, and tourist maps. It turns out the everything method works for fictional worlds, too. The above and the video below are nothing but 11.3 million deaths by impact with object or terrain in the game Just Cause 2.

Buildings, blimps, and rivers appear, and even if you've never played you get a sense of how the game is played.

Watch the video in its entirety below, best viewed in full screen HD.

Anyone play Just Cause 2? Does the map of deaths match your expectations?

[Video Link via @infobeautiful]

Your rating: None