Here’s a short screencast of a quick demo of the realtime shared Google Map based on XMPP4MOZ that I’m working on.

The demo shows some of the current features:

• Users can connect to the agent and the map updates with the current location and zoom level. The agent keeps the status of map, landmarks and chat so if a user connects after other users have updated the map he can see the last map status. This also happens if all the users disconnects, the agent keeps the map so when they connect again they can start from what they leaved.
• Synchronization features. Users can move and zoom the map and other see that actions in realtime. Users can chat toghether and they can also add markers on the map and drag them around. All the user’s maps updates in realtime.
• The current application is very modular, the core abstracts the comunication with the agent and manages the creation and initialization of the modules so it’s very easy to create new modules and add functionality.
• The current application consists of application core, movement and zoom sync module, a chat module, landmark module.

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 ) 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…