The rain on terrain

If you poured water over the terrain somewhere in the world, where would it go? That’s perhaps one way to think of the thing that distracted me in the evenings this week.

What we have here is more or less an animated flowy map of drainage, although it’s not a serious attempt at an accurate map. It’s just something that turned out to be kind of pretty.

Apologies for its clunkiness; I’m not that good at code. This is another episode in my habit of messing around with terrain mapping in the browser on canvas elements. See for example shaded relief and grassy sketchy thingies. (Side note: calculation of aspect turns out to be poor in those; this way works better and I’ll fix them at some point.) None of this ever turns out zippy, but it’s always a good learning experience and is occasionally art-worthy.

Maybe you can guess what’s going on here. I throw a bunch of random points at a terrain map, and they begin flowing toward lower elevation. That’s all, really: each path continuously asks “what adjacent location is lowest?” and moves in that direction. It’s more complicated behind the curtain, of course, but it’s not awful. I’ve tried to leave helpful comments in the code.

I’ve been inspired for a while to attempt this kind of animation by Cameron Beccario’s amazing global map of wind, etc. (perhaps spurred into mind by everybody posting links to the map during Hurricane Matthew) and the original wind map by Martin Wattenberg and Fernanda Viégas, and other similar maps that they have in turn inspired. I’m not as smart as those people and don’t entirely know how they’ve done it, but I was pleased to learn how to do a kind of fading trail animation one way or another.

The key to all this is Mapzen’s terrain tiles. The hillshade you see in the map is straight magic from them, and replaces the things I was trying to do on my own with DEM images and canvas. Invisible but crucial are their Terrarium elevation tiles, which are these wild-looking purple and green things—but which encode actual elevation in their colors. Pretty clever.

Mapzen Terrarium

Just load those in, do some pixel calculations to find which way is downhill, throw down some paths, and animate those according to the calculated directions. And there, you’ve got yourself a map that’s pretty fun to watch.

Anyway, play with the map, and have a look at the GitHub repository if you want to see the code or tell me about anything dumb I have done.

| Comments Off on The rain on terrain

Land by latitude and longitude, or, a pile of continents

Bill Rankin’s graphs of world population by latitude and longitude popped into mind for no particular reason the other day, followed by a silly-sounding question: “but, like, what about land area by latitude and longitude?”

Silly because, duh, a chart of land area by latitude and longitude is a map. Then again, a map is both latitude and longitude. What if you look at each dimension individually? Heck, let’s just try it.

I did this by, essentially, drawing maps and counting pixels, then collapsing all those pixels against an axis. The important thing is to use an equal-area projection so that each pixel means the same thing everywhere.

For latitude, an equal-area projection with even spacing between parallels so that the axis has a consistent scale of degrees: sinusoidal.



Land by Latitude

And similarly, for longitude, one with even spacing between meridians: a cylindrical equal-area projection, Gall-Peters.



Land by Longitude

I’m not sure what there is to gain from these quasi-maps. Maybe nothing. But it’s kind of neat to see how the shapes of some continents are still vaguely there even when all squashed together. (By the way, apologies to places like New Zealand that got lumped together with Australia.) It’s kind of like those layered jars of sand art.

If nothing else, it’s fun to go full Play-Doh and cram everything both ways into a blob down the corner.

Pile of Continents

Yeah, so satisfying.

| Comments Off on Land by latitude and longitude, or, a pile of continents

Hachures and sketchy relief maps

Sketchy Mokokai relief map

I’ve never been a terrain representation expert, but occasionally I get briefly super interested in some DIY technique for relief mapping, not using typical GIS tools or rendering software. Tom Patterson’s old (but still applicable) Photoshop tutorials were my introduction to the magic simplicity of turning a grayscale image into fancy shaded relief.

Some years ago I wrote code for simple shaded relief, using Flash at the time. I picked that up again just a few months ago and did the same using JavaScript and canvas elements. These were impractical experiments, but they were a super interesting way to learn some basics about how automated relief shading works, and they were a more fun playground than turning knobs or filling in boxes in some software would have been.


Then the other day, for no particular reason, hachures came to mind. Hachures are an old-fashioned technique in which parallel lines are drawn along slopes. You don’t see them much these days, but they’re one of my favorite techniques; their chapter is still the only one I’ve managed to read in Imhof’s book. From time to time I’ve wished there were an easy way to generate nice hachure maps in GIS or what have you—as far as I know there’s still not much out there.

I tried rendering some hachure-like maps based on the same code I’d used before, that is, in a browser with just some JavaScript. The ultimate result was not so much hachure maps but the kind of sketchy map style you see in these images, almost like something drawn with colored pencils.

Sketchy SF relief map

It began with something that I quickly recalled is essentially what Michal Migurski had worked on (later inspiring Eric Fischer) some years back: divide elevation data into a grid and use short strokes to show slope (as line width) and aspect (as rotation).

Gridded hachure-esque symbols

That was kind of cool, but certainly a lot more rigid-looking than classic hachure maps. The next step was to introduce some small random offsets in the grid so things didn’t line up so perfectly, looking slightly more natural.

Random offsets in hachure grid

Wanting to move even further from a gridded appearance, next I tried drawing longer strokes at each point, longer than the dimensions of the cell so that lines would start to blend together. I also remembered that I wanted shadow hachures, where stroke weight or shade corresponds to brightness in an illuminated scene, not just slope. (My earlier shaded relief code could calculate this.)

Longer strokes and shadow hachures

At this point it was starting to look more like a pencil sketch than a true hachure map, so I ran with that and added color. There’s kind of a combination of slope and shadow hachuring here, with stroke width representing slope and color representing shadowing.

Shadow strokes and color

Lastly, there were two subtle steps: add a little more randomness in the form of slight curves, and draw the map at lower opacity several times on top of itself, each time with the sun angle varying a bit. This produced a somewhat smoother scene with a bit more shadow detail, and allowed the various random effects to accumulate into a very grassy look.

Sketchy Big Island relief map

The source code for this is on GitHub here. All in all, it’s not practical code, at least not in this implementation (it would be interesting to try it in a more efficient way, or on something like Mapzen’s elevation tiles), but it’s a fun style to play around with! With more attention to things like color I can imagine some pretty good-looking maps. In any event, here are a few more that I rendered.

Crater Lake:
Crater Lake sketchy relief map

White Mountains, around Mount Washington:
Mount Washington sketchy relief map

Oahu sketchy relief map

Yosemite Valley:
Yosemite sketchy relief map

Hocking Hills, Ohio:
Hocking Hills sketchy relief map

| Comments Off on Hachures and sketchy relief maps

Beyond the sea

In the northern reaches of Newfoundland, near the town of St. Anthony, is the Fox Point Lighthouse. I’ve never been there, but I know it has one of the most impressive ocean views in the world. If you face perpendicular to the right bit of rocky coastline there and gaze straight across the ocean, your mind’s eye peering well beyond the horizon, you can see all the way to Australia.

Beach views of Australia map

What’s really across the ocean from you when you look straight out? It’s not always the place you think.

Across the oceans from the US

I’m inspired by a map done a couple of years ago by Eric Odenheimer and some follow-ups by Weiyi Cai and Laris Karklis of the Washington Post. Those maps are colorful, handy guides to countries of equivalent latitude across the oceans. It’s easy to forget, for example, that much of Europe is well north of the United States east coast. But they’re not exactly maps of what’s across the ocean from you, at least not directly across from you. To think of east or west as “straight” across is, perhaps, one of those effects of the map projections we see every day.

The latitude maps got me interested in answering the question more strictly: standing on a given point and facing perpendicular to the coast, if you went straight ahead, never turning, where would you end up? There are two reasons why following a line of latitude won’t answer the question.

1. Coastlines are crooked and wacky.
2. The earth is round.

With that in mind, here are some maps showing the points from which you can “see” each of the continents.

Beyond the Sea

Coastline angle

Coastlines face all different directions, bending and turning constantly. The “East coast” isn’t a straight north-south line facing directly east. Just look at the state where I live, which has coastline facing literally all directions.

Massachusetts coastline

Taking “across the ocean” to mean directly across, perpendicular to the coast, then what’s across the ocean depends on where you’re standing! To get a rough idea of what direction the world’s coastlines face, I’m calculating the angle between every pair of adjacent coastal vertices in medium scale Natural Earth data, then placing a point in between them and measuring the view from there based on that angle.

Points on coastline

The much-maligned Mercator projection comes in handy here. Those angle calculations were made using projected coordinates because the conformal Mercator projection preserves the thing I’m interested in: local angles!

Straight lines on a round object

The second point is trickier to imagine thanks to common rectangular maps and the way latitude itself is defined. If you can detach the concept of “direction” from the concept of east and west, and look at globes and other map projections, it’s easy enough to picture. The shortest, straightest line on a sphere (let’s call the Earth a sphere even though it technically isn’t) is a great circle arc, not something like a line of latitude.

What we often think of as “straight” is a path following a rhumb line, a line of constant bearing. Wikipedia succinctly describes how such a “straight” line actually turns, in contrast to a great circle.

If one were to drive a car along a great circle one would hold the steering wheel fixed, but to follow a rhumb line one would have to turn the wheel, turning it more sharply as the poles are approached.

A typical classroom demonstration of great circles is to pull a piece of string taut on the surface of a globe between two points, and note how the string arcs across lines of latitude, changing its bearing the whole way. Try this specific case to drive home how the spherical “straight” differs from “straight” as we’ve defined compass directions: find a line of longitude on the globe, then a spot along that line somewhere away from the equator. Bring the globe to your eye and place the string perpendicular to the meridian, in between two latitude lines. Line up your view with the string and you can see that even though it starts out going due east or west, as it continues directly ahead the “straight” east/west parallels curve away from it.

Straight line on a globe

So if we want to know what’s truly straight across the ocean from a given coastline point, we need to see what direction the coast faces at that point, then draw a great circle in that direction and see what it runs into.

As for flat maps, certain map projections provide an accurate view of directions. The azimuthal equidistant projection, for example, preserves correct direction (and distance) from the center point of the map. A straight line from the center of the map is a straight line in real life. Here’s the Newfoundland-to-Australia example from earlier:

Straight line from Newfoundland to Australia

Such a map, in the end, is how I’m figuring out beach views: center that projection on each point, then draw a straight line in the correct direction until it hits land.


I’m not entirely certain that I have all the math right, but I think it’s at least close. Even we cartographers sometimes have a shaky grasp of map projections and spherical geometry.

But who has time for correct math? I’ve got to start training for the straight-line swim from the number one beach in my life—30th Street in Ocean City, New Jersey—to Brazil.


Ohio is still a piano

In a hundred years, no one will remember our work. Strike that, make it about five years. Digital, web-based work can break or disappear in an instant. I’ve certainly done some things which are now gone forever.

Anyway, one broken thing was the crazy Ohio piano map I made nearly seven years ago, in which counties of Ohio were represented by the sounds of piano keys, and data became music of sorts. Actually, it’s not entirely broken; the sounds and most interactions work, just with a big, persistent gray error because Google Maps for Flash is no longer a thing.


Professor Robert Roth insists that this ridiculous map is vital to the teaching of cartography, and who am I to stand in the way of education? So I dug up the old laptop that had the only copy of the Flash map’s source code and set about recreating the map in more modern HTML and JavaScript. It doesn’t have everything the old map has, but hey, it works. Bonus: now the code can actually be seen, on GitHub.

It definitely does not work on mobile devices because playing audio elements on mobile is complicated and I don’t care enough, but if you’re on a desktop computer, here you go. Don’t touch this if you’re in a library or something without headphones. You’ll be embarrassed.


Cartographic Summit 2016

Cartographic Summit group photo

In the official Cartographic Summit photo above, I’m the robot on the right edge who doesn’t know how to stand like a normal human. I’ve just returned from this unusual event, which was part traditional conference and part unconference, with people in attendance only by invitation. I didn’t know what to expect, but figured a few days with friends new and old in sunny Redlands, California in February couldn’t hurt.

The point seemed to be to discuss and identify key areas of focus and/or research for cartography in the near future. A handful of excellent speakers got us going, but much of the main event revolved around small discussion groups which met to talk about challenges and ideas along certain themes and keywords, subsequently summarizing the discussions for everyone else to hear. Surprisingly these were very engaging, forward-facing, and dare I say somewhat fruitful. Usually traditional cartographers talking about Cartography Future only want to fix what’s wrong with Cartography Present, and blame it on those who don’t know Cartography Past. Less so this time.

Altogether it was pretty interesting, and I was mostly pleased with what transpired. Below is a short list of words and phrases that stuck in my mind. Some are good and some are bad. A few are my own thoughts but most paraphrase what I heard. Many are open questions, but that’s okay. Part of the idea here was to develop agendas. Do check the #cartosummit hashtag on Twitter for many more reports, and watch for audio and slide recordings to be posted.

AUDIENCE. We were traditionally taught to understand our audience before designing a map, but we may be falling behind these days. We don’t always think enough about how our maps will be used in the wide variety of possible media and environments. And the internet being the internet, sometimes a map escapes our control and goes far beyond its intended audience. Related to this, there was some discussion about making better use of tracking and analytics, and making such capability easier in our tools.

BIG DATA, SMALL MAPPING. Big data isn’t entirely new. People mapped massive data sets ages ago, but in those days it was usually done by large organizations with lots of people and resources. These days the entire job often falls to an individual. What are the consequences of this, and how can we as cartographers address such a challenge?

BLACKLIST. Although this event was hosted by Esri and organized in part by Esri people, it was in large part an ICA event and Esri attendance was very limited. But for an intellectual meeting about the future of cartography, there was a conspicuous absence of representatives from certain major players in mapping—companies that are in some degree of competition with Esri. Rumor was that inviting them was denied by the Esri powers that be. I’ll take it back if that’s not true, but if it is, it sours the experience a bit for me.

CLARIFY. The best-remembered word from the inimitable Nigel Holmes this week. It’s understood that a vital role of a cartographer is to find and make clear some aspect of data, not simply throw all the data at everyone. This was especially emphasized in discussions of mapping “big data.”

COMPUTATION. What is the role of computation in cartography? It’s more than the hard work of crunching through data. We should embrace it as part of the design process, not as something that detracts from it. If there is one thing I would stress to modern big-C Cartographers, it’s this.

DIVERSITY. This was definitely a white male, people-like-me meeting. At the very least, clearly in a group of 50, there ought to be more than 11 women. Diversity is something we need to improve in the cartography community in general, not only in the sense of gender, ethnicity, etc., but also in things like educational and economic background. Most people who actually work with maps don’t come from the world of advanced geo-degrees that we tend to deal with. (Side note: we’re working on some plans for this at NACIS.)

ELITISM. I appreciate an effort to bring together top minds in cartography (plus a few of us internet loudmouths) and the huge benefits of smaller group discussions, but in a field as collegial and small as ours it leaves many people spurned and furthers an elitist reputation we have among some segments. A few poorly contextualized tweets make it look like we’ve only gathered to continue picking on the new kids. I really don’t know how to be limited, representative, and diplomatic all at the same time, but there is probably some ground to gain here.

EXCITEMENT. Cartographers are in an enviable position to make other people excited about their own domains. The smartest people in the world can have their minds blown by seeing something they’ve studied for years mapped for the first time. We can do good for other fields at the same time as our own.

FAST AND GOOD ENOUGH. Let’s recognize that many modern map users and map makers want to accomplish something in mere seconds, not through a slow series of decisions. We can do people a great service by getting as far as possible with smart, automated decisions. The result will never be perfect, but it’s worthwhile.

MAP LITERACY. How can we better teach ordinary map readers to look at maps critically, to understand their limitations and biases rather than taking everything as unqualified truth? There was, at least, some sense that people are getting better at recognizing good cartography, which is nice. I’d rather help people become better map readers than worry about a proliferation of bad maps.

SKIPPING. Yeah, so I ditched most of the third day to go to Joshua Tree National Park with [names redacted to protect professional reputations] instead.

Joshua Tree