LearnMistakes Were Made: Making Interactive Maps With jQuery


writes on February 19, 2010

(Updated note: the data source is an evolving project, one of the reasons we needed this app to be flexible and easily updated by a non-tech team, so this article is really focused on the technical aspects of putting this little ecosystem together.)

I use both Flash and jQuery when designing interactions for data visualization projects. A great opportunity came along to experiment with ways jQuery could be used to develop an interactive map. Before I go further, I admit that mistakes were made, but no pandas were harmed at any point and our team learned a lot, so it ended up a win-win (for us and the pandas).

The project we started out with was simple, we had a comp and a request to create a flash map that could display some static data. After diving in a little deeper, it became clear that the data source would change on a regular basis, so I recommended that we try to create a small ecosystem with various pieces of the project:

  • spreadsheet (our data source)
  • CMS (client was using WordPress)
  • map of the U.S. (caveat: each U.S. location needed to be able to be displayed in 1 of 3 colors: red, yellow, green for the animation, and ultimately managed as an .SVG)

jQuery as a Substitute for Flash?

We could have accomplished everything with Flash, but we wanted to learn something new and today’s browsers (shame-free plug for Chrome!) speed up DOM manipulations, so Flash isn’t the only or best choice, and there were clear benefits:

  • Easy—jQuery is already packaged into WordPress
  • Styling—design can be easily restyled by almost any team member
  • Integrated—everything lives integrated within the page v. living in layers
  • UX first—end users never need to install a plugin
  • Recession proof—we didn’t have to buy another Adobe product

Other Things we Kept in Mind

Smart architecture: All of the data is stored in a simple spreadsheet. jQuery, CSS, and simple variable placement determined by a PHP script takes the data and displays it both properly and in multiple places (click over to teachingjobsportal.com to see it in action).

Developer-free updates: The little ecosystem we created allowed us to use one data source to update both the map and each of the locations’ corresponding pages (51 pages for 50 states & DC) that are stored in WordPress. This keeps things simple, reduces the chance for user error, saves a ton of time because a user doesn’t have to open all the individual files, and doesn’t require involving a developer.

SEO-friendly: jQuery allowed us to represent all of the data in HTML, so Google and other search engines can gobble it up and help us make it more discoverable.

Joel Sutherland: Joel Sutherland of New Media Campaigns wrote an awesome post on building an interactive map with jQuery over Flash in January 2009, and he made me believe we could do it too (albeit on a far simpler scale).

Like I Said, Mistakes Were Made

We got too fancy

At a point while we were executing, we decided to convert the data export from the CSV into XML (this also converted the .SVG and made it dynamic). While XML was easier to work with on the developer-side, it added steps and complexities to the process

Additionally, the map’s point-by-point coordinates, complex outlines (U.S. states are not nicely designed with 90 degree angles), and dynamic states required that we use software to both build the map and manage the images in an alternate library, enter ImageMagick. Simple enough, but the problem using ImageMagick to manage the library of the various U.S. state colors we also introduced “Imagick” a truly nasty PHP extension into the mix, which caused a new set of issues.

We descended into dependency hell

Installing PHP extensions can be tough, and Imagick is a huge pain in the a$$. During installation, it requires that you be prepared to manage a large set of spaghetti-like dependencies. There’s also a small bug that we ran into, which prevented compiling, so our Debian-friendly team found ourselves in Unix-land attempting to execute YUM (which usually solves the problem of “dependency hell”), and ultimately lost the battle and had to compile ImageMagick manually (both annoying and a time-suck).

We created simple, but stubborn architecture

Our little ecosystem (the one I’ve touted as mostly simple) is quiet stubborn and set in her ways. We can make updates to the data anytime, but because we didn’t build the data source as a database, we cannot easily add new fields without having to update everything.

We overlooked Hawaii & Alaska

I threw this one in for fun, but whoa! Big oversight! We accidentally forgot to include HI and Alaska and essentially redesigned the U.S. without them.

