Collecting Data from Non-Mapmakers

A few months back, we partnered with the UW Cart Lab to build a map for the University of Wisconsin Arboretum. We wanted to create a map that was populated with content generated by users and experts, built on top of free existing web-services, easy to maintain and great-looking. The map itself is relatively accessible so I’ll let you explore it on your own, however, I did want to talk a little bit about a major piece of functionality that is completely transparent to the end-user. First, a little background…

The University of Wisconsin Arboretum is easily the fourth best thing about living in Madison, WI after the Memorial Union Terrace, The Farmer’s Market, and being able to bike to anywhere (coming in fifth: that bonkers taxidermy museum). It’s a relatively vast piece of natural land on the near-West side of town. In just a 5-minute bike ride from downtown, you can feel like you are in the middle of the wilderness. Residents and researchers alike use the Arboretum for everything from running and biking to invasive species research, from snow-shoeing and hiking to painting and nature writing. This piece of land is very meaningful in many different ways to many different people.

Credit: University of Wisconsin Arboretum

That diversity of experience was the main challenge we faced coming into this project. There were lots of voices that wanted to be heard and have their perspective on the Arboretum reflected on the map. How do we engage these researchers, volunteers and nature enthusiasts without having to train each of them on the minutiae of collecting and preparing geographic data?

After looking around for a service that was already doing something similar, we landed on Google My Maps (since it was Google, we didn’t have to look very far). We had already planned on using Flickr to allow users to place their own photos on the map so this didn’t seem like to far of a conceptual jump. My Maps is a simple way for users to edit maps, adding vector points, lines and polygons just by drawing on a Google Map. Best of all, it outputs to KML, the format of the data already included in the map.

After adding their feature and attribute data to My Maps, all the user would need to do is send the URL of the KML file to the map administrator and it would be added to the map. Done? Nope. This is where things get cool.

While the input methods for Google My Maps are fantastically easy and well done, the symbology needed some work to fit in with our map. We didn’t want to have to sacrifice our cartography just for ease of input. We wanted to have full control over the colors and the point icons used by this incoming data.

Changing point styles is relatively simple. We built the map to use a lengthy XML file that the map administrator at the Arboretum uses to configure the map. Through this file, the administrator has a large amount of control over the data included in the map and can change it to instantly meet the Arboretum’s needs. It allows the admin to specify:

  1. The location and title of each layer
  2. Where the layers appear within the categories of the map
  3. What control users have over the layers (which show up in the legend, which start visible, which remain on)
  4. The available basemaps for each category
  5. All text content in the map
  6. If a layer’s feature contains photos or a slideshow
  7. Which layers are grouped into map animations and their corresponding date

The last thing the admin can do, is override the default point style by defining the URL to a PNG stored on the server. This icon will replace the default Google pushpin. We’ve designed a few of the default icons currently shown but with a little Photoshop work, any image can be used as a point symbol.

arbMap_icons.jpg 1150×900 pixels

Changing the stroke and fill color of a line or area symbol was a little trickier. Google offers a choice of 70 different colors for use on My Maps. Not every single one of those colors is going to look good on our basemaps, displayed with the other layers. To solve this, we created a color compatibility chart. Every single color on the Google My Maps selection corresponds to a color deemed compatible with our map. When a My Maps KML is loaded into the map, it automatically adjusts the colors based on the chart below. It is not a 1:1 relationship, as we’ve had to limit our palette to less than 70 colors. However, it gives the user the expected control over color and makes the finished product more visually pleasing.



This solution is not 100% perfect and there were some sacrifices that had to be made to get this compatibility. Firstly, the data-model we used for each feature was limited. Google allows just one name and one description per feature. This eliminated the possibility of doing quantitative mapping and classification on the fly. (For data created outside of Google My Maps, we enabled categorical mapping using standard KML styles and including the name of the category as the name of the style).

Secondly, KML is not known for its friendly file sizes and the data used in this map is HUGE. We’ve tried to optimize it as much as possible but have resorted to inserting loading screens with informational content about the Arboretum to make those download times seem much shorter.

Hopefully this gives you a clear picture of what’s going on behind the scenes of the Arboretum map. The flexibility we’ve given to the map administrator to configure the map as well as the power we’ve given to the stakeholders to add their own data was new for us at the time, but is something we’ve continued to add to our more recent projects, albeit to a lesser degree. The UW Arboretum map still feels young and in its infancy. The map is a “living document” of the UW Arboretum. As more Arboretum volunteers and researchers get involved and add their considerable expertise to the map, we’re looking forward to watching it grow and change in the future.

