Posts Tagged ‘cartogrammar’

Simple shapefile drawing in ActionScript 3 (Cartogrammar)

Wednesday, July 29th, 2009

Shapefile + magic = map in Flash!

[Editor’s note: Andy Woodruff explains how to use his quick and easy implementation of Edwin van Rijkom’s AS3 classes for loading SHP files and their DBF attributes into Flash/Flex. This library DOES NOT PROJECT your shp files, you might consider doing that first.]

Recently I’ve heard two friends independently inquire about some sort of basic guide for loading and drawing a shapefile in Flash. The only real tutorial/example I can recall is here, dealing with Google Maps. But these guys are looking for something more bare-bones. Being a regular user of Edwin van Rijkom’s invaluable code libraries for reading shapefiles, and usually forgetting the process myself, I thought it would be a good idea to put together a very simple set of AS3 classes that load a shapefile and throw a map on screen.

So to get those jerks off my back, I wrote a little thing called ShpMap, which supplements van Rijkom’s classes by loading and drawing a shapefile. It’s nothing fancier than that. Sometimes all you need is to get your base map on screen. (Update: just to round it out a little more, I’ve added basic loading and parsing of a shapefile’s accompanying DBF file, which contains attribute data. This also uses classes by van Rijkom.)

I hope that this class (and the several associated classes) can both be directly usable for some projects and serve as a basic guide to using van Rijkom’s classes to load shapefiles.

Dig it:

  • An example that loads and displays a US states shapefile (and then puts a square on my house and colors the state of Wisconsin green). View the source code here.
  • Download the source code. (My classes plus van Rijkom’s, as well as a demo US States shapefile.)

Don’t make me search! (Cartogrammar)

Wednesday, June 10th, 2009

[Editor’s note: Allowing multiple access points to browse into a dataset using spatial ideas from cartography (see also GeoName’s post on the relational ontology / the semantic web).]

Republished from Cartogrammar. June 1, 2009.

Searching Google Maps for

There’s a lot of information on the internet, if you haven’t noticed. Far too much for any mere human to wade through. And that’s why we find simple beauty in Google. Instead of overwhelming us with links and content, its home page provides a single search field. “Remain calm,” it says in a soothing but vaguely sinister voice, “just tell us what you’re looking for and we’ll bring it to you.” But God help you if you don’t know what you’re looking for.

Okay, it’s not that bad. Research and debate about searching versus browsing behaviors have played out over centuries (assuming that measurement of time in this information age is something akin to dog years), and it seems safe to say that most of the time information can be accessed by either means. Back in the wild days of the 1990s, web usability guru Jakob Nielsen found that “half of all users are search-dominant, about a fifth of the users are link-dominant [browsing], and the rest exhibit mixed behavior” and argued that “[d]espite the primacy of search, webdesign still needs to grounded in a strong sense of structure and navigation support” for the sake of not only those link-dominant users but everyone else too (link). Most of the web seems to adhere to that principle, but it’s a search-based world out there.

And I kind of hate it.

Sure, it’s obviously crucial to be able to search for what I’m looking for, but I’m not always looking for anything in particular. I want to explore or, to frame it (perhaps more accurately) in terms of mental lethargy, to avoid having to think of something to look for. It’s like Christmas shopping for all my relatives: as torturous as it already is, if I weren’t able to browse store shelves and instead had to think of specific gifts to ask the shopkeeper for, I’d probably collapse and bust into tears. (I titled this post after Steve Krug’s wonderful “common sense” book on web usability Don’t Make Me Think, not that I’m quite what he was talking about.) It bugs the hell out of me whenever I go to check out the newest Coolest Web Tool or Visualization Ever, only to find that I must think of something to search for in order to see it in action.

Continue reading at Cartogrammar . . .

Sparkmaps? (Cartogrammar)

Monday, June 1st, 2009


Andy Woodruff has a neat post over at Cartogrammar about Sparkmaps, a riff on Tufte’s sparkline concept (1, 2).In essence: “Tiny, non-intrusive supplemental maps … As a sparkline provides at a glance a reasonably clear picture of numerical data, so can a small map provide context and clarify otherwise confusing or vague text.” We’ve started to include small Google Maps mashups in the sidebar of some Washington Post articles the last month. We occationally use another tool that allows a Google Maps mashup to appear on hover of a hyperlinked placename. Less discoverable, so effective only when the geography is completely anciliary to the story.

