mattwaite.com

Warning: long post ahead.

Recently, I argued that some journalists should learn how to program. Here’s a practical example why.

Today, my employer published a story about where the tens of thousands of people who came to Tampa Bay during the boom years came from. The story and the data analysis are the work of graphic artist Dana Oppenheim, who is now fully baptized in the church of Computer-Assisted Reporting. I just sorta played data consultant on this one, and helped put together an interactive map of the data.

And that brings us to our example. People from all over move here to the Tampa Bay area, involving hundreds of counties across the country. So, if you want to create a data point for each county and display that data, how do you do it?

To this point, all of my plotting points in Google Maps has used an XML file that gets loaded when the user loads the map (examples here, here and here). But I’ve found that if your XML file gets too big, Google Maps times it out and you get nothing but an error message. How big is too big? I’ve never figured it out, but experience has been that anything over about 50 points is starting to push it.

So what to do with almost 300? Well, thanks to some help from Chase Davis, I solved this with some javascript (that I honestly barely understand).

Warning: Code ahead. If you break out in hives when you see code, I suggest you leave now.

The problem with XML is that you need lots of tags to do not much, so all that text starts to bloat up your file and make it take longer for Google to fetch it, process it and send it back. So we need to pare that down. How? First, stop using XML. Second, put all that information into an array.

First, I learned most of what I know about Google Maps here. It’s a fantastic resource if you want to try your hand at doing this yourself.

The first thing you need to do in your Google Maps javascript is you need to create a function that makes the marker and does something when you click on a marker. You do that like this:

if (GBrowserIsCompatible()) {
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, “click”, function() {
marker.openInfoWindowHtml(html);
});
return marker;
}

The key bit here is the line that begins var marker = new GMarker(point); That says create a variable called marker and populates it with something Google Maps is looking for called GMarker and then a variable called point, which will have data in it eventually.
Okay, now we set up the map:

var map = new GMap2(document.getElementById(”map”));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(28.21306, -82.44556), 9);
var bounds = new GLatLngBounds();

Most of that is just cut and paste from the documenation. It just sets up the map how you want it and where you want it centered (which in this case is the parking lot of the St. Petersburg Times office, I think).

Now, the array. What this is going to do is create a variable and stuff it with data that we can then parse out later into the bits we need to make a marker.

points=[[41.8670805482, -71.5783715633, ” Providence County, Rhode Island”],

[40.6586398246, -119.656533261, ” Washoe County, Nevada”]];

Okay, looks nasty, doesn’t it? For simplicity, I’ve only included two rows of the array so you get the bits you need. First, name the variable (points) and then you enclose the array in a bracket ( [ ) and then each line is enclosed in a bracket ([ stuff ]). Each line that isn’t the last one ends with a comma, and the last line of the array ends with a semi-colon. Those are important. It tells javascript where each line begins and ends, and where the array begins and ends.

Now, we parse the array to make our markers:

for(var i = 0; i
var point = new GLatLng(points[i][0], points[i][1]);
map.addOverlay(createMarker(point, points[i][2], points[i][3]));
bounds.extend(point);
}

The English verison of this goes like this: The first line says for each line in the variable, starting with the first line, do the following. The second line says create the variable point (remember point from above?), and here’s what’s in point: a new GLatLng, the latitude and longitude that Google Maps needs to make a point, and those come from parsing out the variable points. If you think of everything in points like a spreadsheet, where the latitude is column A, and longitude is column B, and the text for the marker is column C, this makes sense. The one trick that I had to learn with programming languages is that the first thing in anything is not 1, but zero. So the new GLatLng(points[i][0], points[i][1]) means that new GLatLng is whatever is in the current row of points (that’s the i bit) in the first and second column (or 0 and 1 in javascript).

The next line creates the marker and the box that pops up when you click a marker. Again, it’s parsing bits of points to get what we want. First is point, which is the lat/lon pair we created above, and then columns 3 and 4 of the array. But wait, you’re saying, you don’t have a column four in your array. You’re right. It’s there in case I want to add custom markers. I could insert them in the fourth position. I didn’t here, and Google Maps interprets the lack of a marker name there to mean use the default.

One last bit, taken directly from the Google Maps API Tutorial is this clever piece that takes all your points and figures out the center of them, and what the zoom level should be to take them all in, and then sets your zoom and center to that point.

map.setZoom(map.getBoundsZoomLevel(bounds));

var clat = (bounds.getNorthEast().lat() + bounds.getSouthWest().lat()) /2;
var clng = (bounds.getNorthEast().lng() + bounds.getSouthWest().lng()) /2;
map.setCenter(new GLatLng(clat,clng));
};

There, that’s all the javascript needed to create the interactive map.

Now, some straw-man questions I’m going to ask and answer: Did that require a Captial P programmer to do? No. Does every journalist in every news organization need to know how to do that? No. Was I trained to do that? No. Was I asked by my employer to do that? No.

Does it make the web presentation better? I sure think so. It takes advantage of what the web can do — let people see what they want to see. The power of this particular map is that everyone in west-central Florida who is from somewhere else — which is just about everyone — can see the numbers on where they came from. We could never hope to do that in print.

But you can see now that when a journalist with data wants to get that data onto the web how a little programming can go a long way. And, the beautiful part is, once you get this working once, you can reuse it over and over and over again. If you want to try your hand at this, pull up the source on my example and use it for your own (with your own API key, of course).