So, to Wrap it all Up

jQuery was a great substitute to Flash for us, making TeachingJobsPortal’s map. Furthermore, the execution was mostly simple, our client can control the map and its related pages’ content without having to hire a developer. (*I also didn’t have to learn Flash on the fly)

Though our animation designs are ongoing, we’ve created a new and much nicer hover state, we really like the way that the gauge works (it’s connected to the image library and as the states change color it automatically updates as well), and, as planned, the map smoothly changes colors when the data source is updated.

We’re considering ways we can eliminate using ImageMagick for the library, because we want to use the map on another project and lighten up the load on the CMS, so I’d love your thoughts on that as well as any other ideas you have on jQuery v. Flash!

I owe a lot to Joel Sutherland for sharing his team’s work, so we could learn from it, and for releasing a fantastic jQuery plug-in that I encourage you to use if you ever create zoomable interactive maps.

*Production by my brilliant partners at jjomedia.com


Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

0 Responses to “Mistakes Were Made: Making Interactive Maps With jQuery”

  1. Anonymous on February 15, 2011 at 4:26 am said:

    I think there’s an important reality we need to think about whenever you talk about this kind of project. Servers are just not designed for images. Sure, php makes a lot of this reletively easy to do. Php can make your web server do a lot of things you might otherwise not think of servers being designed to do. And, imagemagick is nice. Much nicer than GD, especially when you have god-like control of the server you’re on.

    The problem is speed. You could if you wanted to offload the graphics plotting to the browser. I’m not sure which libraries there are out there for this, I’ve always done it by hand, and never on anything as complex as a states map. But I imagine it could be done, if you’re very very patient. Either way though, it’s going to be slow. And even if you could get it to work, you’re going to have issues with the clients you support. IE 6 and 7 are going to kill you for this.

    You mentioned SVG. This is a good idea. But why use bitmaps if you don’t have to? With a good SVG editor you can create the shapes you need, and make them change color. It’s actually really simple to do. Integrate the SVG into a php script, and you’re golden.

    Hard to say, but a great article nevertheless.

  2. Interesting. I didn’t realize that jQuery was supported automatically in WordPress. I sell an out-of-box Interactive map of the United States. I used Flash because of greater browser support and speed. But, this makes the future for non-proprietary maps look promising.

  3. And now Google has made this kind of visualization (at least simple presentation, without shiny effects like in your final product) easier because you can combine the Google Docs Spreadsheet API and the Google Maps API into one, conveniently with a wizard: http://gmaps-samples.googlecode.com/svn/trunk/spreadsheetsmapwizard/makecustommap.htm

  4. Nice work! Works great in FF and Chrome – but in IE8 it is totally broken and if I turn on compatibility mode the hover works but the dial is still dead. (Win7)

  5. Why is NYC and Long Island part of New Jersey on your map?

  6. Great job 🙂

    But unfortunately your map doesn’t work in my Firefox :/ (version 3.5.8) The map is invisible it only shows the red outline of the states on mouse over.

    The same is with IE8, I can see the map, but it doesn’t do anything on mouse over, and the gauge does not work.

    Chrome and Safari are fine 🙂

    So I guess this is a little to early for jQuery to replace flash. At least flash displays and works consistently across different browsers 🙂

  7. Mark Sinkinson on February 21, 2010 at 11:00 am said:

    Fantastic insight into JQuery and SVGs.

    I’m actually using a similar approach for my final project at university, creating an interactive map of the building using a similar method to you. Check it out in my link.

    As it had to be visible on iPhones, flash wasn’t an option and thanks to Keith Wood’s JQuery SVG plugin and SVG DOM plugin, I can achieve everything flash could do and best of all it is easily maintainable by someone who does not use Flash

  8. great post, i like this

  9. You forgot to mention: showing love to iPhone/iPod touch/iPad users 😉

  10. I would worry less about your maps and more about your data. In most of the states I looked at where I have intimate knowledge of hiring needs for teachers your data is not just wrong, but horribly out of date. You have several states listed as in desperate need of teachers that will be laying off thousands of teachers over the next 24 months. You also have outdated salary information as well as failing to mention that in many states teachers will be expected to take anywhere from 10-30% pay cuts over the next two years assuming their contracts can be renegotiated.

    One current example is Nevada which you have listed as having an urgent need for teachers. Washoe County School District which you have incorrectly labeled as Reno/Tahoe will likely be losing as many as 1200 teaching positions next year due to short falls in the states general fund and $35-40 million dollars in additional budget cuts on top of the $45 million that has already been cut from the counties budget. Clark County (Las Vegas) is in equally bad shape only is significantly larger and as such will likely see more teachers let go. The only positions that are even close to having an “urgent” need in this entire state are special education positions.

    • Samantha,

      You are spot on, and I have to tell you that the complications of this particular data source are massive. Namely, schools and states don’t report their shortages consistently. What we’re looking at, and working on is estimating shortage based on retiring teachers, age of students (via the census), and the impact of the U.S. economy on those numbers.

      By far, the best data the team has gathered (and continue to evaluate) comes from a report, “Predicting the Need for Newly Hired Teachers in the United States to 2008–09, by William J. Hussar, Economist National Center for Education Statistics”

      That said – I’m responsible for the tech elements! But, I’m definitely going to raise your concerns. Can you also connect with me via email?


  11. Nice work. FYI, oklahoma shows up on the map in green but the gauge shows it as yellow. Bug? Firefox/Windows

  12. Jasper Rijkeboer on February 19, 2010 at 4:39 pm said:

    I read an article last year about how you could create the map in SVG (with colouring) using Python:

    This same technique was also demoed by Simon Willison at the StackOverflow DevDays in Amsterdam. (“Slides”: http://simonwillison.net/2009/talks/devdays-python/)

    Only thing to then is use jquery to animated the selected “slices”.

  13. Learning aside, if you couldn’t deliver and the reason you gave the client had the words “alternative” and “flash” in it, you would be called out on it – and you know it.

    When the alternative lines up with the development of Flash, then it becomes realistic. There are expectations that live outside this narrative-only utopia.

    • Nick,

      You make a good point. I have to admit though that the client is a true partner and was totally game for us to experiment, because we had already executed certificationmap.com (another map-driven ed project).

      I was fully prepared to be called out 😉 but, I also knew that we could do it and do it with budget. The curve ball was the dependency hell I fell into with the extensions. I wanted to share that back with the community, because it is something to consider if you’re more of a frontend person who finds herself feeling like a Unix admin and cursing about her apartment on a Friday night.

      Flash is excellent, I use it a lot, but we did have criteria that made us think jQuery would be the better option.


  14. The dial thing isn’t working for me in IE7 on Windows XP.

  15. Chrissie,

    Thanks so much for the complements! You really took the idea to the next level with this project. I love the speedometer effect!

    • Joel,

      Am humbled. You guys did a smashing job, I don’t think we executed as well as you did, but for a phase 1 we had a great time, learned from mistakes, and owe you for providing the inspiration.

      Paths less traveled are a bit less risky when great devs like yourself have shared lessons learned.

      With gratitude,

  16. Having read through all of this and your criteria involved, I’m still left wondering why you went this route rather than one of the free, off-the-shelf flash packages like ammaps?

    • Bill,

      We did look at a few off the shelf packages, and the only reason we didn’t use ammaps (as just one example) is that we wanted to try to build it ourselves and really did want to experiment with jQuery as a Flash alternative.

      Another project of our’s http://www.certificationmap.com uses ammaps, and it’s great, but we wanted to try a different approach.

      Would I do it again? Ummmmm . . . . Well, let’s say I hope some of my mistakes teach me and others that there are better approaches!


Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop