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”).
  • Way to go!

  • This is so cool!

  • Mingo

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

  • Mingo

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

  • 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”).

  • Pingback: Blog Xebia France - Revue de Presse Xebia()

  • 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.

  • Pingback: gMap Rooms, chats en Google Maps TecnoMaps.com()

  • Pingback: RenaLId.com :: Revue du Geoweb de la semaine()

  • Pingback: Flex, Google Maps & BlazeDS : mashup powa()

  • Pingback: aarpprovideronline()

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

  • Pingback: Google Maps Developer Video & Links Roundup | geo2web.com()

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

  • 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

  • Pingback: SOG knives()

  • Pingback: gratis internet texas holdem()

  • Jan

    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

  • Heath Brown

    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?

  • Güzel bilgiler…Teşekkürler…

  • Christina

    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

  • 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?

  • Thank you for great information.

  • Sreekanth

    Hi Christhope,

    This is really nice application.

  • Pingback: Indicator » Blog Archive » Google Maps Flash API()

  • Hey there–

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

    – pamela

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

  • 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.

  • Hi,Christophe

    This application can be sync now. Can you fixed it? Because I want to demo it for others. Thanks.

  • Pingback: Andrew Shorten » Collaborative Google Maps in Flex using Cocomo()

  • Pingback: Life As An Evangelist » Collaborative Google Maps in Flex using Cocomo()

  • Perfect application, I love google maps

  • I’m not a developer and some of the discussion I had with MapQuest was too technical for me to entirely understand the full range of advantages of the new API. But, as mentioned, it appears to permit a new, richer generation of mashups to be born on using Flash and other Adobe platform tools.

  • Hi there,
    I found great ideas on your Web site.
    Well done !
    Thanks for that and keep on doing
    Greetings from germany
    Thomas

  • Sriram

    Hi..

    I tried the local installation instructions. the front-end login page loaded, but after that the page did not load…i tried multiple times, but faced the same issue. Any solution?

  • Laura W

    I’m very impressed by this application. Any thoughts on making the free hand drawing geo-referenced?

  • Here is a tutorial to show how to install and use the MaxMind Database with PHP scripts examples. And it also shows how to display it on a map (Yahoo! Map) (french):
    http://www.flex-tutorial.fr/2009/02/01/flex-yahoo-maps-api-geo-localisation-par-ip-dun-visiteur-exemple/

  • Henike99@girlsandnylons

    That’s good information: Om said Om don’t know much about the characteristics of his or her server but I’m probably sharing it with a few dozens of other domains and the resources allocated to him or her are obviously limited in that shared environment.

  • matifbutt

    Hi I dont know, my first client browser working okay with second one but when I reply from second client to first, its not working.

    Any idea

  • matifbutt

    Client one get the reply but slowly from Client 2. Is there any reason?

  • Pingback: Resources for working with Flex, Flash, AMFPHP, Zend and BlazeDS « Philadelphia Flash Platform Adobe User Group()

  • nice one! But I still have the problem, that the API-Key is not working with Subdomains! I have to register new Keys for each Sub! Anyone any solutions?

  • Hi activetraffic: I think that you have to stick with registering each subdomain – unless there is some sort of script to automate the process? Regards, Marco

  • Вопрос к автору сайта, а вот у вас время у каждой статьи и в комментах пишется… Это какое? Московское? Заранее спасибо за ответ.

  • has anyone any more informations on this “subdomain-issue”? because I´m facing the same problem!

    Best Regards
    Nico

  • This is so cool! woow great Idea

  • Hi activetraffic: I think that you have to stick with registering each subdomain – unless there is some sort of script to automate the process? Regards, :)

  • Don

    Communication between rooms does not seem to be working at the moment

  • I found the idea Wunderfull! Its nice

  • wow great!

  • Would you be able to having it linked from the Maps API documentation?

  • sgd

    I am using G Maps with Ruby on Rails and it works fine, now I will try it with flash and flex.

  • I love google maps on the iphone – but no flash is possible on the iphone

  • Flash will probably never go to the iphone.
    But its not needed anyway.
    Nice article and thanks for sharing :)
    Greetings, Außenwerbung

  • I tried the tutorial, great help. Thanks!

  • wow, the tutorial actually helped me alot.
    thank you :)

  • Whow! i have to try this very soon. brilliant idea!

  • thats awesome. thanks..

  • Thank you for the helpfull apllication!

  • Nice article! Thanks

  • Ein Kompliment für diese tolle Seite.
    Eigentlich bin ich durch Zufall darauf gestoßen und dachte mir,
    einen netten Eintrag und viele Grüße zu hinterlassen.
    _____ \\\!!!///____
    ______( ô ô )_____
    ___ooO-(_)-Ooo___
    Vielleicht schauen sie mal auf meiner Homepage vorbei!

  • Whow! i have to try this very soon. brilliant idea

  • Nice article! Thank you.

  • I use BlazeDS to create exceptional rich applications with Flex and Java BlazeDS is a popular, open source web application that can successfully be deployed into a Java application server, making it an ideal option for Flex and Java integration. With this comprehensive resource, you’ll walk through the process of creating Rich Internet Applications (RIA) using BlazeDS. After a look at BlazeDS basics, the book then moves on to explain how to configure, customize, and extend BlazeDS in order to integrate with new and existing Java data sources and applications with Flex-based RIA. * Explains how to install BlazeDS from source as well as its compiled distributions * Demonstrates ways to make user interfaces engaging and effective * Introduces techniques for intercepting for control and management

  • Poonam

    Hello,

    I have followed the steps to create the sample application of Google Map whiteboard , but I am getting the following error message when I click in “Join Room”

    [MessagingError message=’Destination ‘gmaprooms’ either does not exist or the destination has no channels defined (and the application does not define any default channels.)’]

    Can you please help me in sorting out this please?

    Thanks
    Poonam Jaju
    poonam.mantri@gmail.com

  • Great article! Thank you for posting. Best Regards from Germany :-)

  • Great article :-) Thank you for posting and best regards!!!

  • Great site, very interesting. Thanks

  • Very helpful website. Wish I would have found this good one earlier. Just bookmarked…
    Shiatsu Massagesessel

  • nicely explained. thanks for the mini-tutorial

  • Powerful post.

  • good old google is taking over :D

  • Wish I would have found this good one earlier, very nice

  • Great article! Thank you for posting. Best Regards from Germany :-)

  • I read your article and thank you very much. I like it!

  • Great article, I like it. Thanks

  • Thanks for all the advice. Google rules… Sad but true. We got to play by the rules of the game.

  • Well well, that’s the way time goes. Great post.

  • Fantastic and thank you very much

  • Very interesting. Since there’s such a thing as maps from google, I only calculate distances with it. I don’t use any other tools anymore.

  • Good article! I like it and will pass on recommendations for it!

  • Thank you very much for your energy, worg . I founf your article with google and i like it!

  • The information will be useful to us in a nice sharing.

  • its very nice and amazing project.

  • Thank you for the useful information and article!

    • you are my aspiration , I own few blogs and infrequently run out from to brand : (.

  • Thanks you very much! Wonderful newletter!

  • Very nice article. I like it. thank you so much.

  • Wish I would have found these article sooner. Very Nice!

  • Great site, very interetsing for me.

  • Great site, very interesting and useful for me.

  • I like the helpful info you provide in your articles. I’ll bookmark your blog and check again here regularly. I am quite certain I’ll learn many new stuff right here! Good luck for the next!

  • Güvenlik Hizmetleri Kamera Alarm Sistemleri

    Güvenlik Hizmetleri | Özel Güvenlik | Kamera ve Alarm Sistemleri

    • I conceive this web site contains some real great information for everyone : D.

  • thanks for the mini-tutorial

  • thanks

  • I would like to express my appreciation to the writer just for rescuing me from this type of challenge. Because of surfing around through the the web and coming across opinions which were not helpful, I believed my entire life was gone. Living without the solutions to the difficulties you have solved as a result of your good website is a crucial case, and the ones that would have badly damaged my career if I hadn’t encountered your web blog. Your personal ability and kindness in maneuvering all areas was precious. I’m not sure what I would’ve done if I had not come across such a solution like this. I am able to at this time relish my future. Thank you so much for this impressive and result oriented help. I won’t be reluctant to propose your web site to any individual who should get tips on this subject.

  • I got what I was looking for. Thank you for this amazing post.

  • Great site, very interesting for me.

  • Great site, very interesting for me.

  • Good Information as I use Maps a lot also for my memory

  • For my work very helpful! Thanx!

  • It works fine on my smartphone. Great tool.

  • Was für eine Erleichterung! Wenn ich an die alten Karten denke…

  • OMG – excellent idea!

  • We meddle more in the marketing of our portfolio companies than any other area. … her write-up of the talk

  • I am currently teaching a class and part of the curriculum involves this subject matter. Do you have any other posts I can look at regarding this?

  • Interesting. I like your efforts and what you came up with.
    Thanks to the developpers.

  • Very nice article. I like it. thank you so much.

  • İt has helped to me so much

  • Great article! Thank you for posting. Best Regards from Germany

  • Thanks for sharing a very useful article.

  • Hi to all, how is all, I think every one is getting more from this web site,
    and your views are nice in favor of new people.

  • Thank you very much for this brilliant Artikel. Very interesting.

  • Wow, great!

  • Many thanks for sharing this story. I am absolutely tired of desperate
    for relevant and smart commentary on this subject. Everyone nowadays seem to go to extremes to either
    drive home their perspective or suggest that everybody else in the globe is
    wrong. thank you for your concise and relevant understanding.

  • What a lovely share.

  • Share share.

  • Thanks… admin good post

  • This piece of writing is actually a nice one
    it assists new web people, who are wishing in favor of blogging.

  • Thank you very much for this good informations! Best greetings

  • thank you for you shareds good lock

  • its very nice and amazing projected.

  • 1986’dan günümüze süre gelen deneyimini yeniliklerle ve arge çalışmaları ile geliştirmekte, oluşturduğu 21.000 m2 modern ve yüksek üretim kapasiteli imalat tesisinde farklı kullanım amaçlarına hitap eden hazır yapı yaşam alanları üretmektedir. Dünya çapında kalite standartlarında, doğa dostu üretim anlayışıyla ürünlerini Dünya’da 80’den fazla ülkeye ulaştırmaktadır.

  • raf

    With support from Adobe, SpringSource is introducing Spring BlazeDS Integration, a new open source project to provide tight integration between

  • He showed us that it is also possible without drugs! He did a great job!

css.php