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
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • LinkedIn
  • StumbleUpon
  • Twitter
This entry was posted in Flex. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

45 Comments

  1. tj
    Posted June 29, 2006 at 11:51 pm | Permalink

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

  2. mike severa
    Posted July 27, 2006 at 1:34 pm | Permalink

    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
    Posted July 30, 2006 at 2:29 am | Permalink

    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. Posted August 1, 2006 at 4:49 pm | Permalink

    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
    Posted August 15, 2006 at 9:51 pm | Permalink

    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
    Posted October 13, 2006 at 2:35 pm | Permalink

    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. Posted January 14, 2007 at 10:34 pm | Permalink

    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
    Posted February 9, 2007 at 10:46 am | Permalink

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

  9. Posted May 22, 2007 at 9:46 pm | Permalink
  10. Nick Bower
    Posted May 24, 2007 at 12:02 am | Permalink

    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. Posted June 13, 2007 at 10:01 am | Permalink

    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. Posted June 21, 2007 at 2:07 pm | Permalink

    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. Posted July 6, 2007 at 8:34 am | Permalink

    Hello! Good Site! Thanks you! fprwakmfdn

  14. Posted July 27, 2007 at 7:58 am | Permalink

    acayip kudurdum yle zombie nation mp

  15. Posted July 29, 2007 at 5:09 pm | Permalink

    very interesting
    big brunette pizza sausage big coco pizza sausage

  16. Posted July 30, 2007 at 10:04 am | Permalink

    Hi good for you but visit this prison broward county jail

  17. MALWARE ABOVE
    Posted August 9, 2007 at 7:42 pm | Permalink

    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. Posted August 17, 2007 at 5:04 am | Permalink

    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. Posted October 10, 2007 at 5:07 pm | Permalink

    Thanks for the cool demo.

  20. Posted October 24, 2007 at 10:03 am | Permalink

    All about ford cars and parts dallas forddallas ford

  21. Posted November 23, 2007 at 10:41 am | Permalink

    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
    Posted November 27, 2007 at 11:21 pm | Permalink

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

  23. Posted February 21, 2008 at 2:11 pm | Permalink

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

    Ata

    amira@ris.ca

  24. Posted February 21, 2008 at 2:23 pm | Permalink

    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
    Posted March 31, 2008 at 6:32 am | Permalink

    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
    Posted May 14, 2008 at 2:31 am | Permalink

    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. Posted May 14, 2008 at 11:07 am | Permalink

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

  28. Posted May 22, 2008 at 12:22 am | Permalink
  29. party poker calculator holdem odds
    Posted July 7, 2008 at 3:26 pm | Permalink

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

  30. Posted July 20, 2008 at 8:51 am | Permalink

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

  31. Posted July 31, 2008 at 5:29 am | Permalink

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

  32. Posted August 22, 2008 at 5:05 pm | Permalink

    Thanks for the cool demo.

  33. Posted August 22, 2008 at 5:06 pm | Permalink

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

  34. Posted August 22, 2008 at 5:06 pm | Permalink

    Can someone tell me how to make this thing work?

  35. Posted October 20, 2008 at 12:27 am | Permalink

    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/

  36. Posted October 21, 2008 at 3:33 am | Permalink

    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/

  37. Posted November 20, 2008 at 9:12 pm | Permalink

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

  38. Posted March 20, 2009 at 1:24 am | Permalink

    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

  39. Posted April 2, 2009 at 2:42 am | Permalink

    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?

  40. Posted June 29, 2009 at 9:42 pm | Permalink

    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!

  41. Miles Rondael
    Posted December 2, 2009 at 9:00 pm | Permalink

    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.

  42. Posted December 4, 2009 at 7:10 am | Permalink

    thanks site

  43. Posted December 4, 2009 at 7:10 am | Permalink

    thanks sites

  44. Posted February 1, 2010 at 3:00 pm | Permalink

    acıgöl fm acıgölfmacıgöl fm acıgölfmacıgöl fm acıgölfmacıgöl fm acıgölfm

  45. Posted February 8, 2010 at 8:32 pm | Permalink

    halo semua

14 Trackbacks

  1. By My2Bits » Blog Archive » Top 5 Flex Mapping Articles on December 26, 2006 at 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. [...]

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

  3. cristianos gratis ringtones…

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

  4. poker spiel runterladen…

    After that juego cartas poker strip poker online…

  5. By WHAT IS FLEX? on May 5, 2008 at 8:06 am

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

  6. By madonna mp3 ringtones on May 6, 2008 at 8:01 pm

    descargar gratis ringtones gratis polifonicos ringtones ringtones gratis…

    Will kostenlose roulette spielen slots com…

  7. By Tramadol. on June 4, 2008 at 12:30 am

    Tramadol….

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

  8. By Confluence: Java on June 27, 2008 at 6:40 am

    Flex links…

    Innhold Link Intro til Flex…

  9. By Influxis Labs » Blog Archive » Great work here on August 27, 2008 at 11:46 pm
  10. By RIA « Panduramesh’s Weblog on September 11, 2008 at 7:39 am

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

  11. By Flex Favourites « Panduramesh’s Weblog on September 19, 2008 at 7:20 am

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

  12. By Flex with Java « anil4it on September 30, 2008 at 7:18 am

    [...] · 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. By RIA « SrikanthCreative Mind’s Weblog on October 27, 2008 at 7:16 am

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

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>