This post is a tutorial on how to make a simple photo gallery that also displays locations on a Google map. It’s intended for the Wired Journalists community. If you’d like to learn how to do more cool journalism projects with the Web, sign up now!

One of The Forum’s photographers came to me with a project at the beginning of the year. She was starting a weekly photo column in the paper, snapshots of people in the community and she wondered what we could do to give it a good presentation online.

“Let’s put them on a map!”

Here’s the result.

I always argue for more information and I tend to see photo captions with locations or approximate locations. That’s data. That’s very useful data when you imagine it in relation to other photos.

Since Ann’s project was going to be weekly, I figured we add the “where” data as another way to discover the photos. Over time, you’d get a broader picture of how the images relate to one another.

While I argue for putting more information out there for your readers, I also don’t like asking the development team for help programming one-off projects (we have a small team and this was a “want to have” project not a “need to have”). The nice thing about this project is that we can host nearly all the media and have complete control over the data in Google’s KML file so if we chose to port it for deeper integration into our sites, we could do that rather painlessly.

So, I went out in search of free mapping tools. This project only uses My Maps from Google and  MapChannels.

Let’s get to the nuts and bolts.

First, you need photos, captions and addresses. You’ll also need a Google account and a free account at MapChannels.

Upload all your photos to your host and make note of their URLs. You could even upload them to a free photo service like flickr. They just need to be online, because Google Maps doesn’t offer hosting. Once you get all that together head over to Google Maps.

Click on the My Maps tab and create a new map.

Enter the address of the first photo.  In the bubble that shows up with the pin, there’s a “Save to My Maps” link. Click it and select the map where you’d like to save the location. The bubble will turn into a couple of fields.

Click the image button on the bubble and paste in the photo URL that corresponds to the location you’ve set. You can resize photos under the Edit HTML tab. Add text, HTML (embed flash videos too!), add links, etc. You can change the color or type of the pin by clicking on the pin in the bubble. Google has quite a few predetermined pins, but you can also add your own 64×64 pixel pin here if you’d like.

Repeat for all your photos.

Now here, if you want to embed the map as is to your site, just click the “Link to this page” above the map on the right side. A window will appear with two options, one of which is an iframe you can paste into the page.

For what we’re trying to accomplish, I’m not to thrilled with the result.  The pins don’t tell you much about their contents.

That’s what MapChannels helps us with. Before we head over there, right click / copy link location of the “View in Google Earth” link. You’ll need that in a minute or two.

Don’t be turned off by how hideous the MapChannels site looks. The tools it has are pretty powerful and they’re free. Register for an account if you haven’t already.

Once logged in, click the “Create New Map Channel” link (upper right side of the page; it’s yellow).

In the data source field, paste the “View in Google Earth” link you saved earlier.

Give your map channel a name in the second field, agree to the terms and conditions and you’re almost there.

Here you’ll find tons of features. Play around with them to get your desired look.

For the in view map linked at the top of this article, all I did was changed the sidebar width, making it wide enough for the content and change “Info Window Type” to Zoom and Sidebar. I also deselected all the map channel links in the sidebar.

Copy the iframe code to your site and you’re done. Simple as that.

You can read the tutorials here for more on how to host all the scripts and other collateral on your own site, giving you some room to monkey with the functions at a more advanced level.

Some people have asked me how I can maintain so much presence online, yet get so much work done or have time for anything else. (secret: I’m online a lot more than I should be).

Another secret: I like to think of myself as an information traffic cop. I take in a ton of information via RSS and love rerouting feeds for personal and professional uses. From my reader as of this post:

From your 117 subscriptions, over the last 30 days you read 4,116 items, starred 44 items, shared 115 items, and emailed 1 items.

Granted, most of those “reads” come from photos on flickr, ffffound and several other photo blogs. Another large chunk comes from hypem.com and I don’t listen to all the music. But still. That’s a ton of information coming and going.

Reader has cool features beyond simply reading content. Out of the box, you can share items with Google Talk friends, email and mashup feeds and items into personal tagging structures and create new RSS feeds based on those mashups. With or without knowing it, you create a personal, searchable database of everything you’re subscribed to, which by the way, comes in super handy when you’re like me. (I don’t remember everything, rather vague pieces of information I recall completely through personal database searching).

Anyway, here’s a fun project using only Google Reader, Firefox and some easy to install Greasemonkey scripts. We’re going to turn Reader into a multi-platform CMS (Content Management System). Basically, think AP Exchange, but you control the the incoming feeds and there’s no copy/paste to export to a platform.

