If you had a map and you could show it to anyone, what would you put on it?

These days, maps are playing a big part in the development of social media. Imagine you were to run an event, or make a journey around the world, how could you represent it online? How could you help people to find out where you are, to know what you’re doing, or even to see what you’re seeing?

As you can imagine, interactive web maps and location-based activities are not just useful for looking up addresses. We can now assign practically any piece of online content to a map, including videos, photos or location-based conversations. At last, the web doesn’t have to be so geographically anonymous anymore.

Everyone has different needs and interests, so their information might be organised in different ways: people such as film buffs, chess enthusiasts, or parents looking for baby groups might all want to find out about related activities in their local area, and web mapping can help.

Interactive maps in action

Dharmafly recently created interactive maps for EastHampshire.org, partnering on the project with Brighton-based Callender Creates.

As a website for residents and visitors to East Hampshire, it offers information about community groups, news and local events. On the interactive map, you can look at up-to-date information and find out where it’s going on at exactly the same time.

Harnessing the social web

Rather than reinventing the wheel and creating a brand new, separate events engine, EastHampshire.org is hooked into Upcoming, a social network website for sharing events.

When an Upcoming user creates a new East Hampshire event, it is automatically pulled into EastHampshire.org, and the same happens in reverse. This stream of events is fed directly into the interactive map, allowing the content to stay fresh, relevant and up-to-date.

Other mapping projects we’ve worked on

We like mapping projects. Here are a few others:

• Talking America, where we charted a BBC bus tour across America, as it gathered on-the-streets opinions in the run-up to this year’s momentous US Elections.
• Bangladesh River Journey for BBC World Service, where we created a map to track the journalists as they investigated how climate change has a direct effect on people’s lives throughout Bangladesh.
• Location-Based Services, an article for Opera about the use of mapping and geographical tools on the web.

So, if you had a map, what would you put on it?

URL: bbc.co.uk/worldservice/talkingamerica

Excitingly, not long after we built the award-winning Bangladesh River Journey mini-site for the BBC World Service, we were asked for another helping of social media expertise.

What is it?

Talking America is a trail-blazing social media campaign that we’re proud to have worked on. This time, it’s a live site that tracks the World Service crew as they journey across America in a social media bus.

Their big aim? In the eloquent words of Ros Atkins:

“This bus trip is our attempt to paint a detailed picture of America ahead of the election in November. We also want to create conversations between Americans and everyone else…”

(Ros Atkins, BBC crew member on the Talking America bus).

What you can do with social media

Talking America uses maps, pictures, video, audio podcasts, blog posts and other user-generated snippets to bring a journey alive. In this case, we built a mini content-management system for the journalists, with a system to pull in the latest Flickr photos from the bus and a colourful map to display it all.

In charming technological terms, we call it a “geo-mashup.” Namely, a smooth way of automatically pulling together time and location-based information into one online multimedia bundle. The outcome of this is the ability to track the reporters over time and in different contexts.

A bit for the technically brained

The mapping application uses jQuery and Sumo, which is a JavaScript microformats parser written by Dan Webb, who also worked on the front-end of the site. If you look at the site without JavaScript, you’ll see that all the info is already present on the page, written up in microformats and ready to be plotted on the map.

And they’re off…

URL: www.bbc.co.uk/worldservice/bangladeshboat

Phew! We’ve been busy these last three weeks! From commission to launch in just 12 working days (and nights), Dharmafly has built a site for the BBC that explores social media and cutting edge Web technologies…

The Bangladesh River Journey is a mashup of posts from a BBC World Service trip to track the effects of climate change in Bangladesh. The trip lasts a month, with photos being posted to Flickr, messages sent to Twitter and journal entries made on the World Service site. The mashup puts all these posts on to a map, letting you navigate around and follow the trip.

The journalists are equipped with a GPS navigation device. Each time they visit a new location, they post their co-ordinates to the Twitter stream (e.g. this post). Our system then logs the coordinates and applies them to every photo, tweet and diary entry until the next location.

In addition to what you see in the browser, there are a number of gems hidden under the hood: microformats, geoRSS and an API. (Non-techie folk may happily skip this and proceed straight to comments :)

Microformats

Microformats are new, developing standards for adding extra meaning to the HTML of a web page. They create all sorts of possibilities for software (from search engines to browsers) to interact with the content in innovative and useful ways.

The HTML for each Twitter, Flickr and diary post in the Bangladesh River Journey is written using the hAtom microformat. This means, for example, that an RSS feed can be generated directly from the HTML on the page.

If you use the Firefox browser, you can explore other microformats on the Bangladesh Boat site, with the excellent Operator extension. You’ll find xFolk bookmarks, geo locations, hCalendar events, hCard contacts, xoxo lists and tagged links:

GeoRSS

The site’s RSS feed allows users to stay up-to-date with new posts, without needing to re-visit the site (we talked about using RSS in a previous post).

The feed is encoded with the geo coordinates of each post (this is called GeoRSS). Some interesting things can then be done with the feed, such as plotting it straight on to Google Maps:

API

Part of the task was to build an API – a way for web developers to access the data in the system, to create their own mashup applications. This will be promoted through BBC Backstage – the BBC’s hub for exploring new media technology. More about this soon…

Update: The Bangladesh River Journey API is now live on BBC Backstage. Inspired by Google’s addition of a Greasemonkey API to Gmail (via), we added an experimental Greasemonkey API to the Bangladesh River Journey site.

Update: We added KML as a data format to the API. This allows you, for example, to view the entire journey of posts in mapping applications like Google Earth.

Dharmafly & the BBC

It has been fantastic working with the BBC crew. Everyone has shown their good-nature and team-spirit… and nothing but excitement for exploring new forms of media in reporting events that matter to the world.

Our own team was:

• Me, as technical director and coder of HTML, JavaScript and additional CSS
• Annesley, who authored the rock-solid PHP / XSL back-end
• Pete, who scripted the water-tight CSS theme
• Mikel, who contributed mapping strategy and the out-of-the-box balloons

With thanks to Toby Travis, for JavaScript inspiration.

Update: This Project Won Awards

14th May, 2008

The Bangladesh River Journey was declared a Webby Awards Honoree and won the Sony Radio Multiplatform Award. See our later blog post for more information.