Google Maps Collaboration Using Google’s New ActionScript API, Flex, and BlazeDS


Google recently released the Google Maps API for Flash. I took the opportunity to create a Google version of the MapRooms sample application I posted recently. MapRooms works like Chat Rooms. You can create a room, or join an existing one. In addition to chatting, MapRooms allows you to collaborate on a map: the application leverages the real time capabilities of BlazeDS or LCDS to provide map synchronization between users in the room, and allow you to “whiteboard” on top of a map.

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/apps/gmaprooms/gmaprooms.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 “Whiteboard” 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="gmaprooms">
	<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 Google Maps Application here.
  6. Create a Flex Builder project for the Flex application (gmaprooms). 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 Google Maps ActionScript 3 API here, and add the swc file in the libs folder of your project.
  8. Get a Google Maps API key and assign it to map.key in the initMap() function 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”).



May 23, 2008 | Filed Under BlazeDS, Collaboration, Flex, LCDS 
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • bodytext
  • del.icio.us
  • Facebook
  • Google
  • description
  • NewsVine
  • Slashdot
  • Technorati
  • StumbleUpon

Comments

28 Responses to “Google Maps Collaboration Using Google’s New ActionScript API, Flex, and BlazeDS”

  1. Craig on May 23rd, 2008 6:11 pm

    Way to go!

  2. Kenneth on May 23rd, 2008 11:42 pm

    This is so cool!

  3. Mingo on May 25th, 2008 11:03 pm

    WOW !!! I love you , Christophe , really great Applications !!!

  4. Mingo on May 25th, 2008 11:46 pm

    it seems slow,very slow, i don’t know why ?

  5. christophe on May 26th, 2008 6:12 am

    Mingo, 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”).

  6. Blog Xebia France - Revue de Presse Xebia on May 26th, 2008 11:14 am

    [...] Coenraets, Senior Technical Evangelist chez Adobe, a développé à l’aide de cette API un outil de “cartes collaboratives” qui permet de commenter à plusieurs dans une “chat room” une carte Google Maps en lui ajoutant [...]

  7. Pamela Fox on May 26th, 2008 1:03 pm

    This is ridiculously cool. The one thing I would say is that it’s not clear the difference between the “Shared map” and the “whiteboard” map.

    Also noticed that if I geocode after drawing, the drawing travels with me.

  8. gMap Rooms, chats en Google Maps TecnoMaps.com on May 29th, 2008 9:32 am

    [...] Sitio Web: MapRooms [...]

  9. RenaLId.com :: Revue du Geoweb de la semaine on June 1st, 2008 8:12 am

    [...] mashup avec Google Maps API Flash MapRooms est un mashup créé par Christophe Coenraets à partir de Google Maps API Flash. Il propose des "Chat Rooms" accompagnées [...]

  10. Flex, Google Maps & BlazeDS : mashup powa on June 7th, 2008 7:44 am

    [...] nouvel API de google maps dédié à Flash simplifie la vie du développeur et voici cette démonstration avec BlazeDS, le serveur Adobe Open source de Push Data - c’est le serveur qui pousse les [...]

  11. aarpprovideronline on June 20th, 2008 12:10 am

    aarpprovideronline…

    incumbent!therewith parenthetical,sophomores …

  12. Abhijeet on June 21st, 2008 2:02 pm

    That’s really looking cool, need to try it asap. Most probably tomorrow, feeling sleepy now.

  13. Google Maps Developer Video & Links Roundup | geo2web.com on June 23rd, 2008 3:03 am

    [...] Google Maps Collaboration Using Google’s New ActionScript API, Flex, and BlazeDSa> [...]

  14. Kevin on June 27th, 2008 3:24 pm

    Please keep us updated with regard to your search for a good hosting environment. I’ve done a little googling and found only one webhost that advertises BlazeDS… Isn’t that the reason Adobe released BlazeDS? So web hosts would offer it as part of hosting solutions? I mean developers already have LCDS ES for development… ya know…

  15. Stefan Richter on July 8th, 2008 3:52 am

    Hi Christophe,
    I’ve ported your app to run on FMS/Wowza/Red5: http://www.flashcomguru.com/index.cfm/2008/7/7/map-rooms-ported

    Best wishes,

    Stefan

  16. SOG knives on July 17th, 2008 3:01 pm

    SOG knives…

    Interesting ideas… I wonder how the Hollywood media would portray this?…

  17. gratis internet texas holdem on July 20th, 2008 5:18 pm

    gratis internet texas holdem…

    beggary aerials abolishers?electrocuting mainframe Demeter …

  18. Jan on August 1st, 2008 8:03 am

    Hi Christophe,

    can you please post tha Java-Files for the Backend of this Application? This would help me to understand the communication between front- and back-end.

    Thanks
    Jan

  19. Heath Brown on August 6th, 2008 3:41 pm

    I really love your application look and feel. Where can I go to learn how to do that with Flex and AIR?

    I’ve got my setting for chrome to “none” but I still get standard borders and title bars from a windows application. How do I make it borderless like your cool looking apps?

  20. Araba, Yarış Oyunları on August 6th, 2008 5:48 pm

    Güzel bilgiler…Teşekkürler…

  21. Christina on August 27th, 2008 3:13 pm

    Hi Christophe,

    I am trying to set up blazeDS on a remote server, and I am not sure how to configure the compiler (-services) and server settings (root folder) to make it work. I would appreciate any pointers you can give me. Thanks a lot!

    Christina

  22. Billigflug Kuba on August 28th, 2008 10:10 am

    Hi Christophe,

    this sounds to be a awesome Application.
    Is it possible to release a “just click an run for stupid users like me” version?

  23. Cargo Freight Exchange on September 8th, 2008 8:33 am

    Thank you for great information.

  24. Sreekanth on September 10th, 2008 9:41 am

    Hi Christhope,

    This is really nice application.

  25. Indicator » Blog Archive » Google Maps Flash API on September 24th, 2008 9:15 am

    [...] Links: The Google Maps Flash API An Example Application [...]

  26. Pamela Fox on September 25th, 2008 12:28 pm

    Hey there–

    This is awesome. Would you be amenable to having it linked from the Maps API documentation?

    - pamela

  27. Cornflake on October 22nd, 2008 9:49 pm

    That’s funny… The area I live in looks almost exactly like that. Street name is Canal St. instead Channel. :)

  28. Asha on November 13th, 2008 4:36 pm

    This is a great application. We are exploring the possibility of building something like this for our business. Are you available for phone consultation to guide us with the architecture and technology.

Leave a Reply