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.
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:
- Map sharing: Maps are kept in sync (in real time) between users involved in a collaboration session.
- Videoconferencing (Webcam sharing and VOIP): You can share your Webcam and microphone to add video and audio to your collaboration session.
- 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.
- 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:
- Publish/subscribe messaging and support for real-time communication
- Drawing API
- 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:
- Install the Flex Data Services
- Download the application and deploy it in the samples web app.
- In messaging-config.xml, add a “flexmaps” destination: You can copy the dashboard_chat destination and change the destination id to “flexmaps”.
- Install the Flash Media Server: you can download a free developer edition here (click free developer edition)
- 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
- Access the application using the appropriate URL. For example: http://localhost:8700/samples/flexmaps.html
Comments
44 Responses to “Google Maps Collaboration using Flex, Flash Media Server and Ajax (Updated for Flex 2 GA)”
Leave a Reply
Thanks! I was prepping to build this into some aps, this will be a nice guideline to start with!
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
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
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
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
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
[...] http://coenraets.org/blog/2006/06/google-maps-collaboration-using-flex-flash-media-server-and-ajax-updated-for-flex-2-ga/ [...]
[...] 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. [...]
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
Doesn’t show using Linux. Can see the app, can see the right and bottom line of the map under the flash app.
Viagra
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.
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);
}
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!
Hello! Good Site! Thanks you! fprwakmfdn
acayip kudurdum yle zombie nation mp
very interesting
big brunette pizza sausage big coco pizza sausage
Hi good for you but visit this prison broward county jail
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.
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?
Thanks for the cool demo.
All about ford cars and parts dallas forddallas ford
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
Hi how webcam used audio video collect me Pl any Softeware ask me
I have a couple of Felx Falsh development and QA opportunities available in Toronto. Is anyone interested?
Ata
amira@ris.ca
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
Hi,
Thanks a lot for this code.
I tried for a week before getting your code.
Your code really helped me a lot.
[...] years ago, I wrote a simple Google Maps collaboration example. The Flex application listened to Google Maps events to synchronize maps between different users. [...]
cristianos gratis ringtones…
Most juegos de poker en español free mobile phone ringtones virgin…
poker spiel runterladen…
After that juego cartas poker strip poker online…
[...] Check out the Google Map collaboration sample. [...]
descargar gratis ringtones gratis polifonicos ringtones ringtones gratis…
Will kostenlose roulette spielen slots com…
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
Hi,
Can someone tell me how to make this thing work?
Buying A Sauna? Read This Before You Buy Your First Sauna
Tramadol….
What is tramadol used for. Tramadol sr 100. Tramadol hcl. Tramadol. Tramadol 50mg….
Flex links…
Innhold Link Intro til Flex…
I found your website after I have been surfing the internet to be useful
Nice blog, i have added it to my favourites, greetings
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????
Thanks for the cool demo.
Nice blog, i have added it to my favourites, greetings…
Can someone tell me how to make this thing work?
[...] http://coenraets.org/blog/2006/06/google-maps-collaboration-using-flex-flash-media-server-and-ajax-u... [...]