Stamen is a design and technology studio in San Francisco.

You are at Stamen's first blog, mostly written by Eric Rodenbeck. Visit our new blog! or come visit us at our newly designed stamen.com.

Contact Stamen, or follow us on Twitter

Recent blog posts

Jun 25, 2012

Kelso at MIT for 2012 Knight News Challenge Winners

Nathaniel showcased nearly two years of City Tracking in Boston last Monday at the MIT/Knight Story and the Algorithm conference. You can read about this years' winners here, as well about the changing nature of the grant: shorter cycles, more opportunities to apply, that kind of thing. It's worth a look.

The City Tracking project started off with Dotspotting.org, which allows mapping of data spreadsheets. The project still sees active use, but after we made the Toner tiles available for download we started to notice that more people were expressing interest in the background maps than in the ability to put dots on them.

Responding to public feedback while the project happened was something we were interested in from the start, and http://maps.stamen.com is the result: a browsable, embeddable, and otherwise immediately usable map of the whole world that can be used in Google Maps, Modest Maps, and other mapping APIs without having to download all of OpenStreetMap or tinkering with servers and technical code.

Nathaniel closed with a project we launched in March showing how climate change can be made personal on the street level, instead of the usual course brush strokes, with Climate Central's surging seas project.

These thin slices of big data are bite size morsels of aha. We hope you like them!

Jun 21, 2012

Creepy Maps: Quarantine Your City

by Shawn

Earlier this year we worked with Warner Bros. to create an interactive map called Quarantine Your City on which fans of the latest Oren Peli thriller, Chernobyl Diaries, could vote to see a special screening in their city. The plot follows a group of modern-day American tourists on an "adventure tour" of Pripyat, the site of the infamous nuclear catastrophe at the Chernobyl Nuclear Power plant on April 26, 1986. As you can probably imagine, things don't go quite as planned.

Radiation Levels

The idea behind the screening competition was that users could "quarantine" their city by voting for it on Twitter or Facebook, which would raise the radiation levels over a certain threshold, and after a couple of weeks would Warner Bros. select the 20 most popular. Here's what it looked like early on:

early on

And after the voting was done:

photo finish

We used ModestMaps and Easey to build this map. One significant improvement we made over the PA3 map was to squeeze all of the label positioning information for the most populated US cities into a single data file, which makes the whole map feel much more responsive when zooming in and out. We even used image sprite to pack all of the different radiation symbol sizes and color combinations into a single image. Browsers are getting faster by the day, and it's not hard to imagine a near future when we could put a hundred times as many labels as this on a slippy map:

early on

Cartography

Drawing inspiration from the rusted metal and concrete textures used in the film's advertising materials, and using the same process that we developed for our watercolor maps, Zach and Geraldine created a new map in which land masses are rendered as hunks of crusty, mottled concrete.

Check out the standalone slippy map, or click on the images below.

US

The texture changes subtly at each zoom level, getting more messed up and contrasty as you go in:

Western US

Bay Area

Bay Area

Bay Area

The coastline treatment gets really interesting around places like the San Joaquin River delta and the Chesapeake Bay:

San Joaquin River Delta

Chesapeake Bay

And inland lakes and rivers look more like craters, cuts, fissures and scars:

lakes

rivers

more rivers

scars

We're obviously having a lot of fun pushing the boundaries of what's possible with online cartography, and we're getting better and faster at making worldwide maps in the process. If you're looking to get your own maps of the world, and especially if you're looking for maps that look like they've been attacked by a horde of radioactive zombies, do get in touch!

Jun 20, 2012

"Clouds" and the Pointcloud Remix Project

by Rachel



A couple of weeks ago, the video Clouds premiered at the Wired Frames exhibit at Eyebeam in NYC. I had the good fortune of being involved in this project, which was led by documentary filmmaker Jonathan Minard and creative coder James George. The three of us met at the Art&&Code conference in Pittsburgh, in October '11. In addition to attending the conference, we also participated as "labbers" for the four days preceding it. Minard had intended to interview each of the labbers before the conference, and was interested in trying to add Kinect data into the process. It turned out that George had been planning to do a similar mixing of Kinect and DLSR data, so they combined forces.