San Francisco Typographic Map

HOORAY! The San Francisco typographic map is finally finished and is ready for purchase today. I made a big push to get this map ready for the holidays (with some help from Andy and Ben) and we’re really happy with the way this turned out. More images.

I went a bit overboard and decided to map the *entire* city; The amount of fine detail in this map is pretty astonishing. To fit the entire city onto a poster, of course, means the type itself has to be much smaller to fit it all in. In fact, the street text is half the size of the Chicago map (6 pt surface streets versus 12 pt) so there’s lots of detail for your eyes to enjoy.

GO BIG: Given the crazy density of streets I strongly recommend you get one in poster size (23×34 or up) so you can best see all of the parks, water features, and twisty streets the city is famous for.

WHAT’S THIS ABOUT LETTERPRESS?! Great news, we’ll be offering limited edition, gorgeous letterpress prints on rich cotton paper in the first half of 2011. While we love Zazzle (their prints rock), many of you asked (and begged!) for us to do these as hand-made, limited edition art prints and we thought that was a great idea. Want to be the first to know when they go on sale? Go here.

WHAT’S NEXT? We have New York City (Andy) and Washington DC (Ben) coming up shortly. They look sweet.

Death’s Door Spirits: Mapping Wisconsin’s Finest Craft Distillery

I only have a few rules in life. One of them is when the makers of this gin offer you a straight-up trade–bottles for maps–you take it… and you don’t cut your partners in on the deal. That was the situation when a friend-of-a-friend approached me to build this simple locator Google maps mashup which I took on as a side-project away from my normal Axis Maps work.


Death’s Door Spirits is a craft distillery based out of Washington Island, WI and distilled in Madison, WI. They use locally-sourced ingredients for their gin, vodka, and whisky which they distill in small batches. While their small-scale makes their products excellent, it also makes them tricky to locate. The purpose of the map is to simply show where you can buy bottles or cocktails containing their spirits.

Since the map was so straightforward, it gave me the opportunity to experiment with a few new technologies I’ve been meaning to check out. Here’s what I thought…

Death_s Door Spirits Locator

Styled Google Maps: Death’s Door has a fantastic graphic identity thanks to some great work by Grip Design (who also contributed some designs to this map). I wanted the map to fit in with their existing style while stripping out a lot of the extra Google Maps data that would clutter up a map like this. Google Maps Styled Map API allowed me to do both. The styled map wizard was helpful for sketching out styles but mostly I was making whole groups of features invisible and going with stock colors for the roads and water. Not being able to input RGB values for these styles made the process harder than it should have been.

Amazon SimpleDB / CloudFusion: I’ve been a big fan of Amazon’s SimpleDB technology since we used at as the foundation for indiemapper user management. I’ve found it to be more reliable than MySQL and faster as well (but that could just be our budget hosting plan). It was a little unapproachable to me at first but the CloudFusion PHP library made it as easy–if not easier–to query the database and parse the results for the map. The biggest missing feature here is a nice front-end browser like PHPMyAdmin which would have allowed the client to edit their data directly. Instead, I had to build some rudimentary tools so they could manage their data themselves.

Google Font Directory: It was nice to have access to a wider variety of fonts than just the standard web-safe font-family sets. The Google Font Directory gave me access to a limited but FREE selection of a nice variety of fonts distributed across Google’s massive network. Most useful was Yanone Kaffeesatz which is a dead ringer for the Death’s Door title font. The fonts can be a lot to load at runtime so it was important to pare down only to the fonts I was using in the map.

Death_s Door Spirits Locator-1

jQuery Ajax / jQueryUI: Made it incredibly easy for someone with my level of programming skill (let’s call it “recreational” to be polite) to efficiently get the data into the map and build some nice UI effects like animation and the accordion component. I can’t recommend it highly enough so there’s going to be no italics section with the caveats in it.

You can view the full map here …and if you’ve got any good cocktail recipes, that’s what the comments are for.

Death’s Door Spirits Locator

Typographic map posters

Today we’re pleased to show off a pet project that’s been occupying us off and on for nearly two years. After some emotional separation issues, we are declaring finished a few typographic map posters—one of Boston, and color and black and white flavors of Chicago. Everything in these maps is made of type.

Chicago typographic map

Chicago typographic map

Boston typographic map