Our platforms will be a link blog, Facebook, twitter, del.icio.us and a tumblr blog.

If you don’t have Firefox with Greasemonkey installed, go get Firefox, install it and then add the Greasemonkey plug in.  If you don’t have a Google account, sing up for one. You don’t necessarily need Facebook, twitter, del.icio.us and/or tumblr accounts, but get them (free!) so you can follow along.

Fire up firefox and install these scripts at userscripts.org:

Treader (allows you to post to del.icio.us and twitter from Reader)

Tumblr on Google Reader (allows you to post to your tumblr blog from Reader)

Facebook Sharer + Google Reader (allows you to share items from Reader to Facebook)

In Reader, use the Add subscription tool on the left to, well, add subscriptions. Do a search for your favorite baseball team. Or your favorite newspaper. Most likely you’ll find some stuff you’ll want to read and stuff you’ll want to share.

Once you start importing feeds, you’ll see some buttons at the bottom of each item, allowing you to add a star, share, email, add tags, share to Facebook and share on tumblr.

Clicking the star button works just the same as in Gmail. You can also create a public feed specifically for starred items under settings (and also for any tags you create).

The share button will feed your friends in Gtalk and your link blog new items (don’t worry if you don’t know the address to your link blog, click shared items in the left bar and Google will tell you). If you read something that audience might enjoy, just press Shift + S and Google will do the magic for you. Easy.

More shortkeys: Press ‘j’ to move forward an item in the list, ‘k’ to move back. There are other shortkeys by tying in ‘?’.

While you can always search Reader for an item later, searching all your feeds can be messy. Treader does some cool things. Let’s say you want to bookmark an item via del.icio.us or know some people in your network that might enjoy the item. Press Shift + D. Enter your username, log in and there’s your del.icio.us pop up window. As if you were right on the page, using the del.icio.us plug in.

Treader works similarly for Twitter, too. Shift + T will give you a little Java window to edit the tweet. By default it prompts with the item’s title and a link. Easy.

Shift + T conflicts with the tumblr integration, so we’re going to get into some code to fix that.

In Firefox click Tools >  Greasmonkey > Manage User scripts. Select Tumblr on Google Reader and click the Edit button. A text file with some code should show up.  Don’t get freaked out, we’re just making a quick change. Find this chunk of code:

keyForAction: ‘T’

and change it to:

keyForAction: ‘B’

This will fix any conflicts with Treader and Tumblr. Select an item and press Shift + B at any time to bring up the Share on tumblr window. You can also just click the image to bring this window up.

I know that with tumblr you can select up to five feeds to automatically pull in, but I have somewhat of a problem using a catch all feed for that. I used to feed all my starred items to It’s Randomonium, but have since stopped, since tumblr’s true beauty relies on posting different item types (audio, text, quote, photo, etc.). I like to keep those options available.

Last but not least, if you still have items you’d like to share with people on Facebook, just mash the button and follow the prompts.

Think about that. You’ve just interacted with several sites without ever leaving Google Reader. If you’re a fast keyboard jockey, you could fly through your feeds, sharing items left and right.

I hate to sit here constantly defending Howard Owens but here we are again. Howard recently posted a great little MBO plan to turn Luddite reporters into web savvy journalists. The plan includes super easy things anyone can do in about two weeks if they tried. But I guess the plan was too straight forward, as the comments attracted quite a few nasty trolls (with no sense of irony, either, since they’re reading and participating in blogs).

Anyway. My two cents.

What many of the complainers and trolls there forget (or maybe haven’t taken the time to know): Having a good web site begets a good paper. Publish to the database. From there you can cull the best content for print editions, mobile versions and even broadcast packages. And those are just the obvious ways to reuse your online product. You have real, quantifiable metrics with which to base editorial decisions. You have opportunities to provide breadth of coverage as well as target content to maintain and gain readership. You can optimize your content for your readers. You have opportunities to diversify content. You have opportunity to interact with the public directly (through comments, blogs, twitter, etc.) and indirectly (through site metrics).

Doing nothing different (and that includes reporters, editors, publishers–any level of news management) at a struggling news organization will only lead to the loss of your job and eventually, your paper.

And you know what? I’m sure that your former readers won’t mourn your loss because plenty other sources out there currently take the necessary steps to move in the same direction the readers and advertisers wish to move. Your information is your brand. If your audience doesn’t want the information you’re giving them, then they don’t want your brand.

