Google Maps Collaboration using Flex, Flash Media Server and Ajax (Updated for Flex 2 GA)

Google Maps Collaboration is another sample I wrote during the Flex 2 beta. Since it triggered some interest at the time, I updated the code for the GA build of Flex 2.

flexmaps.jpg

The Flex application is essentially a collaboration panel that I added on top of Google Maps, but that you could add on top of any application (HTML, Ajax, or Flex).

The Flex module adds the following collaboration features to Google Maps:

  1. Map sharing: Maps are kept in sync (in real time) between users involved in a collaboration session.
  2. Videoconferencing (Webcam sharing and VOIP): You can share your Webcam and microphone to add video and audio to your collaboration session.
  3. Whiteboarding: Collaborating users can draw on the map. For example you could draw potential directions, etc. The users’ whiteboards are kept in sync in real time.
  4. Cursor sharing: When you move your mouse, other users see the movements of your mouse and what you are pointing at.


The Flex features used in this example include:

  1. Publish/subscribe messaging and support for real-time communication
  2. Drawing API
  3. Support for webcam/voice capture and streaming (Flash Media Server is required for streaming).

Run a simplified version of the application. Real time messaging (used for map sharing and whiteboard synchronization) has been disabled in this version.

Installation instructions:

  1. Install the Flex Data Services
  2. Download the application and deploy it in the samples web app.
  3. In messaging-config.xml, add a “flexmaps” destination: You can copy the dashboard_chat destination and change the destination id to “flexmaps”.
  4. Install the Flash Media Server: you can download a free developer edition here (click free developer edition)
  5. In C:\Program Files\Macromedia\Flash Media Server 2\applications\flex_videoconference, create a directory called flex_videoconference and copy the main.asc file in that directory
  6. Access the application using the appropriate URL. For example: http://localhost:8700/samples/flexmaps.html
June 29, 2006 | Filed Under Flex 
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

