What: You’ll be making an interactive map of physician performance across New York. It’s a relatively small dataset covering 120 physician practices and 12 measures focusing on heart care. The map is in partnership with our friends and colleagues at IPRO and will be used to improve the quality of care in New York.
We want you to see the entire process of making a map so you will be responsible for this project from start to finish including:

1. Working with the client to learn about their data and functionality requirements
2. Preparing the data to go into the map
3. Designing the map and UI elements
4. Building the map in javascript
5. Testing the map

We’ll be supporting you every step of the way with project planning,  best practices, technical assistance, and design reviews.

When: 8 weeks starting June 17th

Who: We’re looking for anyone looking to sharpen their interactive cartography skills, however, students currently enrolled in undergraduate or graduate programs will be given preferential consideration. To get the most out of this experience you should:

1. Have experience working with all types of data (spatial, tabular, databases, etc.)
2. Be somewhat comfortable with map and UI design
3. Know the basics of building a map in javascript
4. Be willing to learn all the stuff you don’t know

Where: Wherever you want to be with a computer and internet connection. We all work remotely at Axis Maps and keep in constant contact through Campfire, our group chat system. You’ll be expected to keep semi-regular business hours logged in to Campfire. We’ll have scheduled weekly status meetings (via Skype) dedicated to your project and you’ll be expected to attend regular Axis status meetings as well.

How much: $3,500

To apply: Please send:

1. Cover letter
2. Resume / CV
3. Link to your online portfolio

to David Heyman at info@axismaps.com by May 6th.

Unlike our typical interactive mapping project, this one was rather small in scope. We wanted to make something that could come together quickly and easily and be seen before people stopped caring about the election. There was also no client, so we were free to work however we pleased in order to get done fast. In other words, no one was telling us that we had to make this work in IE7! All said and done, we devoted twenty-eight hours to the map before sharing it on Twitter.

Because the project was short and received a sustained, concentrated effort from each of us, a behind-the-scenes look at its development seems like it might be of interest to other mapmakers. If nothing else, it serves as an example of how three people, working in different parts of the world, interact together online to get work done. Something for the human geographers out there, at least, if not for the cartographers.

What follows is our Campfire transcript covering the duration of the project. Outside of this transcript, there was no video, voice or other written communication between us. The language here has been smoothed out and edited somewhat in order to reduce each thought, question, or decision to its essence, although there are some direct quotations thrown into the mix.

We think about every project, large or small, slow or fast, client or not, in terms of three primary components: data, design, and code. They are essential ingredients of web cartography and what any aspiring cartographer should learn. To that end, the transcript below has been tagged with colored dots that represent the predominant component in play at any given moment in time, plus a yellow dot for instances when our thoughts were mostly on project planning or management issues.

As you scan through, some patterns to note are:

1. Entries pertaining to all three components, as well as a basic project plan, are found in the first 30 minutes.
2. The number of entries about data start out heavy and all but disappear on Day 2.
3. Entries about code pick up steam toward the middle and end of the project.
4. Entries about design appear rather consistently throughout the project, with a run of back and forth data-design entries in the middle of Day 1 and a similar back and forth run of code-design entries at the end of Day 2. Interesting!

= Planning
= Data
= Design
= Code

Day 1 – November 7, 2012

8:15 AM		“Want to make a map?” -Dave
8:15 AM		“Maybe just this one last time. Then I’m retiring.” -Andy
8:20 AM		How about an election-by-demographics map using the value-by-alpha (VBA) technique?
8:25 AM		What’s the best technology setup for this? (Polymaps? CSS?).
8:25 AM		Let’s get started this way: Andy: prepare the data Dave: get interactive setup going Ben: put together an interface design
8:30 AM		I’m exploring election data from The Guardian in Excel.
9:05 AM		What kinds of demographic data would be worth mapping? Which are affected by geography?
9:05 AM		What kind of chart should accompany the map?
9:15 AM		Margin of victory versus demographic variable by county sounds like a decent chart.
9:25 AM		Here’s a Shapefile with geographic and election+demographic data.
9:25 AM		We need to share this file with the world.
9:25 AM		Let’s explore the Shapefile in indiemapper.
9:30 AM		We should wait and share this data once it’s all cleaned up.
9:40 AM		Here’s a second version of the Shapefile with our map data.
10:00 AM		What’s the best way to store the data? A series of JSON files?.
10:05 AM		What scale is appropriate for the county boundary data? Will we need to zoom in?
10:10 AM		There’s no need for detailed, large-scale county data.
10:10 AM		Let’s store data and geography separately.
10:10 AM		I’m preparing the data in Google Refine.
10:20 AM		Anyone have good red/blue color specs?
10:25 AM		Here are two 5-class sequential color schemes, one for red and one for blue.
10:30 AM		Looks like there are problems with this data.
		“It has Obama winning most of Wyoming handily.” -Andy