NONE OF THE THINGS ON HOWARD’S LIST ARE EVEN HARD TO DO. The objectives require hardly any skill beyond tenacity. Your readers are going online and so should you. If you don’t understand what makes the Web different from print, god help you and the audience you’re trying to serve when you think of the Web as simply digital print.

I mean…really? You can’t take the time to learn how to push a single button on a point and shoot camera? You can’t spend the whopping 10 seconds to sign up for twitter and facebook to see what they’re about? You can’t start a free blog (which has no production schedule)? You can’t ask someone how to drag and drop some video clips around on a time line? That’s lazy. Journalism never had room for that kind of laziness or lack of curiosity to begin with and don’t pretend otherwise.

I’m willing to bet that I can think of a use for every single one of the items Howard lists for any beat. Any beat! Here’s your chance. I’ll do the real hard work–thinking–for you. Just tell me what you’re working on either by emailing me with the form on my homepage or in the comments below. Seriously.

A while back I wrote a post containing talking points for building better Web sites with little or no programming.

Well, Christmas comes early because I’m going to show you how to make a simple interface that will automatically update your site with new weather alerts. We’re going to use free data sources, free Web tools and use very, very little HTML and CSS.

Then, we’re going to use Twitter to automatically send out weather alerts to our readers.

Gathering the data and prep work

• For this project, we need data.
• We’ll need a basic understanding of what XML feed is and how we can leverage it. You can learn about it on your own. Just think of it like an email newsletter without the email.
• We’ll also need permission to syndicate the feed on our site and on Twitter. Don’t forget to ask, most people who create the feeds do it knowing it will be used in ways like this.

We’ll also need accounts set up at the following free services:

• Google Reader
• Twitter
• Twitterfeed (and you’ll also need an OpenID account if you don’t have one. I use claimID)
• Feedburner

The goal of this project is to pull in data (news releases, advisories, etc.) from government sources.

For this example, I’m going to use the National Weather Service but, you can use any government feed you find, really. Check to see if your city or county has feeds for anything on their sites. Do some digging. Ask around. Do what journalists do.

In the interest of being hyperlocal, I want to pull in all new results from my county in North Dakota. Thankfully, NWS has feeds for just that:

http://www.weather.gov/alerts/wwarssget.php?zone=NDZ039

Unfortunately, that feed does not validate, which means we have to figure out how to validate it. We could ask them to make a better feed, but chances are that will take time and they may never do it. We’re on a ridiculous deadline here!

Lucky for us, Google has already figured out how to deal with invalid feeds and they also have tools to share items in your reader. With our shiny new Google Reader account, we can add the subscription and stick it into a folder.

Click add subscription, paste the URL to the feed. Once the contents of the feed show up, we can add it to a folder called “weather.”

We need to get the contents of that weather folder out of our reader and into the public arena. To do this, click Settings > Tags. There you’ll see the weather folder. Next to it, there’s the RSS symbol with the word “private.” Click it to make it public.

Google does a few things with it, but all we really care about is the public page:

http://www.google.com/reader/shared/user/11212282270208586940/label/weather

This page has a feed of its own here:

http://www.google.com/reader/public/atom/user/11212282270208586940/label/weather

All that fun, invalid data is now fun valid ATOM data. Not quite squeaky clean, but it works.

By the way, ATOM is just another XML feed specification like RSS. Nothing important to the project. I just like typing ATOM in all caps.

Anyway, now we can move on to the fun stuff.

The fun stuff

Log into Feedburner. We need to burn the new Google Reader feed. While Feedburner has all sorts of fancy tracking and other tools, we only need one: Buzzboost.

Burn the feed. Give it a title and some name. It doesn’t matter. Skip to feed management. In the feed management dashboard, click “publicize” and then “Buzzboost.”

You’ll get a nice little tool to set things how you want. As this is for weather alerts, I really only care about the one most recent post by the weather service and the date. I uncheck all of the boxes except for date and set to display 1 item. Activate!

The next page will give you a little snippet of code like this:


<script src=”http://feeds.feedburner.com/cassweather?format=sigpro” type=”text/javascript” ></script><noscript><p>Subscribe to RSS headline updates from: <a href=”http://feeds.feedburner.com/cassweather”></a><br />Powered by FeedBurner</p>


Paste the script into the page on your site, where you’d like it to appear. You can adjust the look of it with CSS:

Every time the weather service updates their alerts, this script outputs the new changes, too.