By the end of the labber session, the pointcloud remix project was born. By mapping real-world color information (through the digital camera) onto points in space (provided by the Kinect), Minard and George had developed a new documentary medium. Realistically coloring a pointcloud was one thing, but this merging of datasets offered the possibility of customizable, remixable video playback. For starters, the camera view did not have to be dictated by the real-life camera position during filming; video playback could include all sorts of pans and zooms. Even more exciting is the possibility of writing code to act on top of the pointcloud, opening up possibilities such as image processing, mesh distortions, or particle systems.

In the beginning of 2012, George got back in touch with the labbers, announcing a video editing program that he had written on top of openFrameworks. Each person was given their interview data, and had the opportunity to remix it in their own way. For my experimentations, I focussed on distorting the mesh of points, as well as tweaking colors. The final compilation of my interview was an exploration of these forms, beginning at a relatively stable form, and then becoming more distorted and crazy as the interview progressed. Below are stills from different sections of the interview, as well as a video of one of the more wild distortions.





Jun 15, 2012

Weather weather everywhere

We've been working on a travel planner for the Weather Channel that tells you a bit more than just how long it'll take to get from point A to point B. This one predicts what the weather's going to be like along your drive, when you get there.

So let's say you're driving from New York to San Francisco, and you're trying to decide whether to go straight across or loop up or down a bit; this will give you a sense for whether it's going to be rainy or sunny when you plan to be in the middle of Nebraska. You can drag around the rainy bits if you like, and also along the way maybe you'd like to stop for a bite to eat, so we're hitting the Yelp API to give you a sense of where to go and what to see.

As is often the case, the research that goes into building one of these pieces can be as interesting as the final product. As an early stage proof of concept, we put together some images showing all the predictions for weather searches offset by time and location, with some (I think) lovely results:

They start to put me in mind of an early project we did here at Stamen, a set of travel time maps for MySociety that plotted the time it would take to get from one place in London to every other place in London:

I start thinking of weather maps that flow and ebb across the country, where different sliders open and ebb various kinds of other axes: time for sure, but maybe population density, maybe altitude, maybe temperature, maybe how many farms there are, maybe distance from a weather station or a McDonald's—all the different kinds of things that affect people's sense of place and space and time, organized by what's above our heads.

Stay tuned!

View Project

May 30, 2012

Announcing Field Papers

We've just rolled out a new way for you to make atlases of the world, called Field Papers and made with our friends at Caerus Associates. Field Papers allows you to print a multipage paper atlas of anywhere in the world and take it outside, offline, into the field. You can scribble on it, add features, or make notes about the area, all without a GPS or complicated GIS software.

Once you've annotated your atlas, you can upload photographs of each page back into the system to transcribe your notes into digital form. Each atlas gets its own page on Field Papers, and a simple history of edits and activity which you can share with friends or colleagues, and download for later analysis. Take a look at some of the atlases that have already been created on the Watch page, or browse by place, like France or Liberia.

The interface looks like this:

This project is a continuation of Walking Papers, which was built for the OpenStreetMap (OSM) editing community. Field Papers allows you to print multiple-page atlases using several map styles (including satellite imagery and black and white cartography to save ink) and has built in note annotation tools with GIS format downloads. You can also create a Field Papers account to collect any atlases you create or snapshots you upload, or you can stay anonymous. Maps from the two systems work together if you want OSM editing (see below).

Field Papers also offers several automation and map customization tools for more geo-inclined people, and the open source code is on Github.

Why not try making an atlas at Field Papers?

View Project

Apr 20, 2012

New Work: 2012 NewNowNext Awards

I still remember those long lost days when an "interactive website" meant a site that had a mouseover effect on the navigation bar. How far we've come. Working with the fantastic, bold branding, we created a Twitter Tracker for Logo TV's 2012 NewNowNext Awards that aired on April 6.

Image of the host and performers at the 2012 NewNowNext awards

screenshot of the twitter tracker site

The animations on the site are crazy interactive:


2012 NewNowNext Awards Twitter Tracker from Stamen on Vimeo.

As we watched the show unfold, and the tweets get tweeted, it was super fun to see the NNN community rally around performers they like, and start to use the tracker to bump up attention.

Congratulations to all the winners, and to all the Tweeters who pushed their favorite stars into the coveted #1 spot!

Apr 2, 2012

There are cupcakes with Stamen maps on them.

There are cupcakes with Stamen maps on them. Each one has a single tile printed on it. Cups and Cakes Bakery baked and prepared them. They were made for the Where 2.0 conference, where Mike is talking about how Old Is The New New and I am talking about Drawing Outside the Lines, which taken together is a pretty good indication of where Stamen's collective thoughts are.

THERE ARE CUPCAKES WITH STAMEN MAPS ON THEM.

Mar 30, 2012

Log Maps

by Jeff

Here's the final entry of a week of posts about the maps.stamen.com launch. As the launch of our new maps neared, I created a tool for us to look at how people are using the maps.

Pre-Launch

To speed up the loading of the maps, we try to pre-cache the map imagery. One problem. The Earth is big, and, no matter how popular, only a small percentage of it will actually be looked at on our maps. It would take our server years to render the entire world down to zoom 13 which still leaves 5 zooms levels uncached. We have some tricks to address this problem like only pre-caching areas with land, but this topic is one Nate is going to cover in the near future. Now ten days after launch, we wanted to see how people are using the map so in the future we can improve our pre-caching.

Tiles

First some background. Currently, most interactive maps on the internet are made of 256x256 pixel images called tiles (map tile background). Using tiles allows maps to load dynamically as you pan and render out the geometries for a bounded area making the image generation faster. Here we have a 3 tiles from our new basemaps at zooms 11, 12, and 14 respectively.



Maps

Like any other page on the Internet, as people browse the maps, server logs are generated which give us a list of tiles that were downloaded. I rendered this data out showing each tile at its location and area it takes. The smaller squares represent the 256x256 pixel images but at a higher zoom level. The colors cycle through the zoom levels.

This is the world for Toner which has been in testing for a few months. Europe and Africa are in the middle. For North America, Florida and the bi-costal densities are the only defining features. South America is absent.



Here is the same dataset but focused on the US. The Bay Area has been looked at heavily, likely due to internal testing use on local projects. The green smile across the bottom is likely someone following a highway, maybe I-20/30.



This map is the terrain map pre-launch showing the western US. The coastline from San Francisco to Mexico has been examined. Also, a large amount of Utah was looked in fine detail. This area is very sparse of population but likely someone looking at the hill-shading.



We were intrigued. This map of what people look at on maps was something we hadn't seen before. There was more detail than the initial static images could show so I turned it into a tile-server so we could make it interactive progressively showing more detail as you zoom in.

Here, viewing the grid of tiles, someone appears to have followed a river.



The Northeast corridor for all 3 tilesets.



In New York City, Wall Street, Dumbo, and Park Slope are getting looked over most closely.



Post-Launch

These are the log maps for just Watercolor over the last 10 days. They represent 1.2 million tiles served of which 350,000 were unique. As we saw previously, the US and Europe get a lot of viewing.



Not surprisingly, the map viewing correlates with city labels. The exceptions are along the coasts north of Los Angeles and of the Carolinas and Georgia.


Mar 29, 2012

Terrain Process

by Mike

This is a follow up post to yesterday's post about watercolor textures, Tuesday's about watercolor process, and Monday's announcing the launch of maps.stamen.com.

Terrain Layer has been on my mind since 2008 when I first started to experiment with digital elevation data, but it’s only really come together in the past year when Nelson Minar and I started kicking ideas around for making an open source answer to Google’s terrain layer. As an amateur pilot and an iPad owner, Nelson was interested in something that would make sense seen from high above. I was interested in something that would make sense at medium zooms, with all the crazy data-munging that implies.

An image as simple as this, for example, requires so much more than plain OpenStreetMap data can provide:

Obviously, there are the hills. The streets present a problem, too: many large roads that you might see at this scale are modeled as “dual carriageways” in OSM, which means that they’re actually two one-way roads as far at the database is concerned, so you can end up with a lot of doubled-up street names. The route numbers are often hidden away in weird tags with extra junk attached, and even picking the right color for the ground is a challenge.

Happily, the U.S. Geological Survey has our back. They publish absolute mountains (heh) of fascinating and useful data, including high resolution elevation models of the entire country that can be transformed into shaded hills, and types of land cover that can be colored according to vegetation.