10:40 AM		“In Colorado, that’s showing the Constitution Party candidate!” -Andy
10:55 AM		I’m fighting with pivot tables in Excel. Trying to get sums into columns instead of grouped in rows.
11:00 AM		“Back in a moment… need to go do something to my car before it starts raining.” -Andy
11:45 AM		Here’s a third version of the Shapefile with our map data.
11:50 AM		Here’s a VBA map showing county margin of victory by population.
11:50 AM		Switch to black background.
11:55 AM		Let’s go with 2-class winners. It’s too hard to see both change in color and alpha.
12:05 PM		Here are new red and blue color specs.
12:10 PM		Here’s a new VBA map showing county winner (2-class) by population.
12:10 PM		“That’s looking pretty okay.” -Dave
12:10 PM		How is population classified? The map looks kinda bright, making it hard to see population differences.
12:10 PM		Should we go with equal-interval or unclassed population instead of quantiles?
12:20 PM		“Argh, this stupid data. Chicago is red!” -Andy
12:25 PM		For unclassed data, opacity should be a percentage of the max, right?
12:25 PM		“Los Angeles is ruining it for everybody.” -Dave
12:30 PM		How about capping the population values at a certain threshold?
12:50 PM		Here’s a new VBA map showing winner by population, capped at the 90th percentile.
12:55 PM		What about going with population density instead, in order to control for county size?
12:55 PM		Here’s a new VBA map showing winner by population density.
1:20 PM		Here’s the fourth version of a Shapefile with our map data.
		“Gave up on Excel, used a Python. Er, Python, not a Python. No snakes involved.” -Andy
1:25 PM		The user interface mockups are done.
2:00 PM		Maybe we ought to go with D3 so we can use a map projection.
2:05 PM		Does using VBA even make sense for mapping demographic variables? What if there is no real correlation between the demographic variable and county winner? VBA might be best for things that are magnitudes or certainty.
2:15 PM		It’s worth a try. In the end, it’s just a bivariate color scheme.
2:25 PM		Here’s the final version of the Shapefile with our map data.
2:25 PM		Let’s tweet that data.
2:25 PM		I’m still not sure if population or population density makes more sense here. If we think of VBA as a cartogram, shouldn’t we just map totals?
3:05 PM		Does this map need a legend?
3:10 PM		How should we proceed, now that we’ve got data and an interface design?
3:15 PM		What exactly are we trying to make here? A static map viewer? A basic interactive map with data probe and linked chart?
3:20 PM		If it’s a static map viewer, how about using indiemapper + SVG?
3:25 PM		There are problems getting a good data probe and chart that way, plus the SVG is too huge.
3:30 PM		D3 and JSON is sounding like the best approach.
3:45 PM		The D3 shell is made.
		“It was an election day sweep for President Robert Smith of the Goth Party.” -Dave
4:10 PM		Here’s what it looks like with colored data.
4:20 PM		The JSON files are ready.
4:30 PM		Let’s divide up the remaining work (data probe, data loading, chart, and ui).
4:40 PM		Let’s put the project data on SVN so it’s easier to work together.
4:55 PM		Any other interesting demographic variables we should be mapping?
5:15 PM		Here is poverty:
5:30 PM		Here is uninsured:
6:10 PM		Data loading is complete for five demographic variables (birth rate, medicare, poverty, uninsured, wealthy, and non-white).
9:05 PM		We should go back to quantiles for the demographic data so the maps look balanced with respect to alpha.
9:10 PM		We probably need non-linear alpha steps to make them look right. Differences should be optical, not mathematical.
9:40 PM		Can we get data indexed by FIPS code in those JSON files?

Day 2 – November 8, 2012

8:30 AM		Yeah, let’s do 10-class quantiles for the demographic variables.
8:45 AM		Get rid of Alaska and Hawaii. There’s no data for those in the source.
8:50 AM		The 10-class quantile maps are online.
8:50 AM		They still look too bright overall.
8:55 AM		Let’s problem solve any data issues. Class breaks and data distribution look okay, at least.
9:05 AM		Let’s try that non-linear alpha scale to even these out visually.
9:10 AM		“That’s hella-nicer.” -Dave
9:15 AM		What kind of instructions will people need to understand these maps? E.g., Brightness is NOT margin of victory.
9:25 AM		A basic chart is working.
9:25 AM		How can we easily link the map and chart on mouseover?
9:30 AM		Try looping through counties to find matches.
9:30 AM		Here’s a new, cleaner, down-pointing triangle PNG for the user interface.
9:30 AM		How’s that chart looking?
9:35 AM		Are the fonts in the mockup on TypeKit?
9:40 AM		Yep, that’s Ubuntu Regular and Condensed.
9:55 AM		We need a red and blue PNG for the bars in the chart.
10:10 AM		The new fonts are in.
10:25 AM		We need a better way to do the x-axis labels on the chart. They get buried and probably aren’t very clear.
10:25 AM		Let’s drop in an Axis Maps Logo.
10:30 AM		Does the page feel too tall? Can we fix that without shrinking the map?
10:40 AM		Here’s a mockup showing new chart labels.
10:55 AM		Implemented the new chart label design.
11:00 AM		Let’s put in an active state for the selected variable text in the UI.
11:05 AM		Implemented the new active state.
11:05 AM		There’s a problem with positioning the divider in the new chart labels design. How about a text pipe instead?
11:15 AM		Implemented chart label tweak.
11:20 AM		Horizontal page scrolling won’t go away.
11:25 AM		The scrolling problem is fixed.
11:25 AM		Let’s give the map a final look over.
11:30 AM		Let’s stick in a new map title and add some instructions for users.
11:30 AM		Dang. The page gets cut-off in Firefox.
11:45 AM		The FF page problem is fixed.
11:50 AM		Dang. The chart isn’t showing up in Safari.
12:05 PM		The Safari chart problem is fixed.
12:10 PM		Let’s tweet this map to the world!