You can do this with any valid feeds. My audio, suggested reading and del.icio.us pages on this blog are all fed this way.

I’ve also done quick projects for my job, if you want to see it in a more newsy context. Product Recalls is just one example.

On to twitter.

Log into twitterfeed.com. Set up a new twitter feed by entering your twitter username and password. Use the same Google feed we used earlier. Plop in the settings you’d like and have twitterfeed update every 30 minutes and pop! You’re done.

Like every project built on the cheap there are downsides to using twitterfeed and twitter, especially for this project. 1) Users need to have a twitter account to sign up for the weather alerts. Registration is always a hurdle. 2) twitterfeed will only check for updates every 30 minutes which isn’t very helpful when there’s a tornado already on your street.

Twitter works better for breaking news, I think, or for infrequent updates. The New York Times has a twitter strategy for all of it’s sections if you need an example.

Even if you don’t have these accounts set up, this project takes almost no time or skill. Yet, it’s useful and once it’s done, it’s done forever. There’s no follow up management involved at all.

You can have this done in under an hour. Easy. Just start hunting for feeds. Get creative and let me know how you’re using this stuff.

Google Maps released a new feature Thursday, My Maps. The service lets you draw lines and shapes over the Google maps, add markers, add whatever HTML you want to the marker bubbles and then you can spit out into a KML file. You can then dump the
KML data into Google Earth or another Google Map for your Web site, with a little knowledge of the Google Map API.

My Maps makes drawing on a map dead easy, and as soon as Google adds features to let you easily geo-code tabular data and then embed My Maps into your Web site, it will be the killer map app for Web journalists.

This got me thinking about a few things.

First, programmers that understand journalism, and journalists that understand programming are few and far between, which causes a problem for news outlets looking to expand their Web operations.

Second, I’ve said it before, programming takes time and it’s never a finished product, which causes a fundamental problem for those who work on tight deadlines.

Lastly, where does the value of information lie for news gatherers?

First things first: Journo-programming

Ask a programmer to make something by a certain time and they’ll tell you it can be done. Eternal optimists, most of them, they often don’t know how long something will take to build. Building to a quality standard journalists need might not be an option on a Friday afternoon whim for an 12 p.m. deadline Sunday.

That’s a fact of life behind a computer.

The developers I work with like to ask “why build something new, when it has already been done?” They “steal” code from each other frequently, but they make a point on a grander scale.

Page designers don’t change their styles every week and they certainly don’t create their own fonts. So why should programmers start from scratch with every product?

The Internet does two things well: It organizes and displays data and it creates efficiencies.

When creating something that will only be used once or a few times by the news, why build it all from scratch if you don’t need to?

Time wasters

Obviously building something new and populating it with data takes longer than populating something already created with data.

There are hundreds–thousands even–of Web products out there. Many of them can be leveraged, for free, to suit journalistic needs without having to build the product from the ground up.

Check out the Bakersfield site. Their map section isn’t built from coders manipulating the Google API. They’re leveraging sites like Zeemaps and Quikmaps to quickly create their maps. They even use YouTube for video on occasion.

They hand over the information they gather to these services and in turn, basically wrap their sites around the embed codes or iframes the services kick out.

Which brings us to:

The catch

Just what the crunk is the value of journalism? Is controlling the final product and copyright or the actual news gathering process more important?

I’m starting to lean more towards the latter. Data is usually freely available to anyone with the motivation (or gall) to ask for it.

Journalists basically just gather information, parse it and put it in a relevant context for their readers. That’s why we read newspapers. That’s why we watch the 6 p.m. news. We’re not particularly interested in the fact that you control the information you gather. We care about the context and relevance of said information.

Traditional media has this weird fascination with controlling the information it gathers. News gathering organizations rarely offer full-text RSS feeds for this reason. They want eyeballs on their sites; Withholding all the information from your feed reader gives them some semblance of control.

So handing over data to third parties drives news business people up the wall. They see it as giving their property away.

I’d argue that information is hardly the property of news media. Their value is the context and analysis of the information. Many YouTube videos are pointless. Clicking around the site, many Zeemaps don’t make much sense either. But that’s because you’re not seeing them in the context of their creation. They are created with the mindset that context will be divvied somewhere else.

Sure, there’s the greater catch that third party Web services often fall by the wayside, which can hurt the value of archived news behind pay walls. I don’t think its enough of a problem, though, considering the money saved from having developers work more on projects with higher returns on investment than news.

News has a terribly short shelf life to spend working on projects that peak in views in a day or two.