Gem Spear helped me develop a custom color palette for the landcover, explaining the meaning of different plant classes, five kinds of forest, combinations of shrubs, grasses and crops, and a few tundras and wetlands and how they should appear together on a map.

The ground and hill renderings are about imitating the work of Eduard Imhof, whose use of color derived from grayscale relief simulated the appearance of hills in sunlight. My version is drastically toned-down from his, but the hint of warm and cool are there:

Back in the foreground, we’re making three adjustments to the base OSM data to improve the look of these maps.

First, High Road is a framework for normalizing the rendering of highways from OSM data, a critical piece of every OSM-based road map we’ve ever designed at Stamen. Deciding exactly which kinds of roads appear at each zoom level can really be done just once, and ideally shouldn’t be part of a lengthy database query in your stylesheet. High Road sorts it all out, giving you good-looking road layering despite the zoom level.

The shields and labels are both driven by some work I’ve been doing with Schuyler Erle on Skeletron. It’s an attempt to generalize complex linework in code using a range of techniques from the straight skeleton to Voronoi tesselation. I’m pre-processing every major road in the U.S. at a variety of zoom levels, so that big, complicated, doubled-up and messy roads are grouped together into neat lines that can be labeled using big, legible type:

The highways are a special beast. I’m using a combination of Skeletron and route relations to add useful-looking highway shields for numbered freeways. One particular OpenStreetMap contributor, Nathan Edgars II, deserves special mention here. I feel as though every time I did any amount of research on correct representation or data for U.S. highways, NE2’s name would come up both in OSM and Wikipedia. He appears to be responsible for the majority of painstakingly organized highways on the map, which means that maps like this of the East L.A. freeway system can look more legible:

The final assembly takes place in TileStache’s Composite provider, inspired by Lars Ahlzen’s TopOSM to do exactly the kind of raster post-processing and compositing that makes this terrain map possible. Everything we’re using is 100% open and available via Github.

I’ll close with some images of my favorite spots:

Mar 28, 2012

Watercolor Textures

by Geraldine

Following up on Zach's post from yesterday and Eric's post on Monday, here's a peek into my process in creating watercolor textures for watercolor maps.

Below is a breakdown of the steps, a mix of the hand and the computer in all:

Painting

My first concern was color. I started painting even swatches of colors using a very wide flat brush with vertical strokes.

Watercolor Maps, February 13

We weren't very happy with the results and moved the opposite direction.

I went through many rounds of painting and testing, experimenting with other types of brushes as I went along, as well as painting on smooth to rough varieties of paper. For the final product, a variety of brushes and papers were used depending on the desired result. For example, the rougher papers added that extra texture needed for ground areas. It was fun to mix it all up to convey a variety of terrain. ( See my set of textures available for use on Flickr under a Creative Commons Attribution-NonCommercial license. )

The process of going back and forth from painting to the computer became a continuous cycle. Midway through as I became more and more familiar with the outcome of how the actual texture would appear on the screen when tiled, my painting process became more specific to achieve the desired texture, color, darkness, stroke, range of value that I wanted for each feature on the map.

For oceans, I painted a range of blues mixed with turquoise and violet.

For parks, I mixed yellow greens, forest greens, muddy greens in dark and light ranges.

It was like this for every feature on the map.

Oranges, reds and browns for motorways with major roads fading in and out underneath.

Lavender-gray buildings.

Towards the end I was using original textures with no color retouching, Photoshop was mainly used for cutting seamless tiles.

Making Tiles

The process of creating seamless tiles was just as painterly as the painting on paper. I quickly learned how to use that tiling feature in Photoshop and enjoyed the whole process of hiding the seams. Even at this step the desired color and texture was always in mind.

Some sample tiles below.

Watercolor Maps, March 2nd

Cascadenik

This is Zach and Mike's domain. Zach and I would discuss and tweak qualities of line and darkened edges, which are just some of the filters he created for this mapstyle. He would set me up with the desired filtered effects leaving me to focus primarily on the textures. For the final product, a texture was created for each zoom level and for each feature of the map. So for example, parks have a green texture tile for each zoom level and so on. This worked particularly well for zooming in and out of water bodies since it conveys the movement of the oceans.

Enjoy ^___^