After manually replicating the data from the map, I put together some quick maps of a few value-by-alpha maps (here’s a stellar though academic introduction from its inventors) using indiemapper. VBA maps were originally conceived to visualize election results by visually-weighting (using alpha) red / blue colored counties by their relative populations. The end result gives you an overall sense of the election by making those counties which contributed more to the result (because of their higher population) more visually prominent.

These maps use the same technique except now alpha is controlled by storm impact. Areas with a higher level of impact are more visually prominent that areas of less impact. These maps hopefully quickly give you an understanding of the population affected by the storm. While I’m sure this was the intention of the ESRI map, because of some misplaced interactivity trumping thoughtful cartography, it can’t say the same.

Median Income

Black Population

Percent Residents on Medicare

Percent Uninsured

Unemployment Rate

Sometime around 2006, when everyone and their grandma started cranking out terrible Google Maps mashups, the Cartography world soiled its collective underpants as it looked like the once specialized profession was about to become obsolete. Fear was channeled into outrage at the whole idea of the “democratization of cartography” because it facilitated—encouraged, perhaps—the production of bad maps that ignored everything Cartographers had learned and taught over the years. In other words, “they took our jobs!”

Eventually we all calmed down when we saw that people still appreciated good cartography and there was still a place in the world for us—probably even more room for us than before. Then the tools improved by leaps and bounds, to the point now where it’s possible to use them for good web cartography and it’s easy to make maps beautiful. But it might be time to get uppity again.

There is a potential problem in that last thing: beautiful maps. These are prized an awful lot these days, and I’m worried that it’s distracting everyone from the real essence of cartography and the problems that needed or still need to be solved. There seems to be an idea floating around that Cartography is now winning the War on Bad Maps because we’ve defeated Ugliness. TileMill hype is an easy thing to point to here: consider MapBox’s repeated use of the word “beautiful”; or Brian Timoney’s recent, justified praise of the accessibility and openness of TileMill’s newest capabilities, unfortunately framed in the familiar GIS versus Cartography divide that treats the latter as little more than cosmetic surgery, aesthetic touches separable from the rest of the mapping process. Meanwhile with some regularity a web map project seems to find the ultimate “success” of ending up in an art exhibition or winning the Purtiest Map Evar Award.

It all brings into question what Cartography really is (and isn’t) or needs to be in the modern web mapping world, something I’ve been pondering a lot over the past year. (Big-C “Cartography” is used here to mean the the specific profession, theories, and body of knowledge, not simply the making of any maps.) Yes, a good cartographer has graphic design skills and an eye for beauty, but as a discipline and profession it is not about aesthetics.

Beauty is unquestionably important in cartography. It’s what turns functional maps into good maps and good maps into great maps. And we don’t need to be above putting form over function sometimes. Eye candy sells, and sometimes grabbing attention or being just plain artsy is whole the point of a map. The number of beautiful maps floating around lately, the public appreciation of them, and the proliferation of tools that make them possible are all very pleasing developments. We shouldn’t mistake aesthetics for Cartography itself, though. Cartographic expertise is, in essence, knowing the right way to represent geographic phenomena and data for analytical or various other purposes, and understanding of all stages of the mapping process, not simply knowing how to swoop in at the end and make a map pretty. Sure, we can make every map delicious by wrapping it in metaphorical (or real?) bacon, but it won’t be good for you.*

It’s so much easier to see the aesthetic side of maps than all the informed decisions behind them, and now that it no longer takes specialists to use the production tools and code, aesthetics start to look like the only area where specialized Cartography comes in. We don’t talk about the real Cartography enough for it to be chracterized otherwise. For every blog post or tweet you see about the newest cool graphical capability of Mapnik or d3 or anything else, how many do you see giving advice on when to use it?

Just as we always associated ArcMap with “ugly” and Illustrator with “pretty,” aesthetics continue to be tied to specific tools, and GIS and cartography people still let themselves be defined by the tools they use despite the trends away from reliance on a single piece of software. As usual we have the problem of knowing tools versus knowing concepts. It’s vital to know tools and understand how they work, of course, but in the end they’re only as useful as the operator’s knowledge of cartographic concepts. Today’s tools are new, but a lot of the amazing new capabilities we’re seeing are not new at all; they’re just better implementations. They lower a lot of barriers and have big impacts, sure, but tools are still only tools. BYOCartography.

(When it’s not aesthetics or tools, by the way, it’s the idea that map = data. You can see this in the Apple Maps uproar. But that’s a different kettle of fish for another day.)

I don’t want Cartography to be reduced to mastery of pulling levers to make pretty things. Not because I fear for my career—I can pull levers with the best of them—but rather because it limits the gains in the quality of web mapping. You don’t need to have an advanced degree in Cartography or be an old-school Cartographer to make good maps, but you do need to take the time to understand the when and why of mapping techniques, not just the how.

The traditional Cartographic solution to this kind of problem is to complain and criticize, but we need to point out what’s right more than what’s wrong. (Yeah, yeah, irony here. But think of this post as more of a lament than criticism.) After all, it’s not that bad things are happening—quite the opposite—it’s just that a lot of good things remain invisible and left out of the conversation. So next time you make a killer map, don’t just talk about how you did it; talk also about why you made the design choices you did. Let’s make it understood that there is more to Cartography than aesthetic sensibilities and technical skill, and encourage all mapmakers to be true Cartographers.

^{* You’ll have a cart attack. Ha!}

“I’m looking to expand my skills to make interactive maps. What do I need to know to become an interactive cartographer?”

Because our industry is evolving at such breakneck speeds, the required skill sets are constantly changing. Flash actionscript code has been replaced by Javascript and HTML5. Basemap cartography is endlessly tweaked as Mapnik XML instead of Illustrator layers. We can easily build and support our own tile servers. It’s exciting change and it allows us to do more with our maps faster and cheaper.

Unfortunately, if you’re trying to break into interactive cartography and haven’t been involved with its evolution on a daily basis, it can be very tough to know where to begin. It’s no longer as easy as “learn ArcView if you want to be a GIS Tech, or Illustrator if you want to be a cartographer.”

However, while the tools may be changing month-by-month, there have been three broad areas of core competency for all interactive cartographers that have been consistent throughout:

1. You need to be able to find, manipulate, and store spatial and non-spatial data.
2. You need to be able to design a functional and attractive cartographic representation of that data as well as the UI controls to operate it
3. You need to be able to implement that design through code

Working with data is probably the most underestimated part of a cartographer’s job. The steps required to go from source to ready-to-map are different for every dataset, but there are some general tasks you’ll come across at some point. You’ll need to be able to find data, navigating though state GIS websites designed in the 1970′s for administrative boundaries or combing though big data repositories (US Census, World Bank) for a single supplementary attribute. Once you find your data, you’ll need to be able to manipulate it to work with the other datasets required for your map. This is where you’ll put that GIS education to good use but more often than not you’ll find yourself trying to remember how Excel Pivot Tables work. With the data ready to be mapped, you’ll need to decide how to store it and how your map will retrieve it. Simple data can be stored in a text file like CSV (that you’re probably already comfortable with) but more complex data will often require a database. It’s really helpful to know a bit about data structures, and feel comfortable enough with a server to do some basic installation and maintenance.

Design for an interactive map comes in two separate but highly connected pieces. Cartographic design involves designing the “map” part of the map. Most of the design decisions you’ll make during this phase of design are no different than if you were doing cartographic design for a paper map. Is this the right thematic representation of this data? Does my visual hierarchy clearly communicate the message of this map? Is my basemap garish and stupid, drawing attention away from the point I’m trying to make? You’ll also need to design the UI controls to operate the map. This is a much harder skill to cultivate and is most likely something you haven’t been exposed to in your GIS / cartography curriculum. The best way to get to be a better designer is to look critically at lots and lots of web maps. Compartmentalize their interface components and decide for yourself what works on them. Steal the stuff that works and think about how the stuff that doesn’t could be improved. Learn how to quickly make UI mock-ups and wireframes of your map. Iterate over your designs before you build them, using that critical eye you’ve developed critiquing other people’s work on your own. Repeat for 2 weeks or so and then put it down because it’s probably good enough.

Andy said this best:

“Our coding process goes something like this. 1) Load the data. 2) Make things work. 3) Make things pretty. Like I mentioned before, having everything designed ahead of time is vital. We can start with something rough but functional without worrying about design, because we already know how it will look and behave in the end. It also lets us know when we’re finished; interactive projects have a way of never ending if there are no clear goals at the outset.

“After hearing from enough of my cartography peers whose hatred of programming burns with the fire of a thousand suns, I must say this: yes, coding sucks. I write code all the time, and it often makes me want to punch the computer in the face. But it’s worth it. Totally worth it. It only takes a little skill to produce awesome things. A willingness to write some code opens a lot of doors, and it doesn’t require devoting a lifetime to becoming a master programmer. It doesn’t even require being a good programmer.”

If you’re an absolute beginner this is a great place to learn the basics. Then, choose a mapping library that you like (they’re all good) that will do what you need it to do and run through the basic tutorial (usually gets you a basic map on a blank page). Once you’ve got that down, all you have to do is start putting in the hours at the keyboard.

