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.
- Access http://coenraets.org/apps/gmaprooms/gmaprooms.html on two different machines or in two browser windows on the same machine.
- Make sure you logon with two different user names and the same room name.
- Move the map in one browser and notice that the position of the map is synchronized in the other browser.
- You can also search an address in one browser and the resulting map position will appear in the two browsers.
- The zoom level and the map type are also synchronized between users.
- 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:
- Install BlazeDS. You can download the BlazeDS turnkey server (a version of Tomcat with BlazeDS preinstalled) here.
- 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> - 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>
- (Re)start the BlazeDS turnkey server.
- Download the source code of the Google Maps Application here.
- 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.
- Download the Google Maps ActionScript 3 API here, and add the swc file in the libs folder of your project.
- Get a Google Maps API key and assign it to map.key in the initMap() function in MapArea.mxml.
- Compile the application.
- 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!
WOW !!! I love you , Christophe , really great Applications !!!
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”).
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.
That’s really looking cool, need to try it asap. Most probably tomorrow, feeling sleepy now.
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
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
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…
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.
Hi Christhope,
This is really nice application.
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.
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
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?
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/
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.
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
Client one get the reply but slowly from Client 2. Is there any reason?
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, :)
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?
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
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!
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
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.