Yahoo Maps Collaboration using Flex and BlazeDS

Two years ago, I wrote a simple Google Maps collaboration example. The Flex application listened to Google Maps events to synchronize maps between different users. It also added nice collaboration features such as videoconferencing and a collaborative whiteboard overlaid on top of the map. In addition to demonstrating the real-time messaging capabilities of Flex, this application also illustrated Flex/Ajax integration using External Interface.

Two recent events prompted me to revisit this sample:

1. Yahoo recently released an ActionScript 3 API for Yahoo Maps.
2. Adobe recently released the Remoting and Messaging features of LiveCycle Data Services as an Open Source project named BlazeDS.

So, I updated the sample to work with the Yahoo Maps ActionScript API and BlazeDS (or LCDS). No need to communicate between Ajax and Flex in this version since the rendering of the map is entirely done within the Flex application.

Testing the hosted version

Disclaimer: I’m currently hosting the application on the server I use to host this blog (basic PHP and Tomcat hosting plan). I don’t know much about the characteristics of my server, but I’m probably sharing it with a few dozens of other domains and the resources allocated to me are obviously limited in that shared environment. This is clearly not the ideal environment to host a potentially large scale real time application and I’m investigating other hosting solutions. In the meantime, if you experience difficulties running the app, you can install it locally using the instructions provided below (in “Local installation instructions”). The hosted version tries to connect using RTMP by default (available only as part of LCDS) and falls back to “long AMF polling” or regular AMF polling if the RTMP connection fails.

1. Access http://coenraets.org/maprooms/maprooms.html on two different machines or in two browser windows on the same machine.
2. Make sure you logon with two different user names and the same room name.
3. Move the map in one browser and notice that the position of the map is synchronized in the other browser.
4. You can also search an address in one browser and the resulting map position will appear in the two browsers.
5. The zoom level and the map type are also synchronized between users.
6. Click the Map Sharing button in one browser, pick a color to draw on the map (upper left corner), and start drawing.

Note: you can right-click the application and select View Source or click here to see the source code of the application.

Local installation instructions:

1. Install BlazeDS. You can download the BlazeDS turnkey server (a version of Tomcat with BlazeDS preinstalled) here.
2. Open {blazeds-install-dir}/tomcat/webapps/samples/WEB-INF/flex/services-config.xml and add an AMF long polling channel defined as follows:

   <channel-definition id="my-longpolling-amf" class="mx.messaging.channels.AMFChannel">
   	<endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amflongpolling" class="flex.messaging.endpoints.AMFEndpoint"/>
   	<properties>
   		<polling-enabled>true</polling-enabled>
   		<polling-interval-seconds>5</polling-interval-seconds>
   		<wait-interval-millis>60000</wait-interval-millis>
   		<client-wait-interval-millis>1</client-wait-interval-millis>
   		<max-waiting-poll-requests>200</max-waiting-poll-requests>
   	</properties>
   </channel-definition>
   

3. Open WEB-INF/messaging-config.xml and add the following destination:

   <destination id="flexmaps">
   	<properties>
   		<server>
   			<allow-subtopics>true</allow-subtopics>
   			<subtopic-separator>.</subtopic-separator>
   		</server>
   	</properties>
   	<channels>
   		<channel ref="my-longpolling-amf"/>
   		<channel ref="my-polling-amf"/>
   	</channels>
   </destination>
   

4. (Re)start the BlazeDS turnkey server.
5. Download the source code of the Yahoo Maps Application here.
6. Create a Flex Builder project for the Flex application (maprooms). Make sure you configure your Flex Builder project to work with BlazeDS. To read instructions on how to set up a Flex Builder project that works with BlazeDS, make sure your BlazeDS turnkey server is started, and click here.
7. Download the Yahoo Maps ActionScript 3 API here, and add YahooMap.swc in the libs folder of your project.
8. Get a Yahoo API key here and assign it to the appid variable in MapArea.mxml.
9. Compile the application.
10. Open the Flex application in two browser windows (to simulate two users in different locations) and test the application as described above (in “Testing the hosted version”).