Good-looking maps used to be the domain of experts. That’s been changing quite a bit in the last few years, and it’s easier than ever now for developers to access mapping data (the recent State of the Map US conference was a great place to hear about this). Never content to leave well enough alone, we thought we’d kick this sideways a bit and make it easy for the rest of us to make some great stuff.
We call it Map Stack. It's a bit like Instagram for maps.
The maps.stamen.com project was designed to let people easily use Open Street Map data in their own applications, and to provide well-designed map styles that would raise the bar for what people expect from open data. We're taking this a step further now, with http://mapstack.stamen.com/. Map Stack is about putting your creativity on the map, making it radically simpler to design your own map styles, without having to know any code, sign up for anything, install any software, or do any typing. We provide different parts of the map stack: backgrounds, roads, labels, and satellite imagery and straightforward controls for manipulating things like color, opacity and masking.
Watercolor punched through by satellite imagery from MapBox.
You don't need to sign up for anything, know how to code, or know much about cartography to make great looking maps. You just need to decide where in the world you want to go, a web browser, and about five minutes.
So now you can make all kinds of cool maps — say, this map of the Pentagon (which appears aglow with all the PRISM data flowing through it) — in no time:
We’d originally talked about calling the project the “map sandwich,” since it’s all about the stacking of layers of maps. You know, like a sandwich! The first WhereCamp DC used a sandwich as its logo and the idea stuck. From there we went to “delicatessen,” 'cause that's where you go to have your sandwiches made. (We went through lots of names - “mappuccino kundalini” was a favorite for a while.)
The deli name went away but the idea of a neighborhood, brick-and-mortar shop with regular hours stayed. We’ve decided, for the sake of Seth’s sanity, that Map Stack will be open for business Monday to Friday, from 11 a.m. to 5 p.m. PST until we can sort out what kind of infrastructure the project will need given the level of interest we’re seeing. You can tweet us during those hours with questions or give us a shout out to show off your smorgastrata at: http://twitter.com/mapstackStamen.
In its first day, viewers to the site generated about 10GB of map tiles—there are 10GB of new maps in the world! Which is great, but that’s a lot of tiles. We’re not getting paid for this—yet—and part of the project is figuring out what the business model might be.
A few initial ideas: we might offer the map backgrounds as a hosted service, we might sell prints (like we do via Soft Cities, 20x200 (sadly down but apparently coming back soon), and as of today, DODOcase), we might integrate it with Pinterest or Twitter or Facebook better (there’s a conversation about this very thing happening on Twitter right now)—we’re not sure. One thing we do know is that the best way to find this information out is to release projects into the wild, so!
Here are some examples, a short menu of maps that we and others have worked up to get you started. You can also view a gallery of images that people are creating here. Enjoy!
Last week Mike and I were invited to speak at the Jet Propulsion Lab for "Visualization: From Data to Discovery," a conference about the overlap between data visualization and science.
Which would have been interesting enough on its own (because science is awesome), but the icing on the cake was a tour of the Labs. We got to spend some time in the control room where the Mars Exploration Rover is controlled and check out live updates from the Voyager space probe (64k of memory, 35 years old, almost interstellar, totally bad ass).
We also took a close look at Curiosity, which has paint chips attached to its back that the onboard camera can use to color correct itself. The probe also has holes in the tires so the dust can fall out. As it drives around, these holes are visible in the tracks the rover leaves behind.
These markings can be used to visually determine distance travelled. Originally the holes spelled out J-P-L. This didn't go over well with NASA, so now it's—wait for it—Morse Code that spells out…J-P-L.
As a small gesture of thanks to the scientists who are working hard to do science and communicate with the public despite the stupid sequester, we've put together a 3d contour map of the Martian surface, using data collected by the Mars Orbiter Laser Altimeter. You can take a look for yourself at http://maps.stamen.com/mars.
Later today, I'll be joining a panel discussion at SPUR talking about how urban agents are changing our cities, with local design and infrastructure smarties like Raphael Garcia from the San Francisco Public Utilities Commission & Nancy Levinson from Design Observer.
On my radar: welcome urban innovations like parklets, less-popular (or at least more controversial) private bus lines to Silicon Valley and how a new kind of practice is emerging that works with open source software and data to bridge the divide.
New actors are forcing change in from the edges, outside of traditional power structures and narratives and in ways that challenge our assumptions about what cities are for and how they should be run.
If you can't make it this afternoon (details here), I'll be posting the talk later on.
Lock Batman, Hulk, Iron Man, Catwoman, a mercenary Snow White and antihero Bilbo Baggins in a room. Make 'em fight. Who wins?
Our latest social vote project for MTV's 2013 Movie Awards gives a realtime window into this virtual bloodbath.
Leading up to the April 14 awards show, fans are casting votes for this year's best cinematic superhero by hashtagging photos on Instagram. The best pics—get out those cat ears and polish your power poses!—will be aired during the live awards show.
Since 2009, Stamen's been working with MTV to bring social to the small screen with real-time Twitter visualizations. Working with Mass Relevance the heroes project takes this one step further: user photos featured on the site get classic comic book captions in keeping with each character, and you can comment and vote on Instagram for your favorites.
Stamen has been working with 3d data from HERE for a few months now, and it's time to start being public about that.
You can skip to the good stuff by heading over to http://here.stamen.com/ and explore for yourself, or take a look at what follows for some more details & rationale.
Here, a Nokia business, has spent decades building a deep library of map data, and we've been given a broad remit to investigate how designers and developers can use that data to innovate and explore an ecosystem built around the idea of 'living maps.' The idea is: take a look at the broad range of data that drives the HERE product portfolio, help to figure out the best ways to release the right bits of that data to developers so that a healthy ecosystem can flourish around it, and build prototype projects on top of that platform to light the way.
As you can imagine, HERE has all kinds of data, from driving directions to base cartography to extensive LIDAR surveys of worldwide cities. We've looked under the hood at a variety of these, and evaluated them on several different axes: complexity, comprehensiveness, uniqueness, and accessibility. We tried to find, for the initial release of this work, a sweet spot where we could find (as we do) the next most obvious thing—a dataset that was right on the edge of being useful and interesting to a broader public, one that hadn't been widely used before, and that was accessible to us as new HERE partners. We wanted to be professional amateurs here; coming in from the point of view of a newbie developer without a lot of experience navigating corporate hierarchies who just wanted to make something cool without getting lost in this wealth of data, and see where we could end up.
It's taken us a little while, and we've had a number of false starts (we're talking about a lot of data here), but! I think we've found something lovely and potentially quite interesting in the data that's being used to run HERE Maps, which launched late last year. Here.com is an impressive accomplishment—full on 3d maps of multiple cities around the world, beautifully rendered and browsable everywhere—but as lovely as it is, developers and designers have yet to really take advantage of what's possible with all this content.
The exercise started with some code that our friend and former colleague Mike Migurski started playing with about a year ago to extract HERE data from their 3D tiles. Along the way several people at Stamen weaponized that code, HERE made their data available for us to play with, and we used it to build out maps of four global cities: San Francisco, New York, London and Berlin. We built a framework sitting on top of that that lets this data be embedded, linked to, layered on top of, and generally made internet-happy in a way that we hope will let a thousand flowers bloom.
For your viewing, embedding, linking, and otherwise internet-ing pleasure: http://here.stamen.com/ is live today. It uses 3D data from HERE for San Francisco, New York, London, and Berlin to create city-wide 3D browsable maps, and it does this in the browser (though you'll need a WebGL-enabled browser to see it). As in many of our other mapping projects, the urls change dynamically depending on location and other factors, and the data conforms, more or less, to the Tile Map Service specification.
What this means, among other things, is that it's not only possible to link to and embed these maps at specific locations and zoom levels, but that it's easy—and as we've seen with Citytracking, easy is good.
In the meantime we're starting on a round of design work that uses these in-browser 3D maps as the basis for what we hope will be a whole new suite of consumer applications and projects. For now we encourage you to poke around under the hood and think about doing the same.
One caveat: early days! In keeping with the philosophy that it's better to release early and release often than to wait until everything is perfect. It's a prototype, not a final release, so it's not entirely production-ready and may have some rough edges. Please send us feedback and we'll keep you posted as we kick things further down the road.
Starting with New York, because its downtown, from this perspective, looks like something out of Game of Thrones, which is awesome:
And! Once you've got this set up, flipping this one-line code switch in three.js:
changes the material that covers each object and gets you a ghostly see-through wire model of New York (focused here on the New York Public Library's main branch at Bryant Park, made entirely out of the edges of things:
Moving to our home town of San Francisco, we can pivot the Golden Gate Bridge around and give it a good look:
It's also fairly straightforward to bring other, publicly-available datasets into this environment and do things with them (this will come up again!). For example, pulling in the building footprints that the City of San Francisco makes public, showing only the outlines, and coloring them by height, gets you this business:
And! Since the data now uses the same syntax as the rest of the internet, it's possible to bring map data in from other services as well. Here we've got tiles from our watercolor maps project, draped over the 3d buildings model (savvy mapping nerd types will notice that both URLs end in #17/37.79560/-122.40091, which makes this possible and is in some ways the whole point of the exercise:
Again: rough! you can see some seams! but progress, and an object to think with.
In a spirit of play, we've left things a bit rough and funky around the edges, so that when you get too close to the Fernsehturm, things get a bit awkward:
(first person to post a picture of Sutro Tower from the inside gets a prize)
And Mehringplatz is just lovely:
By the time we get to London, this is pretty much just Mike Tahani showing off. The London Eye stands out nicely in wireframe:
Parliament looms over the Thames:
Tower Bridge rising up out of a faceted wire-Thames:
And Hyde Park has a kind of video game look about it because of the forced parallax that spreads the trees out around the edges:
OK. More cities, datasets and examples to come as they're available, but this for now: go play!
As I've done before once or twice, I got excited enough talking about the projects we've been working on that I ran a bit over during my talk today and didn't get to the questions I wanted to ask the lovely audience at Webstock to help me answer. Suddenly there was a "0 minutes left" sign (woulda been nice if that were bigger and brighter, you guys), and boom! tIme to turn it over to Robin Sloan who said about the Big Black Mariah what I've had in mind for some time, of course much better than I ever could.
As I said, I've done this once or twice before, but these questions are important enough to me that I'd like to get them out in public so I take them seriously. So—bearing in mind that this was intended to be narrated by me, is super-early in their cogitation and public discussion—here's the question part of my talk in pdf format. For those not in a downloading mood, here are the basic questions, & some screenshots.
1. how things look: now & then
Mapping and data visualization today look a certain way. They look, in some ways, like early photography used to look, and here's why:
- Both are all about the tech; you ve to be a nerd to do it
- There's lots of talk around about what it is and what it isn’t
- There's lots of talk about what it’s “really for”
Let's get specific: Twitter visualizations, pretty soon, are going to look as archaic as this picture of me in jail in 1895:
There's also Louis Kahn that I want to finally think about in public. "You say to brick: 'what do you want, brick?' And brick says to you: 'I like an arch.' And if you say to brick: 'look, arches are expensive, and I could use a concrete lintel over you - what do you think of that, brick?' Brick says: 'I like an arch.' " There's something here about digital media, especially as we get a better sense for what the form of the medium is like, moving out of the early days of photography/data.
So my question for this one is: Where else can this analogy go? I think Robin Sloan probably has a stack of answers and I hope we get to talk.
2. why do they things look the way they look: whose hands build them?
- National Geographic maps: they look as if they were made by hand, and they are.
- The DesignersRepublic: their stuff looks like it was made by computers, but isn't
- Google Maps: looks as if it were done by a machine, but it isn’t.
- Apple Maps: looks as if it were done by a machine, and was!
- Watecolor Maps: looks as if it were done by a person, but isn’t
So my question for this one is: if our most salient work is made by hand with robots, what else is like that? What else will be?
3. what magic - literal magic - happens when you leave the cameras on?
In 2008 google maps revealed that all the cows face north. this had never been known before! It was because google left the cameras on and made them all available.
http:/kepler.nasa.gov does this with the night sky: leaves the lens on, discovers planets. My question here is: what else gets captured when the camera gets left on? what else can we learn?
4. delight & utility: gardens, farms, beer
Beer comes before agriculture. Gardens too. There are too many generational steps involved between grasses in their natural form and wheat worth harvesting for agriculture to be the thing people were shooting for when they domesticated plants. Drugs and beer and pretty flowers, on the other hand, can be made from a single generation of garden from wildflowers.
We talk all the time about data visualizations and maps that are useful. We don't talk at all about data visualizations and maps that delight you and make you laugh. We should
For this one, I don't have a question so much as I want to say this in public: delight precedes utility. Cool is necessary before useful comes along.
I know it's raw, but people asked. If you're in a talking mood, you can find me on twitter and people are tagging their responses with #webstock. OK!
All right! It's 2013 & I have all kinds of new business to report.
Back in 2002, when I was first getting serious about Stamen, I got my first real gig: my friend Dane Howard (formerly of Quokka Sports) connected me with some friends of his at DesignworksUSA, who were looking for a way to visually describe the process by which design decisions got made at BMW, and build a system to manage how they communicated this to the board. I flew down to Thousand Oaks and somehow managed to convince DesignWorks that I was their huckleberry. Having some Flash experience, but also having no idea how to actually build the server side of such a thing, I turned to another friend, Darren David, for help. He recommended another friend and colleague, Mike Migurski, as the backend coder for the project. He started coming by my studio after his day job was done, and after a pretty short while we were off to the races, working on projects over the years from admin interfaces for BMW to early mappings of Flickr imagery to Google News visualizations to maps of crime in the Bay Area. Today we're making public that he's moving on from Stamen, on the very best of terms.
Would you hire this guy? I would (photo from 2003).
I learned some valuable lessons from the experience. The first was: get the job first, and figure the rest out later. If you think too hard, it'll pass you by. The most important thing—the most important thing—is to have the paid work that will keep things moving. If you don't have that, it's all about talking and worrying and managing unknown risks; it's vital for skin to be in the game. The second was: trust your first instinct, go for it, and don't worry too much. After a month or of working together in a heady cocktail of cigarette smoke and techno music, I gave Mike a desk and a key to my studio well before we'd sorted out any of the details of how we'd work together, because I knew he was good people and we'd figure it out as we went. Eventually he came on as a collaborator and a partner, and the rest is history.
Mike has since emerged as a vibrant and talented spokesman for our community (I encourage you to keep up with what he does next at mike.teczno.com; I certainly will), one of the foremost practitioners of open source tools in the service of making data more public that you'll find anywhere. It's been an incredible nine years of intense collaborative partnership—the most important of my professional life, and one I feel privileged to have been a part of. We've had quite a run, and all of this is very bittersweet: I wish him the best, I know he'll continue to do great things post-Stamen, I'll miss him, and that's the truth, Jack.
Mike and I at the Digg V3 launch party in 2006.
2012 - this is why we could never agree on Stamen schwag
Welcome, new friends:
I also have some new Stamens to introduce to you, as part of the forwardsy-rolling epic adventure, Stamen and otherwise, that 2013 is already shaping up to be. It's new days around here, and I'm super excited to be able to tell you that Seth Fitzsimmons has come on as our new Director of Technology. A devotee of the Church of Allspaw (it's weird, considering how often I've heard that term, that there's so little on Google about it), he brings a focus on instrumentation and transparency to backend systems that I think is genuinely going to transform the kind of work that Stamen does from this point forward. We worked closely with him on a project for Oprah Winfrey last year and I'm really looking forward to the results of this new phase in our collaboration.
In another—is it OK to call this a coup?—Mike Tahani has joined us as a hybrid designer/technologist of the type that we seem to specialize in attracting to our practice. Stamen alum Sha Hwang first called Mike to my attention last year with his work on datahacker.tumblr.com/ - it was pretty obvious to me on first viewing (his cabspotting riff are wierd and beautiful) that this was someone I wanted to keep close so I could learn from what he was up to. We've had a great couple of months working on different projects, and I'm glad he's decided to come on board for reals.
We've also decided to take the plunge into some new territory for Stamen, one I've been interested in for some time now: Beth Schechter has agreed to come on to run Client Relations for the studio. As we've grown and the space of opportunity has expanded for us, I've increasingly found myself in a position where responding to new potential clients, and managing relationships with current clients, is harder to get to than I'd like. It's the lifeblood of what we do, and it needs someone to pay attention to it full time. Mike Montiero of Mule Design (who I asked for help with this—he knows his stuff) recommended we bring in someone to lovingly tend to this part of our business, and so: entre Beth Schechter, whose credentials include working the always-excellent Burning Man project, mapping work with Food Are Here, and managing projects for Stamen friend Zachary Coffin.
Ok, let's go!
Friends of the internet!
In a few days the International Telecommunication Union, a UN body made up of governments around the world, will be meeting in Qatar to re-negotiate International Telecommunications Regulations. These meetings will be held in private and behind closed doors, which many feel runs counter to the open nature of the internet. In response to this, Google is asking people to add their voice in favor of a free and open internet. Those voices are being displayed, in as close to real time as we can manage, on an interactive map of the world, designed and built by Enso, Blue State Digital, and us!
Adding your voice is pretty straightforward: the map will ask you where you are, and if it can find your location, it'll drop a circle for you right there. I'm in Lynchburg VA today, so I've added my voice from here:
Once you've added your voice, you can share it—on Facebook, Twitter & Pinterest (which it looks like lots of people already are doing):
The map has also been localized into 23(!) languages, reflecting the world-wide nature of the campaign. So it looks right in Korean, when and where it needs to:
When I sat down to write this the count was 1,230,766; as I look at it now the count has reached up to 1,305,467 and shows no sign of slowing down, so: thanks Google (it's nice to be linked to from the front page of google.com), and: hooray internet!
I went to my first Open Street Map conference recently—State of the Map US, in Portland. Stamen was one of the conference sponsors, along with MapBox, and ESRI and TeleNav, among others, and it's great to see and be part of the different industries come together to support this effort. I went with Mike and Nathaniel, who are more directly involved with this community than I get to be, and those guys also stuck around in Portland for North American Cartographic Information Society annual meeting the following week.
Open Street Map is getting super interesting, with more and more companies and people signing on to use and contribute to the service. Carl Franzen wrote a three-piece article on the conference, starting with"The New Cartographers: OpenStreetMap’s World Takeover," and it was great for me to see the different forces at work in the OSM community up close and personal:
"Nevermind Apple’s maps misfire, the free, volunteer-made OpenStreetMap, may end up reigning supreme anyway, as companies increasingly choose it for map data over Google. But as the project grows, it’s becoming harder and harder for its members to agree on what direction to go in next.
OpenStreetMap, a free crowdsourced online world map started eight years ago, has seen its ranks swell to over 800,000 volunteer mapmakers around the world — 300,000 in the last year alone — rapidly becoming the go-to source of map data for successful tech brands including Apple, Foursquare and Wikipedia, as well as for government agencies like the National Parks Service, all of whom are wary of Google’s decision to begin charging for heavy use of its Maps API starting in January 2012.
But as the project grows and matures, it’s facing a whole new set of challenges, the biggest of which is the question of whether or not to commercialize and move away from its open source roots.
The tensions facing the community were on full display at OpenStreetMap’s annual “State of the Map USA” conference in Portland, Oregon from October 13 through 14, a frenzied, jam-packed series of over 50 presentations and countless other informal talks between avid geographers and programmers who sprawled over a few generally overcrowded rooms at the Oregon Convention Center, fueled by coffee (beer at night) and their boundless enthusiasm for using and improving the vast and increasingly vital public map."
It's a robust (and growing) community, as you can see here (in more ways than one - look closely and you'll see my son on my lap among the babies in attendance):
Photo by Justin Miller on Flickr
Nikki was a hit too with her watercolor stockings and blankets (coming soon!) based on Open Street Map data and meshu necklaces. A big year for custom objects based on open data!
Photo by Justin Miller on Flickr
Mike and Nathaniel took the stage to demonstrate some forthcoming client work we're doing, extending the currently US-only terrain maps from maps.stamen.com to cover the whole world:
And Nathaniel took some time to do a Hangout with James Fee, talking about the San Francisco Giants (w00t!), Stamen, Natural Earth, SOTMUS and NACIS.
Following up on last month's map of the world's friendships on Facebook, we've released another visualization of relationships across social networks today. Called "Photo-sharing Explosions," these visualizations look at the different ways that photos shared on George Takei's Facebook page go viral once he's posted them.
Each visualization is made up of a series of branches, starting from George. As each branch grows, re-shares split off onto their own arcs. Sometimes, these re-shares spawn a new generation of re-shares, and sometimes they explode in short-lived bursts of activity. The two different colors show gender, and each successive generation becomes lighter as time goes by. And the curves are just for snazz.
The visualizations are live at facebookstories.com.