39 Responses to “Google Maps Collaboration using Flex, Flash Media Server and Ajax (Updated for Flex 2 GA)”

  1. tj on June 29th, 2006 11:51 pm

    Thanks! I was prepping to build this into some aps, this will be a nice guideline to start with!

  2. mike severa on July 27th, 2006 1:34 pm

    hi, a couple general question about flex… can it be configured to provide publishing to flash lite versions as well?

    how does the mxml size compare to the bytecode size?
    a related question would be why the paradigm of compiling on the server-side as opposed to using the flash player to build the presentation dynamically based on the mxml?

    since this doenst appear possible, is it possible, say, to load a new swf from a flex server into an existing presentation? i.e., as opposed to having to open each as a separate presentation (maybe not a big deal on a pc, but a slightly bigger deal on a cell phone).

    thanks,

    Mike

  3. bgates on July 30th, 2006 2:29 am

    Hi, I had seen your Rails/Flexstore example online just a couple of weeks ago, but didn’t study it right away. Now all the links to the zipped sql files are broken. Do you plan on recreating your old site here? It looked pretty interesting.

    Thanks,
    Brian

  4. jean philippe, gousse on August 1st, 2006 4:49 pm

    bonjour christophe,
    je suis installé sur montréal et je recherche un developpeur flashcomm pour nous aider dans projet de service web

    merci de m’écrire si cela peut vous intéresser
    cordialement
    jean philippe

  5. Sean Moriarty on August 15th, 2006 9:51 pm

    Christophe

    Saw your presentation at ‘Real world Flex’ and was quite impressed, thought I’d try & give a try.

    I made the modification in step #3 to
    C:\fds2\jrun4\servers\default\samples\WEB-INF\flex\messaging-config.xml

    but receive the following error message when the app loads, any ideas? Thanks.

    [MessagingError message='Unknown destination 'flexmaps'.']
    at mx.messaging.config::ServerConfig$/getChannelSet()
    at ect.. ect.. ect…

    Sean

  6. Chris Pritchard on October 13th, 2006 2:35 pm

    I’m fairly new to flex but I have the app mostly working. I longer have the destination errors etc. However when I open a second instance of the application it doesn’t seem to be communicating with the other browser instance but media server does shows 2 clients connected.

    I feel like i’m missing something really simple.

    Chris Pritchard

  7. FlexAbility » Blog Archive » Christophe Coenraets is coming to Boston! on November 10th, 2006 12:11 pm

    [...] http://coenraets.org/blog/2006/06/google-maps-collaboration-using-flex-flash-media-server-and-ajax-updated-for-flex-2-ga/ [...]

  8. My2Bits » Blog Archive » Top 5 Flex Mapping Articles on December 26th, 2006 12:18 am

    [...] Google Maps Collaboration using Flex, Flash Media Server and Ajax (Updated for Flex 2 GA) An overview of Christophe Coenraets’ excellent Flex collaboration tool that extends Google Maps by adding Flex map-sharing, videoconferencing, and whiteboarding on top of an Ajax-based map. [...]

  9. Chris Robinson on January 14th, 2007 10:34 pm

    Loveley use of flex works like a dream in firefox but when running in ie7 we get an error:

    Line 83
    Char 4
    Object doesnt support this property or method

    line 83 is:-
    flexMap.publishCoordinates(center.x, center.y);

    any ideas as i get the same error when trying to communicate with flex apps from java.

    thanks in advance

  10. Luke on February 9th, 2007 10:46 am

    Doesn’t show using Linux. Can see the app, can see the right and bottom line of the map under the flash app.

  11. hcfikc on May 22nd, 2007 9:46 pm

    Viagra

  12. Nick Bower on May 24th, 2007 12:02 am

    Hi. Do you think it’s possible to create markers using the Gmap API from data inside the Flex application (it’s coming from DS RemoteObjects, but that’s not really the point). Both this solution and the yahoo maps 1.5/2 wrapper rely on communicating user triggered events between the wrapper and map container. What appears quite challenging is to push lat/lon data into the map for overlay.

  13. chd on June 13th, 2007 10:01 am

    I tried using ExternalInterface.call() to invoke a javascript function that creates a marker. No error message appears, but for some reason it doesn’t work.

    Flex code (within a script function):

    var iconImage:String = new String(
    “http://labs.google.com/ridefinder/images/mm_20_purple.png”);
    var content:String = new String(”Hello let’s see if this works from flex”);

    var map:Object = ExternalInterface.call(”getMapHandle”);

    ExternalInterface.call(”createMarker”, map, p.x, p.y, iconImage, content);

    javascript code:

    function getMapHandle()
    {
    var map = new GMap(document.getElementById(”map”));

    return map;
    }

    function createMarker(map, point, iImage, content)
    {
    var marker = new GMarker(point);
    var mIcon = marker.getIcon();
    mIcon.image = iImage;
    mIcon.iconSize = new GSize(12, 20);
    //mIcon.shadow = icon.shadow;

    GEvent.addListener(marker, “click”,
    function() {
    marker.openInfoWindowHtml(content);
    }
    );

    map.addOverlay(marker);
    }

  14. peoplesearch on June 21st, 2007 2:07 pm

    Thanks! This new version is so much better, especially when I am having to show other people which places to turn, etc. The mouse feature helps a lot!

  15. awvpdttbqo on July 6th, 2007 8:34 am

    Hello! Good Site! Thanks you! fprwakmfdn

  16. Dozqaero on July 27th, 2007 7:58 am

    acayip kudurdum yle zombie nation mp

  17. Pjxyukkk on July 29th, 2007 5:09 pm

    very interesting
    big brunette pizza sausage big coco pizza sausage

  18. Prison Lawyer on July 30th, 2007 10:04 am

    Hi good for you but visit this prison broward county jail

  19. MALWARE ABOVE on August 9th, 2007 7:42 pm

    WATCH OUT, THE LINES ABOVE “acayip kudurdum yle zombie nation mp” IS A LINK TO MALWARE!!!!

    Christope, please remove this. Thankfully I’m on a mac, clicked it by accident.

  20. Rostislav Siryk on August 17th, 2007 5:04 am

    Christophe, have you ever succeeded to manipulate Google / Yahoo Map directly, with BitmapData.

    What do you think, are there any workarounds possible regarding this direction?

  21. michael hunter on October 10th, 2007 5:07 pm

    Thanks for the cool demo.

  22. ford1123 on October 24th, 2007 10:03 am

    All about ford cars and parts dallas forddallas ford

  23. Matt Sheehan on November 23rd, 2007 10:41 am

    This is just terrific. We’ve been building Flex 2 and Flash map applications for a while. I’ve added some links at:

    http://www.flexmappers.com/about/flex2-maps-ESRI-Mapserver-guide.html

    Flex 2 is fantastic for building map applications, whether they be google, microsoft or yahoo maps or GIS applications using Mapserver or ESRI products. I was really pleased to find this article.

    Matt Sheehan

  24. gangdharan on November 27th, 2007 11:21 pm

    Hi how webcam used audio video collect me Pl any Softeware ask me

  25. Ata Amir on February 21st, 2008 2:11 pm

    I have a couple of Felx Falsh development and QA opportunities available in Toronto. Is anyone interested?

    Ata

    amira@ris.ca

  26. Ata Amir on February 21st, 2008 2:23 pm

    Please respond to amira@ris.ca

    Job Description - External:
    RIS (recently acquired by Sierra Systems) is looking for a Senior Flash/Flex Development and QA Engineer. We offer a competitive base salary plus commissions and a full benefits package.

    Job Responsibilities:

    ‘Development of new software objects and components as needed
    ‘Optimize current Flash code components
    ‘Assist in designing front-end architecture
    ‘Author, modify, maintain, and execute automated scripts for Flash-based components
    ‘Create technical design specifications
    ‘Review code & perform impact analysis of new features
    ‘Strong collaboration with offshore developers
    ‘Create, review and amend technical specifications

    Experience - External:
    Qualifications:

    Strong experience with Flash, Flex & Actionscript 3.0 (4+ years experience preferred)

    Excellent Object Oriented Programming skills

    Strong understanding of UML

    Strong knowledge of XML technologies, including experience with XML Objects

    4+ years experience in Javascript, HTML & CSS

    Experience working on a Flash/Flex based Health Care application a big plus

    Excellent project management, team leadership and the ability to work with remote teams

    Successful candidates will have very strong aptitude, enjoy problem solving and have strong analytical & communication abilities

    Successful candidates will thrive in a start-up environment, be highly self-motivated and capable of growing quickly into a leadership position

    Education:

    Demonstrated aptitude and academic excellence is highly valued

    BS or MS in Computer Science, Software Engineering, or relevant field is required

    CMMI training and qualifications a big plus

  27. omkar dande on March 31st, 2008 6:32 am

    Hi,
    Thanks a lot for this code.
    I tried for a week before getting your code.
    Your code really helped me a lot.

  28. Yahoo Maps Collaboration using Flex and BlazeDS : Christophe Coenraets on April 2nd, 2008 5:34 pm

    [...] years ago, I wrote a simple Google Maps collaboration example. The Flex application listened to Google Maps events to synchronize maps between different users. [...]

  29. cell phone ringtones wallpaper cell phone ringtones game wallpaper on May 1st, 2008 12:14 pm

    cristianos gratis ringtones…

    Most juegos de poker en español free mobile phone ringtones virgin…

  30. bad credit payday loan loan payday loan for people with bad credit on May 1st, 2008 1:48 pm

    poker spiel runterladen…

    After that juego cartas poker strip poker online…

  31. WHAT IS FLEX? on May 5th, 2008 8:06 am

    [...] Check out the Google Map collaboration sample. [...]

  32. madonna mp3 ringtones on May 6th, 2008 8:01 pm

    descargar gratis ringtones gratis polifonicos ringtones ringtones gratis…

    Will kostenlose roulette spielen slots com…

  33. flexite on May 14th, 2008 2:31 am

    Hi..Thanks! This new version is so much better, especially when I am having to show other people which places to turn, etc. The mouse feature helps a lot

  34. Webmaster on May 14th, 2008 11:07 am

    Hi,
    Can someone tell me how to make this thing work?

  35. Britney on May 22nd, 2008 12:22 am

    Buying A Sauna? Read This Before You Buy Your First Sauna

  36. Tramadol. on June 4th, 2008 12:30 am

    Tramadol….

    What is tramadol used for. Tramadol sr 100. Tramadol hcl. Tramadol. Tramadol 50mg….

  37. Confluence: Java on June 27th, 2008 6:40 am

    Flex links…

    Innhold Link Intro til Flex…

  38. party poker calculator holdem odds on July 7th, 2008 3:26 pm

    I found your website after I have been surfing the internet to be useful

  39. iphone games music on July 20th, 2008 8:51 am

    Nice blog, i have added it to my favourites, greetings

Leave a Reply