These look good hanging on a wall, so of course prints are available. Check out the page we’ve set up with some more detailed images and links to get copies for yourself.

I began this project with the Boston map, thinking it would be fun to expand the style of my small party announcement map to a full city. The idea caught on here at Axis Maps and soon Mark and Ben had parallel effort underway for a map of Chicago, a city to which several Axis Mappers have some affinity. Ben took the lead on that map, and some twenty months later we both added our respective finishing touches and reluctantly let go.

There was nothing automated about making these maps, unless you count copying and pasting. Everything was laid out manually, from tracing streets over an OpenStreetMap image, to nudging curved water text, to selectively erasing text to create a woven street pattern. The Boston and Chicago maps differ in style, but the end result is similar: from a distance it can appear as an accurate reference map, and as you get closer you notice the thousands of words it comprises.

This has been a fun, if long, process, and we hope other people can enjoy these maps as much as we have. There are only two cities for now, but look for more in the future! Our list right now is San Francisco, New York (Manhattan), and Washington, D.C.

ColorBrewer 2.0 gets permalinks

Good news, we’ve improved the export options from ColorBrewer2.0. Starting today you’ll notice a new export option: permalink. This allows you to bookmark and share specific color schemes + number of classes without having to hunt around for them. For example, this will automatically open an 8-class red sequential scheme. Neat, huh?

If you have other ideas for ColorBrewer, drop us a note.

Map Evolution 2

Over the summer, a friend asked me to put together a map of Punta Gorda, a small coastal town in the country of Belize. He works for Hillside Health Care International, a non-profit organization providing medical care in that area. The map was needed to help orient and guide volunteer health care professionals visiting from the States while serving at the clinic. It was to be printed in color on a letter-sized page.

In talking with my friend, I knew right away that the biggest obstacle was going to be getting good local data for the map (and getting it for free, because there was no money set aside for the project). Most importantly, I needed data for local roads (locations and names) and point features (hotels, government buildings, grocery stores, banks, etc.), these being the two main pieces he wanted clinic volunteers to have at their disposal.

Of the big free mapping services, Google Maps had the most complete road network for the town, so it served as my starting point. I had hoped there might be a nice Open Street Map shapefile to work from, but this area is still mostly a blank slate:

View of Punta Gorda in Open Street Map

So, I decided the simplest and easiest approach to getting those roads on the map would be to trace them in Adobe Illustrator. That’s where the remainder of the map design work was planned, and there was no good reason to construct a spatial database or harness the powers of GIS for our purposes, let alone the time and money to do so. We knew this would limit what what could be done with the map in the future, but a simple map illustration existing wholly outside of a GIS served our immediate purposes on the cheap.

The point features were collected in the field by my friend, who personally biked the streets of Punta Gorda and used his local knowledge and that of others who live there to collect and verify the names and locations of streets and places. His work was all done by hand by annotating an early draft of the map. While he was collecting data, I finished the layout and styling. Then, with his annotations overlaid on my working version, I placed markers at each point of interest (red and blue shapes and National Park Service-style symbols), added labels, and created the index that sits in the lower right-hand corner of the map.

Throughout the production process I captured screen shots showing the evolution of the map. When it was finished I sequenced them together to form a simple movie, as I did for the evolution of a map of downtown Madison, WI. Each screen represents about 10-15 minutes of real production work. While this PDF shows the final state of the map, the Punta Gorda movie (see it bigger here) shows how I got there. As you’ll see, it generally involved the transformation of a satellite image into a map by way of a healthy dose of cartographic abstraction and symbolization.

indiemapper has arrived!

We are so pleased to accounce that has launched and is ready for everyone to start making beautiful maps right away. Sign-up for you 30-day free trial. Watch screencasts of what indiemapper can do for you. Once you sign-up, you can always browse our easy-to-follow tutorials and support site to get you started, or if you are like most of us, just dive in and have fun.


Happy map making!

Indiemapper Launches April 12th, 2010

After months and months of non-stop design and development, the release of indiemapper is imminent. We’re all palpably excited about this product and can’t wait to get it in everyone’s hands. Thanks to everyone who has provided their invaluable expertise and enthusiasm along the way.

We’ll be spending the next 12 days fine-tuning indiemapper for launch. You can head over to for full details. Also, be sure to follow @axismaps on twitter as we start to introduce you to all the new stuff we’ve been working on.

Without further delay, I’d like to present to you an introduction to indiemapper: