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

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

  1. tj June 29, 2006 at 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 July 27, 2006 at 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 July 30, 2006 at 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 August 1, 2006 at 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 August 15, 2006 at 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 October 13, 2006 at 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. Chris Robinson January 14, 2007 at 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

  8. Luke February 9, 2007 at 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.

  9. hcfikc May 22, 2007 at 9:46 pm #

    Viagra

  10. Nick Bower May 24, 2007 at 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.

  11. chd June 13, 2007 at 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);
    }

  12. peoplesearch June 21, 2007 at 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!

  13. awvpdttbqo July 6, 2007 at 8:34 am #

    Hello! Good Site! Thanks you! fprwakmfdn

  14. Dozqaero July 27, 2007 at 7:58 am #

    acayip kudurdum yle zombie nation mp

  15. Pjxyukkk July 29, 2007 at 5:09 pm #

    very interesting
    big brunette pizza sausage big coco pizza sausage

  16. Prison Lawyer July 30, 2007 at 10:04 am #

    Hi good for you but visit this prison broward county jail

  17. MALWARE ABOVE August 9, 2007 at 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.

  18. Rostislav Siryk August 17, 2007 at 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?

  19. michael hunter October 10, 2007 at 5:07 pm #

    Thanks for the cool demo.

  20. ford1123 October 24, 2007 at 10:03 am #

    All about ford cars and parts dallas forddallas ford

  21. Matt Sheehan November 23, 2007 at 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

  22. gangdharan November 27, 2007 at 11:21 pm #

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

  23. Ata Amir February 21, 2008 at 2:11 pm #

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

    Ata

    amira@ris.ca

  24. Ata Amir February 21, 2008 at 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

  25. omkar dande March 31, 2008 at 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.

  26. flexite May 14, 2008 at 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

  27. Webmaster May 14, 2008 at 11:07 am #

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

  28. party poker calculator holdem odds July 7, 2008 at 3:26 pm #

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

  29. iphone games music July 20, 2008 at 8:51 am #

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

  30. negahban July 31, 2008 at 5:29 am #

    hi ,,i need to install of flash media center 2 ,,,,,,,i installed it on my windows ,,,but i have a host on internet ,,,and my host is a linux system ,,,when i write adress of my server in software ,,,it can’t open it ,,and error on login ,,,,is there any way for login to this software on my website????

  31. çet August 22, 2008 at 5:05 pm #

    Thanks for the cool demo.

  32. chat August 22, 2008 at 5:06 pm #

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

  33. sohbet August 22, 2008 at 5:06 pm #

    Can someone tell me how to make this thing work?

  34. candice7683 October 20, 2008 at 12:27 am #

    Flash Video Server is a powerful video streaming platform which provides services of streaming Flash videos and audios between the server side and client side. Flash Video Server offers you easy solution to enable your clients to play, record, and publish local Flash videos, live videos and audios to the server and share with other users.
    This program makes it possible for online meetings, live video publishing, recording, and playing.
    http://www.flvsoft.com/

  35. candice7683 October 21, 2008 at 3:33 am #

    i know Moyea flash video server,it provides services of streaming Flash videos and audios between the server side and client side.

    http://www.flvsoft.com/

  36. lapto battery November 20, 2008 at 9:12 pm #

    [...] Christophe Coenraets :: Google Maps Collaboration using Flex, Flash Media Server and AJAX [...]

  37. video conferencing setup March 20, 2009 at 1:24 am #

    I enjoyed reading your post; I am running a small website on video conferencing I am a beginner in this business. I don’t know much about it but I am searching around for material that can increase my knowledge

  38. peter Rosen April 2, 2009 at 2:42 am #

    Hi,

    I agree, nice site with interesting concepts. Thank for posting. I almost understand programming lingo.

    I am an artist with some ideas for a social networking clubhouse broadcast center in every town to serve as a new school and transformational theater using a special tool that maybe you would help to write? I need a programmer to help execute part of the venue operating system which is all about PRONOIA. I also produce a multi-node video conference called KidCast for Peace: Solutions for a Better World (since 1995 using CUSeeMe) so my interest in your work is piqued – given mentions of web sites with video conferencing capability. Can we speak sometime?

  39. cathy mac June 29, 2009 at 9:42 pm #

    thank you so much for your article! But API is still difficult for me, but i have asked my partner to fix it. i must say your article is so useful. thks a lot!

  40. Miles Rondael December 2, 2009 at 9:00 pm #

    Hi. I need help with my actionscripts. I have to create a screen recording for my flash whiteboard sessions. If you can help me with actionscript 2.0

    Thanks.

  41. chat December 4, 2009 at 7:10 am #

    thanks site

  42. chat December 4, 2009 at 7:10 am #

    thanks sites

  43. Telugu Movie News April 20, 2010 at 1:59 am #

    Thanks for the application.It will be very useful for me.

  44. jeff July 19, 2010 at 11:44 pm #

    been trying to improve flex in one of the apps vigilon i’m developing. still got some glitches. still looking for ways to smoothen it.

  45. matbaa August 8, 2010 at 7:21 am #

    [...] Christophe Coenraets :: Google Maps İşbirliği Flex kullanarak , Flash Media Server ve AJAX [...]

  46. sohbet August 9, 2010 at 2:51 pm #

    thanx so much

  47. SIP Trunking October 1, 2010 at 9:12 am #

    From what I have learned, the possibility of videoconferencing through this collaboration is made possible through SIP Trunking (Session Initiation Protocol) which is the perfect technology for sharing this type of information over a broadband connection.

  48. kablo tv October 9, 2010 at 5:36 am #

    thanks for article

  49. Artal October 23, 2010 at 7:15 pm #

    АРТАЛ – беспроводная охранная сигнализация для контроля и охраны дома, дачи, гаража или квартиры, или «Умный дом» в одной коробке.
    умный дом

  50. cityville January 5, 2011 at 5:27 am #

    lol a couple of of the comments readers write are such stoner remarks, many times i ponder whether they even read the content and threads before writing or whether they simply just read over the subject of the post and come up with the initial thought that pops into their heads. anyways, it’s enjoyable to browse through keen commentary occasionally compared to the identical, old blog vomit which i typically notice on the internet adios

  51. Slots February 4, 2011 at 12:37 pm #

    I don’t happen to use Google Maps a lot and though I admire the innovation to suit your needs I’d rather collaborate via Skype, free, simple and easy.

  52. how to win the lotte February 28, 2011 at 2:06 pm #

    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.

  53. sports betting softw June 22, 2011 at 8:56 pm #

    The Flex has cool features and very simple installation steps. This will me out a lot. Thanks for the information about it. You did a great job.

  54. Chatwin September 10, 2011 at 2:52 pm #

    Identified you blog as a result of google I must say I m impressed with your discussions!

  55. Houston Water Damage Restoration December 2, 2013 at 10:56 pm #

    Thanks for the instructions, very useful and well written also!

  56. Window installers June 11, 2014 at 2:24 pm #

    This would be a very great news to all Google Maps user, especially to those who loves to travel and uses it. Thanks for taking the time to share such cool news especially regarding Google update.

  57. hairstyles-black.com June 30, 2014 at 3:04 pm #

    excellent post, very informative. I’m wondering why the opposite specialists of this sector don’t realize this.
    You should continue your writing. I’m confident,
    you have a great readers’ base already!

  58. Avery Zahran July 24, 2014 at 7:30 pm #

    I had been afraid to dive into php, but gave it a shot after reading this. Under no circumstances truly love WordPress’ comment system. Many thanks for that tips to have me begun.

Trackbacks/Pingbacks

  1. FlexAbility » Blog Archive » Christophe Coenraets is coming to Boston! - November 10, 2006

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

  2. My2Bits » Blog Archive » Top 5 Flex Mapping Articles - December 26, 2006

    [...] 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. [...]

  3. Yahoo Maps Collaboration using Flex and BlazeDS : Christophe Coenraets - April 2, 2008

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

  4. cell phone ringtones wallpaper cell phone ringtones game wallpaper - May 1, 2008

    cristianos gratis ringtones…

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

  5. bad credit payday loan loan payday loan for people with bad credit - May 1, 2008

    poker spiel runterladen…

    After that juego cartas poker strip poker online…

  6. WHAT IS FLEX? - May 5, 2008

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

  7. madonna mp3 ringtones - May 6, 2008

    descargar gratis ringtones gratis polifonicos ringtones ringtones gratis…

    Will kostenlose roulette spielen slots com…

  8. Tramadol. - June 4, 2008

    Tramadol….

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

  9. Confluence: Java - June 27, 2008

    Flex links…

    Innhold Link Intro til Flex…

  10. Influxis Labs » Blog Archive » Great work here - August 27, 2008

    [...] http://coenraets.org/blog/2006/06/google-maps-collaboration-using-flex-flash-media-server-and-ajax-u… [...]

  11. RIA « Panduramesh’s Weblog - September 11, 2008

    [...] Christophe Coenraets :: Google Maps Collaboration using Flex, Flash Media Server and AJAX [...]

  12. Flex Favourites « Panduramesh’s Weblog - September 19, 2008

    [...] · Christophe Coenraets :: Flex and JMS: Portfolio Viewer :: More info · Christophe Coenraets :: Google Maps Collaboration using Flex, Flash Media Server and Ajax · David Brannan :: Exam Professor · Ely Greenfield :: FishEye Component :: More info · Ely [...]

  13. Flex with Java « anil4it - September 30, 2008

    [...] · Christophe Coenraets :: Flex and JMS: Portfolio Viewer :: More info · Christophe Coenraets :: Google Maps Collaboration using Flex, Flash Media Server and Ajax · David Brannan :: Exam Professor · Ely Greenfield :: FishEye Component :: More info · Ely [...]

  14. RIA « SrikanthCreative Mind’s Weblog - October 27, 2008

    [...] Christophe Coenraets :: Google Maps Collaboration using Flex, Flash Media Server and AJAX [...]

Leave a Reply