For a university exam (Human Computer Interaction) I’m developing a realtime shared map that you can use to plan a travel with your friends in realtime while you chat with them.

The user interface

The map will be interactive and it will have some shared widgets that will provide the user with:

• user roster (who’s online)
• chat window
• shared landmarks that users can put and move on the map
• shared post-it notes associated with landmarks
• flickr widget that can be moved across the page and will show the pictures related to that place
• a shared wiki widget where you can put notes, drag landmarks to store interesting places, drag pictures from the flickr widget

All these widgets are shared across the user, their position and their content gets replicated on the browsers in realtime and every user can interact and change the information.

The architecture

The application logic is composed of two entities: the map application and the agent application.

The map application

The map application will run completely on the user’s browser, his responsibilities are:

• Manage the interface (the map and the widgets) and the interaction with the user
• Forward the interaction events to the agent application
• Update the interface based on the incoming events from the agent application (i.e. when other users interact with the map)

The agent application

The agent application can run anywhere as long at it can have an XMPP link, his responsibilities are:

• Keep a consistent state of the map and the widgets (map position, zoom level, landmarks positions, wiki data, etc…)
• Update the map status based on the messages coming from the users
• Forward the map updates to the users

Technologies involved

Frontend

The user interface is created from HTML and javascript is used to manage the page updates and the interaction events.
A google map is used as the main page widget and other small windows are created on the map and can be dragged over the page by the user.

Messaging infrastructure

The comunication link between the map application and the agent application is created by using the XMPP4MOZ extension for Firefox.
The map application encapsulates JSON objects describing map events into XMPP messages that are sent to the agent application in realtime.
The map application also receives JSON objects coming from the agent application describing map updates.
Any XMPP (Jabber) account can be used for users and the agent. I used Google Mail accounts that can be used with the very fast and reliable Google Talk XMPP server.

Backend

The backend application (agent application) is made in Ruby using the XMPP4R to manage the XMPP communication link and the Ruby JSON library to encode and decode JSON objects.
The backend will keep the status of the map and the widgets so everytime a new user joins the frontend can show the current status of the map.

The prototype

I was able to hack a quick prototype of the frontend and the backend on Friday afternoon.
Everything is working fine so far.
I was able to run the agent application and two users on the map application each on one different laptop (yeah I have three laptops… actually four :D) and watching map moving in realtime from one laptop to the other.
I also had time to create a simple widget that enables a user to put landmarks on the map that can be dragged around by any user. The agent keeps the position of the map and of each landmark so when a new user logs in he will see the landmarks created by other users and he will be able to interact with them.

What’s next

I want to refactor a bit the frontend code to separate the core of the application that manages the messaging with the backend with the widgets that let the user interact with the map. Ideally you should be able to plug functionality into the core application by including self contained modules.
I’ll plan to share some of the code once I feel it’s kinda useful…