Axis Maps has always been a small company with a very strong DIY ethos (just ask Ben who can now add “shipping tycoon” to his CV). My favorite part of working on projects here is we’re constantly learning how to solve the hundreds of problems that come up through the course of any project. You’ll never know how to do it all yourself but if you give yourself a good foundation in the basic concepts, you can start making maps and learning as you go like the rest of us.

London

Our maps have ventured outside the US for the first time, to everyone’s favo(u)rite summer 2012 city. With that, we’ve launched a UK store for orders (pre-orders for the moment) there and internationally at store.axismaps.co.uk. The map is also available on the American side of the pond, of course.

Philadelphia

Or celebrate American independence from London in the Cradle of Liberty. We’ve got Philly’s astoundingly dense network of streets and, of course, a nod to Rocky.

Seattle

Grab your coffee and your 90s grunge music and head to the west coast. This watery Seattle map will show you where to hang out.

Minneapolis

In the summer, enjoy the parks and lakes in this city on the upper reaches of the Mississippi River. In the harsh Minnesotan winter, wrap yourself in this map for warmth.

More maps are coming soon. Stay tuned!

We first built the Why Not The Best map in Flash about two years ago, using the Flex-based indiemapper framework we had developed for ourselves. Flash was a good solution the time, as this was a relatively simple vector thematic map. However, the map’s functionality and features later grew to the point where it incorporated multiple shapefiles, several layout modes, and embedded Google Maps—resulting in a very complex project and a large SWF for users to load. At the same time, non-Flash web mapping technology was improving rapidly, opening new doors for building this kind of map. As such we again worked with IPRO and completely rebuilt the map in HTML 5 and JavaScript.

We’ve learned a few things from this and similar projects and thought we’d share some experiences from this map, in case other folks just getting into this kind of work can benefit from the same tricks.

Leaflet

The web mapping library I’ve settled on as my choice lately is Leaflet, which is developed by CloudMade. Leaflet offers “slippy map” and overlay basics but also a lot of opporunity for easy custom extensions. While there is little built-in support for thematic cartography like choropleth maps (although the very recent release makes more strides in this direction), it’s not difficult make it happen in completely custom ways. Below is an overview of what we did in this case.

Choropleth

Our choropleth map, in brief, is drawn from tiled GeoJSON served by TileStache and colored by data requested from IPRO’s database. Although I suppose it will be part of the Leaflet release some day, there’s currently no built-in support for tiled GeoJSON layers; however, as you’d expect with an open-source project, third-party developers have come up with solutions. We used this TileCanvas layer with some additional modifications.

GeoJSON is commonly drawn to SVG, but just as we learned long ago in Flash, a ton of vectors rendered on screen at one time can really bog things down. We wanted to try the canvas element instead, rendering the vector data as static rasters and faking the mouse interactivity that SVG would have allowed. Sure enough this did seem to perform better, especially when we needed to draw our county layer in high detail. Thus the GeoJSON TileCanvas layer, which builds upon Leaflet’s canvas layer, was handy.

To make this all work interactively and allow on-the-fly coloring based on data, we had to perform a couple of behind-the-scenes tricks. The main technique was introduced to us by our friend Jeremy White, a Graphics Editor at the New York Times whose fantastic interactive work you have undoubtedly seen and who has explained this in a couple of talks. Basically, it’s this:

Beautiful, right? This green thing is a map layer that ordinarily is invisible underneath the actual choropleth layer. It draws each enumeration unit (counties here) with a unique color based on a unique ID number for that unit. That number could be its position in an array, or in our case an arbitrary number included in the original shapefile (again, though, it’s just the row number of each record). On a canvas element we can’t do much more with the mouse than detect the coordinates of the mouse position and the pixel color under the mouse. By assigning colors this way, we can read that pixel color and turn it back into the ID number, thereby learning which county is under the mouse.

Our method for assigning colors, also more or less following Jeremy’s tips, was to use the red and green channels, each of which has 256 possible values. It works like this for my county of residence, which had an ID number of 1222:

1. 1222/256 = 4.77. We only want the integer for this part, so Red = 04.
2. 1222 mod 256 = 198, or in hexadecimal, C6. Green = C6.
3. Blue = 0.

In other words, we just run down the sequential list and increment the green value by 1 until reaching maximum green (255), at which point red is incremented by 1 and green rolls over to 0. In our code, a feature’s color looks like this: "rgba('+Math.floor(feature.properties.ID/256)+','+feature.properties.ID % 256+',0,1)"

Having detected a color on the map (#04C600 here), we can reconstruct that ID number.

1. Red = 04. 4 * 256 = 1024.
2. Green = C6 (198). 1024 + 198 = 1222.
3. Looking at our data, we find that 1222 is Middlesex County, Massachusetts.

The blue channel is not used at all for the counties and is instead reserved for drawing borders between them. Some confusion of pixel color can happen where two or more counties come together, sometimes appearing as a totally different color that belongs to a unit elsewhere. We draw blue over the borders as a kind of buffer. If any blue is detected while moving the mouse around, we know that it’s very close to a boundary and we don’t try to discern a county. Using only the red and green channels in this manner, 65,536 unique colors—and thus unique map units—are possible. If the blue channel were also used, it would be more than 16 million.

Our map doesn’t actually store a list of the all the counties and ID numbers. Instead we store the JSON attribute information along with the geometry on the custom TileCanvas layer. On a county mouseover, we loop through the features on the tile to find which one matches the ID number of the detected color. That way we know both the attribute information and the geometry, allowing us to display the name, etc. and also redraw the choropleth tile with a yellow highlight added to the correct county.

Proportional symbols

Marker symbols in general are easy to implement in Leaflet, but using them thematically is not straightforward. For one thing, it’s difficult to maintain an association between the symbol and the data that it represents. Again, though, it’s not hard to extend Leaflet’s capabilities, so we just added our own modified type of marker layer that allowed us to pass in data to control the symbol size and label. We shied away from SVG here too and used div elements for the symbols, something which was also just introduced in this week’s new Leaflet release. The CSS border-radius property can be used to make circles.

Multi-scale mapping

Even though raster basemaps tend to be designed for multiple scales (often 18ish unique scales), it’s easy to overlook the importance of doing this for vector data in web maps, too. Our map needed to work from continent level all the way down to street level, at 15 or so scales, half of which include the vector choropleth layer. We ended up using three levels of generalization, thanks of course to MapShaper.

Beyond good practices, generalization was important for performance. Note the file sizes on the image above. At the smallest scale, all of the country is visible, meaning we need to download and render all of the vector data. If we didn’t generalize the geometry, that would mean the whole 13MB!

Each of the three generalization levels is a different layer in TileStache. Rather than implementing three separate layers in Leaflet, we added a couple of methods to the TileCanvas layer to allow for several different source URLs, automatically switching between them as the zoom level changes. We could give it an object like this and not worry about it thereafter:

var countiesURL = [
{url:tilestacheBase+'counties-smallscale/{z}/{x}/{y}.geojson',min:0,max:4},
{url:tilestacheBase+'counties-medscale/{z}/{x}/{y}.geojson',min:5,max:7},
{url:tilestacheBase+'counties-largescale/{z}/{x}/{y}.geojson',min:8,max:20}
];

Thematic web maps: getting better!

There’s much more to the new Why Not The Best map than has been described above, so go check it out. To say nothing of the many design challenges, these were just a few of the most interesting technical challenges, which, thankfully, Leaflet and TileStache made it pretty easy to solve. (Now if only it were as easy to avoid the Mercator projection in choropleth web maps!) It’s been a good experience in learning how non-Flash web mapping libraries have improved for thematic cartography, even if they don’t support it natively. If you’re new to this, check out the Leaflet documentation and tutorials, as well as TileStache and our blog post tutorial on how to set up a tile server.

This tutorial should take you from absolutely nothing to a fully-functional web server containing:

• PostGIS: A PostgreSQL database optimize to store spatial information. It can easily import shapefiles and OSM data using command line tools as well as connect to mapping services like QGIS and Mapnik.
• Mapnik: A very powerful tool for automatically generating maps from geographic data with lots of control over cartographic display and rendering.
• TileStache: A simple way to efficiently serve geographic data to mapping applications. It can send tiled vector or raster data and will speed up any application that needs to load lots of data.

Basic Setup

I’m going to be using a Rackspace Cloud Server for this example. It’s a cheap way to get a server up and running and I’ve found them to be great with support. They automatically build your server and install the operating system. You just need to select 3 things:

1. Operating System: Ubuntu 11.10 (Oneric Ocelot)
2. Server Name: tiles
3. Server Size: 1024 MB of RAM and 40GB of disk

The RAM and disk space are the bare minimum requirements. Fortunately, Rackspace let’s you upgrade your server at any time so it’s easy to configure it small as a sandbox and then beef it up if you decide to put it into production later on.

Once you click “Create server” you’ll see your new root password. Copy it to the clipboard but don’t worry about keeping it super-safe. We’ll change it as soon as we log in for the first time (they also email it to you). Setup will take about 5 minutes to complete and they’ll email you when it’s finished.

Terminal and Remote Access

Since this server is in the cloud (ooooooh), the only way to access it is remotely through SSH. Open any SSH client you like (Terminal is already installed on OSX) and get comfortable. First thing we need to do is to log on to our remote server. Make sure you have that email with your root password and IP address and type into the terminal window:

ssh root@(your ip-address)

That command tells the terminal to start an SSH session, logging in as root to the server at the specified IP address. The root username is the default admin of the server. We’ll do most of this setup as root since it has full control over the system.

When it asks, just paste your root password from the email and you should be logged in and should see something like this:

root@tiles:~#

The # tells you the system is ready to receive commands. Let’s now change the root password into something we’ll remember. Type:

passwd

and hit enter and follow the prompts.

Now we want to do a quick software update to make sure everything is secure. Run both of these commands:

sudo aptitude update

sudo aptitude upgrade

We’ll use the sudo command often. It tells the server to perform the task as a super-user which gives you extra permissions to modify the system. Here’s another top-tip: At the command prompt, you can hit the up arrow on your keyboard to cycle through your previous commands.

Installing the Web Server Bits

This part of the tutorial is taken from symana.labs

The next step is to install the LAMP stack. LAMP stands for (Linux, Apache, MySQL, PHP) and has all the basics to turn your server into a web server. It can be installed with a single command:

sudo tasksel install lamp-server

and follow the prompts. To secure the MySQL server from common database attacks, run:

mysql_secure_installation

Enter the password you set in the previous step and then enter “n” to keep it. Enter “Y” for the rest of the questions.

If you think you are going to be using MySQL for other applications on the server, you can install phpmyadmin to give you a graphical way to interact with the DB by running:

sudo apt-get install phpmyadmin

When the install completes, we need to modify the Apache2 config file to include information about phpmyadmin:

sudo nano /etc/apache2/apache2.conf

Use Ctrl-V to scroll down to the bottom of the file and add:

# Include phpmyadmin configuration:
Include /etc/phpmyadmin/apache.conf

Press Ctrl-O to save (write out) the file and press Enter to save it in its current location. Then press Ctrl-X to exit editing the file.
When you’re done configuring everything, restart apache with:

/etc/init.d/apache2 restart

To configure a fully qualified domain name for apache type:

echo "ServerName localhost" | sudo tee /etc/apache2/conf.d/fqdn

Now we have to configure the server’s hostname so we can contact it via a URL instead of the IP address. If you enter:

hostname -f

you should see the server name you entered when you setup the server. We want to turn that into a subdomain for our primary domain (for me it will be tiles.axismaps.com) but you can skip this if you don’t have your own domain (you’ll just keep using your IP address to connect to the server). To tell the server what the rest of the domain is, we’ll need to edit a few text files using nano, the built-in terminal text editor.

sudo nano /etc/hostname

Will show you something like:

tiles

You’ll want to change that to:

tiles.(primary domain name).com

We are using tiles.axismaps.com for ours. When you’ve edited the file, hit Ctrl-X (not command if you’re on a Mac) then enter Y to save changes and hit Enter to overwrite the file. Do the same thing and add your domain to the second entry in:

sudo nano /etc/hosts

To make the changes stick, reboot your server with:

sudo reboot

The final step is to add a DNS record with your web host that points back to the server. From your server management page in Rackspace, click the DNS tab then click your domain name. Click “Add” to enter a new record with values:

• Type: A
• Name: tiles.(primary domain name).com
• Content: (server ip-address)

By this point, the server will have rebooted so you can log in again with:

ssh root@(your ip-address)

To allow established connections to continue to function:

iptables -A INPUT -m state --state ESTABLISHED,RELATED -j ACCEPT

To allow SSH traffic:

iptables -A INPUT -p tcp --dport 22 -j ACCEPT

To allow HTTP traffic:

iptables -A INPUT -p tcp --dport 80 -j ACCEPT

To allow HTTPS traffic:

iptables -A INPUT -p tcp --dport 443 -j ACCEPT

To allow remote database connections:

iptables -A INPUT -p tcp --dport 5432 -j ACCEPT

Drop all remaining traffic:

iptables -A INPUT -j DROP

Save all the rules to a file:

sudo iptables-save > /etc/iptables.rules

To enable the firewall, we need to add the rules to the network adapter by editing the interfaces file:

sudo nano /etc/network/interfaces

and add the line:

pre-up iptables-restore < /etc/iptables.rules

just after iface eth0 inet static and make sure it is indented like the other lines. Save and exit the file then reboot the server.

This is a good time to create a server backup. In Rackspace, click on “Images” then click “New On-Demand Image” to create a backup of your server. This way, if something goes wrong, you can be up and running again quickly.

Installing PostGIS

Some parts of this tutorial is taken from OpenStreetMap Wiki

To give us access to all the software we’ll need, we need to add an additional software repository. First, enter:

sudo apt-get install python-software-properties

to install the command that will allow us to add new repositories. Then we can add a GIS-specific software repository by doing:

sudo add-apt-repository ppa:ubuntugis/ubuntugis-unstable

Now we need to update the system to allow it to pull down the available software from the new repository:

sudo aptitude update

We should be ready to install all of the PostGIS packages with:

sudo apt-get install postgresql-9.1-postgis postgresql-contrib-9.1

Now we need to setup PostGIS to make the newly installed database ready for GIS. Swtich to the database user:

sudo -u postgres -iH

Now we will create a user within the database that can access your maps:

createuser -SdRP gisuser

Enter a password for connecting to the database (it should be different from your root password).

Now we will create and configure a database to hold your spatial data:

createdb -E UTF8 -O gisuser gis

psql -d gis -f /usr/share/postgresql/9.1/contrib/postgis-1.5/postgis.sql

psql -d gis -f /usr/share/postgresql/9.1/contrib/postgis-1.5/spatial_ref_sys.sql

psql gis -c "ALTER TABLE geometry_columns OWNER TO gisuser"

psql gis -c "ALTER TABLE spatial_ref_sys OWNER TO gisuser"

exit

Now we need to configure access to our database first by editing the access file:

sudo nano /etc/postgresql/9.1/main/pg_hba.conf

Scroll down to the bottom of the file and change the words ident and md5 to “trust” (there should be 3). If you want to connect to this database remotely (to view your data in an external manager or view it in QGIS) you should add the line:

# Enable remote connections:

host    all         all         0.0.0.0/0             md5

to the bottom of the file and then save and close. You’ll also need to enable remote listening by editing the main configuration file here:

sudo nano /etc/postgresql/9.1/main/postgresql.conf

and change the line:

#listen_addresses = 'localhost'

to

listen_addresses = '*'

(don’t forget to remove the “#” in front). Save and overwrite the file. To apply the changes, restart the database server:

sudo /etc/init.d/postgresql restart

To test if everything has been installed properly, log into the database as the new user we created.

psql gis gisuser

If you type \d you should be able to see all 3 tables. Then type \q to return.

Installing Mapnik2

Copied exactly from the Mapnik Wiki

To install Mapnik, enter:

sudo add-apt-repository ppa:mapnik/nightly-2.0

sudo apt-get update

sudo apt-get install libmapnik mapnik-utils python-mapnik

That’s it!

Installing TileStache

Some parts of this tutorial is taken from TileStache on GitHub

The first step in installing TileStache is to install mod_python which is the interface TileStache will use to communicate with the web server. You can install it with:

sudo apt-get install libapache2-mod-python

Then restart your web server with:

sudo /etc/init.d/apache2 restart

Now we need to install some more packages that TileStache depends on. First we’ll switch to the directory where we’ll keep the new applications:

cd /etc

Install packages Curl and Git via aptitude to help with the install:

sudo apt-get install curl

sudo apt-get install git-core

Now install some python tools and libraries that are required:

sudo apt-get install python-setuptools

sudo aptitude install python-dev

sudo apt-get install libjpeg8 libjpeg62-dev libfreetype6 libfreetype6-dev

We’ll grab and install PIP to easily install python modules:

curl -O https://raw.github.com/pypa/pip/master/contrib/get-pip.py

sudo python get-pip.py

Now install the required python modules

sudo pip install -U werkzeug

sudo pip install -U simplejson

sudo pip install -U modestmaps

The Python Image Library module has some quirks in Ubuntu 11.10 so we need to do some quick fixes:

sudo ln -s /usr/lib/x86_64-linux-gnu/libjpeg.so /usr/lib

sudo ln -s /usr/lib/x86_64-linux-gnu/libfreetype.so /usr/lib

sudo ln -s /usr/lib/x86_64-linux-gnu/libz.so /usr/lib

Before we can install it:

sudo pip install -U pil

Finally we’ll download TileStache from GitHub:

git clone https://github.com/migurski/TileStache.git

And install it globally by running the install script:

cd TileStache/

python setup.py install

Finally, we’ll have to add the mod_python configuration to tell our web server which URLs to have TileStache process. Start by editing the apache configuration file:

sudo nano /etc/apache2/httpd.conf

and add this:

<Directory /var/www/tiles>

  AddHandler mod_python .py

  PythonHandler TileStache::modpythonHandler

  PythonOption config /etc/TileStache/tilestache.cfg

</Directory>

This will direct any web traffic to the “tiles” folder containing the file extension “.py” to TileStache. We just need to add a tiles directory to the web directory so we don’t get an error:

mkdir /var/www/tiles

Reboot your server to finish it off:

reboot

Testing Your Server

Once your server reboots, we can test to make sure TileStache is installed correctly and is running through mod_python and receiving maps from Mapnik.

In your browser, go to: http://tiles..com/tiles/tiles.py/osm/preview.html

You should see a OSM tiled map fullscreen, confirming TileStache is correctly installed and running. When you work with TileStache, you can always preview your tilesets at …/tiles/tiles.py//preview.html

Now go to: http://tiles..com/tiles/tiles.py/example/preview.html

You should see a simple gray country map which confirms that TileStache is talking to Mapnik, rendering a shapefile stored in the TileStache directory.

Finished

Now that everything is installed, you can go nuts with TileStache, Mapnik and PostGIS to render your own tiled maps. We’ll come back to this point in the coming weeks to show examples of how you can actually use these tools to make some maps. Some sample topics might include:

• Thematic cartography with TileStache and Mapnik
• Combining raster and vector tiles to optimize mapping for iPad
• Custom map tiles from OSM data

To allow us to give it away for free, we’re scaling back what indiemapper does. We’ve removed all account-based online functionality including usernames / passwords, cloud storage, and map sharing. Everything else, we’ve left as is. The map-making process is still the same except you don’t have to log in AND you need to export your map before you close your browser. We’re also moving our support operations over to GetSatisfaction to let the community of indiemapper users share their knowledge amongst themselves.

We’re really happy about this change and we hope you are too. If you have any questions about the new direction of indiemapper, please let us know in the comments.

Launch indiemapper