Post navigation

Mistakes Were Made: Making Interactive Maps With jQuery

(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.

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.

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.

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.

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?

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

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.

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.

Hello! We're the teachers here at Treehouse. We produce video courses on everything from web design and web development to iOS and business skills. You can browse our full library of content to find the course that's right for you.

In the meantime, explore the free features, tips, tricks and videos here on our blog. Tell us what you think, we'd love to chat: blog@teamtreehouse.com

Stay Updated

Sign up for our newsletter, and we'll send you news and tutorials
on web design, coding, business, and more! You'll also receive these
great gifts:

checkArt and the Web: Line, Shape, and Form - An eBook by Treehouse Teacher Nick Pettit.

checkOn Freelancing - An audiobook about running your own business by Simon Collison.

Swift is a new programming language created by Apple to program iOS apps. If you are new to programming or to Swift then this course is for you. Learn about programming concepts like: variables, types, collections and control structures.

Ruby is a programming language with a focus on simplicity and productivity, and it's used to create some of the biggest websites in the world. Learn how to work with Ruby and write simple Ruby programs in this introductory course.

Interested in creating Android apps? Learn the Java programming language, a tool for Android development called Android Studio, and some very basic concepts of the Android Software Development Kit, or SDK.

Bring your big idea to life! Learn how to start a company on the right foot with an introduction to basic business concepts, including corporate structure, marketing, finance, and accounting. Then you’re ready for more advanced business strategies.