Read his post at Cartogrammar . . .

ActionScript Bezier Curves (Cartogrammar)

Friday, March 20th, 2009

[Editor’s note: For those programmers in AS3 wanting to draw pretty curves ala Postscript, PDF, or Illustrator.]

Republished from Cartogrammer. View comments there for updates.
January 5, 2009. Andy Woodruff.

[Andy] finally opened [his] CubicBezier AS3 class, the only reason anyone ever finds this site at all, for the first time in many months to attempt to address some of the various comments and reported problems from the original. It’s not perfected, but [he’s] done three things:

  1. Added a “moveTo” argument to the curveThroughPoints method, following the idea in one comment on my blog post. Ignore it if you wish, but if you set it to false, the curves will connect to wherever graphics drawing left off rather than moving to the beginning of the curve and starting anew.
  2. Hooray trigonometry! Messed with some of the angle calculations to fix problems with zero angles and division by zero. I hope it worked.
  3. Provided a line of code that can be altered to use lineTo for straight segments of 3 or more points rather than curving.

Straight lines were raised as an issue in several comments. While I think I have fixed the crazy behavior of straight horizontal and vertical lines, I suspect the result for three points in a line may be surprising at first glance. For instance, the three middle points in the image below are all aligned horizontally.

Straight line with S-curve

The S-curve through those points may look odd at first, but it’s actually to be expected with these cubic Bézier curves. Of those three points, only the middle one has curve control points that are also aligned horizontally. The outer two have control points that are also based on the points outside the line. Here’s an approximate example from Illustrator of what they look like

S-curve in Illustrator

I’ve left that as the default behavior, but I did insert some code that can be modified so that the curve essentially stops curving when it reaches several points in a line, draws a straight line through them, and then continues curving as normal after that. Here’s what the same example looks like with that option enabled.

Straight line with lineTo

It’s probably often fine, but I caution that it can result in sharp corners. Here’s the same with those dots removed:

Straight line with lineTo and sharp corners

I’m uncertain what’s best, so I’ve made that a line of code that has to be changed rather than a more accessible option. I’d be glad to hear ideas on how best to handle it. Feel free to change it however you like, of course. That and other modifications are identified in the comments.

Download the class here:
The previous version is here, in case I screwed something up. Forgive my lack of version control.

Map panning and zooming methods in Flash (Cartogrammar)

Sunday, July 13th, 2008

Reprinted from Cartogrammar’s blog (original post from June 29):

Following last week’s post on losing context with interactive maps, I wanted to consider the different methods of navigating an interactive map (i.e., panning and zooming) and how they might affect that issue, and while I’m at it look at other aspects of these methods, too.

A great place to start is the 2005 paper by my now co-mappers Mark Harrower and Ben Sheelsey called Designing Better Map Interfaces: A Framework for Panning and Zooming.* (A PDF is available on Professor Harrower’s web site.) In that paper they discuss criteria for evaluating panning and zooming methods, namely functionality and efficiency, and then go on to present and evaluate nine common methods of panning and zooming. With respect to my previous post, it is a lack of what they call “local-global orientation cues” that can lead to the “navigational trauma” of losing context.

Below are small demos of eight of the nine methods listed by Harrower and Sheesley, along with their thoughts and mine on functionality and efficiency as well as a word or two on the prior subject of maintaining context. (For simplicity I’ve left zooming out of most of those demos where it would be accomplished via separate interface widgets.) 



 Known sometimes as “slippy maps” (from OpenStreetMap?), maps with this kind of panning interaction are the standard these days in the big online mapping services from Google, Yahoo, Microsoft, etc.

Pros: No pesky tools or interface to deal with, and the action is natural and mimics real life manipulation of tangible objects.

Cons: High mouse mileage—you’ve got to move your mouse every bit as far as you want the map to move.

Context: There are no inherent orientation cues, so with this method alone you’d have to mentally keep track of the map’s movements. There is, however, an advantage of methods that directly jump from place to place.

Continue reading at Cartogrammar to see more examples . . .