Yahoo Maps Collaboration using Flex and BlazeDS

Two years ago, I wrote a simple Google Maps collaboration example. The Flex application listened to Google Maps events to synchronize maps between different users. It also added nice collaboration features such as videoconferencing and a collaborative whiteboard overlaid on top of the map. In addition to demonstrating the real-time messaging capabilities of Flex, this application also illustrated Flex/Ajax integration using External Interface.

Two recent events prompted me to revisit this sample:

  1. Yahoo recently released an ActionScript 3 API for Yahoo Maps.
  2. Adobe recently released the Remoting and Messaging features of LiveCycle Data Services as an Open Source project named BlazeDS.

So, I updated the sample to work with the Yahoo Maps ActionScript API and BlazeDS (or LCDS). No need to communicate between Ajax and Flex in this version since the rendering of the map is entirely done within the Flex application.

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.

  1. Access http://coenraets.org/maprooms/maprooms.html on two different machines or in two browser windows on the same machine.
  2. Make sure you logon with two different user names and the same room name.
  3. Move the map in one browser and notice that the position of the map is synchronized in the other browser.
  4. You can also search an address in one browser and the resulting map position will appear in the two browsers.
  5. The zoom level and the map type are also synchronized between users.
  6. Click the Map Sharing 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:

  1. Install BlazeDS. You can download the BlazeDS turnkey server (a version of Tomcat with BlazeDS preinstalled) here.
  2. 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>
    
  3. Open WEB-INF/messaging-config.xml and add the following destination:
    <destination id="flexmaps">
    	<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>
    
  4. (Re)start the BlazeDS turnkey server.
  5. Download the source code of the Yahoo Maps Application here.
  6. Create a Flex Builder project for the Flex application (maprooms). 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.
  7. Download the Yahoo Maps ActionScript 3 API here, and add YahooMap.swc in the libs folder of your project.
  8. Get a Yahoo API key here and assign it to the appid variable in MapArea.mxml.
  9. Compile the application.
  10. 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”).



88 Responses to Yahoo Maps Collaboration using Flex and BlazeDS

  1. Mete Atamel April 2, 2008 at 6:19 pm #

    Very cool!

  2. Gary Gilbert April 3, 2008 at 1:38 am #

    Christophe,

    Thank you so much for publishing the source for your projects I have learned so much from them, especially your sqlAdmin and salesBuilder applications!

    I look forward to learning more with your Yahoo maps project.

  3. milan April 3, 2008 at 12:36 pm #

    my firefox (2.0.0.13) is crashing every time I want to test it.

  4. Gary Funk April 3, 2008 at 10:18 pm #

    Well, I’ve done something wrong. I’m trying to get this to work with ColdFusion and LCDS. It gets the map, but the two windows don’t talk to each other. How do I tell that LCDS is running and getting the data?

  5. Jamie April 4, 2008 at 1:09 pm #

    Cool !
    I’ve found a similar app a couple of days ago. It’s Google Maps Collaboration using Flex and BlazeDS.
    http://www.banana-systems.com/MyFlight/view/Flight.html

  6. Gary Funk April 4, 2008 at 8:10 pm #

    Gee, it was such an easy fix. I had to add the ref to the destination in the WEB-INF/messaging-config.xml file.

  7. Roger May 4, 2008 at 4:47 am #

    Hi, I’m writing an article about Flex and Java for a commercial magazine and I was wondering whether can I use your Flex Test Drive Server (which is already configured) and put it on the magazine’s CD. Of course I can remove all .mxml files (and .java and rest of sources) you created for Flex Test Drive. I just neead a server working out-of-box.
    Sorry for leaving this question on your blog. I didn’t found your e-mail address.

  8. Dean May 7, 2008 at 12:31 pm #

    I can not get this working locally, I have successfully created the little chart example from the Blazeds dev doc.
    I have followed letter by letter, but the two windows don’t talked to each other. What debugging tools do we have with Blazeds
    Thanks

  9. Dean May 7, 2008 at 12:51 pm #

    Little more insight, I getting a sandbox error too yahoo.

    *** Security Sandbox Violation ***
    Connection to http://us.maps2.yimg.com/us.tile.yimg.com/tl?x=4940&y=2112&z=4&v=4.1&locale=en&s=256 halted – not permitted from http://localhost:8400/maprooms//maprooms.swf

  10. Dean May 7, 2008 at 1:26 pm #

    Sorry to flame your blog, great app, I got the demo to work on an external server (my production) any help or links on setting this up in dev environment with localhost, I assume proxy is needed

    Thanks in advance

  11. Jason May 11, 2008 at 7:43 pm #

    Thanks for the wonderful example.

    One quick question: What is the right way to compile the codes with command line tools? I used “mxmlc maprooms.mxml” and got a swf file that does not run correctly. This swf file is different from the one compiled under Eclipse.

  12. Megharaja May 12, 2008 at 7:36 am #

    This is really nice example to communication between flex,Yahoo Map API and BlazeDS

    It is perfectly working in Internet Explorer but in firefox when i run this firefox unexpectedly closing the browser.

    Thanks,
    Megharaja S.H.

  13. Active NET June 9, 2008 at 6:24 am #

    I Want JAVA FLEX Meterial

  14. Celebrity June 12, 2008 at 12:45 pm #

    excellent A+

  15. Hunka June 30, 2008 at 8:04 am #

    Too Good example. Thanks

  16. paper shredder July 30, 2008 at 12:32 am #

    Hi thanks for the post.Nice blog.Now this blog is in my favourite bookmark pages.
    http://www.squidoo.com/papershredderarticles

  17. sohbet August 22, 2008 at 5:28 am #

    Yahoo Maps Collaboration using Flex and BlazeDS

  18. sohbet September 6, 2008 at 9:32 am #

    Thank you very much for this information.

  19. brugher December 23, 2008 at 10:42 am #

    Too Good example. Thanks

  20. James December 23, 2008 at 4:57 pm #

    Your tested on the hosted version doesn’t sync up the maps between 2 browser instances.

    I set it up on my local computer and it behaves the same way, no sync between sessions.

    Got any ideas?

  21. sohbet January 7, 2009 at 1:08 pm #

    How do I tell that LCDS is running and getting the data?

  22. daslaber January 7, 2009 at 1:08 pm #

    maskable scattered,Clio counteractive!…

  23. araba oyunları January 16, 2009 at 5:40 pm #

    I set it up on my local computer and it behaves the same way, no sync between sessions.

  24. araç sorgulama March 17, 2009 at 4:59 pm #

    I getting a sandbox error too yahoo.

  25. Зайчонок March 29, 2009 at 7:31 am #

    Вообще, когда читаешь такое, посещает мысль, а ведь это ж так просто, ну почему я это не смог придумать

  26. кoшмap April 11, 2009 at 6:53 pm #

    Ну, как сказать, понравилось :) Хотя я все равно практически ничего не понял. :)

  27. film dizi May 18, 2009 at 8:34 am #

    ulen rus sitesi olmuş burası bende az türkçe yazıyımda türklerinde varlğı belli olsun :D
    selametle :D:D:D

  28. medyum July 12, 2009 at 3:33 am #

    Well, I’ve done something wrong. I’m trying to get this to work with ColdFusion and LCDS. It gets the map, but the two windows don’t talk to each other.

  29. ssk July 23, 2009 at 9:27 am #

    Christophe,

    Thank you so much for publishing the source for your projects I have learned so much from them, especially your sqlAdmin and salesBuilder applications!

    I look forward to learning more with your Yahoo maps project

  30. zerrin egeliler July 23, 2009 at 11:45 am #

    Sorry to flame your blog, great app, I got the demo to work on an external server (my production) any help or links on setting this up in dev environment with localhost, I assume proxy is needed

    Thanks in advance

  31. Андрей Краснов August 20, 2009 at 8:17 pm #

    Добротно сделано, контент порадовал, сам на многие блоги и не зашёл бы никогда…

  32. Венедикт Радюхин August 21, 2009 at 5:08 am #

    красиво, сделал! Благодарю!!!

  33. Григорий Райский September 2, 2009 at 3:55 am #

    Распечатываю… на стенку в самое видное место!!!

  34. Pragafoto September 2, 2009 at 10:37 am #

    Спасибо.

  35. Андрей September 2, 2009 at 11:02 am #

    На сайте можно скачать последние фильмы бесплатно, на высокой скорости. Все фильмы разбиты по удобным категориям, а также по году выпуска.

  36. lida September 4, 2009 at 8:31 am #

    This is great work. I add this my site.thanks

  37. Banker September 9, 2009 at 6:59 am #

    Спасибо!
    Отличная информация!

  38. Olegreze September 9, 2009 at 3:53 pm #

    Основная задача Яндекса — давать ответы на вопросы пользователей!

  39. Biber Hapi September 16, 2009 at 10:19 am #

    Thanks for this article…

  40. zerrin egeliler September 29, 2009 at 2:26 pm #

    thanks very good page and cool page

  41. Sterlimastiv October 5, 2009 at 3:34 pm #

    Привет. Образовалась проблема – купил я электродрель на магазин ру
    А она сломалась у меня в тот ведь день – гарантии практически никакой не дали. Просто почта пришла с коробкой, а там все на китайском. Написал в магазин этот, дали ответ, что обращайтесь в сервис центр, хотя у меня ни документов на руках нет, ничего. Как можно приструнить данный интернет магазин? Есть ли какие-то компетентные органы, что писать. Куда писать, кому писать. Ошибся, да, нужно было в магазине нормальном прикупить, хотя необходимой мне модели просто не было, да и дешевле в интернет-магазине. А вот теперь сижу у разбитого корыта. Подскажите, что делать.

  42. Марат Тимаев October 6, 2009 at 5:44 am #

    Кому это важно?

  43. Павел Борисов October 6, 2009 at 4:13 pm #

    Интересно – случайно наткнулся на статью – не плохо.

  44. Павел Векшин October 7, 2009 at 11:24 pm #

    Бе-е-е((( ну и мазня. По-другому назвать нельзя. Ушол в себя от такого занудства((((

  45. Дмитрий Шеметов October 8, 2009 at 12:23 am #

    Классная статья – спасибо!

  46. Павел Хохолин October 9, 2009 at 8:49 am #

    Готов перечитать статью ещё раз. Хороший матерьял и написанно просто! ТО что надо.

  47. Всеволод Андреев October 22, 2009 at 12:34 am #

    В современной экономической ситуации все это рпеобретает несколько иной смысл – весьма смешной я бы сказал

  48. Всеволод Шумилов October 22, 2009 at 3:23 am #

    Мне это пригодится.

  49. oyun gemisi October 22, 2009 at 2:18 pm #

    рпеобретает несколько иной смысл – весьма смешной я бы сказал

  50. mp3 dinle October 22, 2009 at 2:19 pm #

    locations) and test the application as described above (in “Testing the hosted version”).

  51. sinema izle October 22, 2009 at 2:20 pm #

    onfigure your Flex Builder project to work with BlazeDS. To read instructions on

  52. ahmet maranki October 22, 2009 at 2:21 pm #

    Get a Yahoo API key here and assign it to the appid variable in MapArea.mxml.

  53. sağlık October 22, 2009 at 2:21 pm #

    (Re)start the BlazeDS turnkey server.

  54. siemens servisi November 4, 2009 at 3:41 am #

    yes yahoo uses flex data

  55. jean joseph, Sr. July 6, 2010 at 9:42 pm #

    Hey ahmet maranki, i did just as you said and it works, thank you

  56. Wilber T. Wildcat July 24, 2010 at 4:47 pm #

    This would be useful for travel websites. I am thinking like AAA livechat support or something to that effect. If you package this I’m sure you could sell it to AAA or some such organization.

  57. blinkx September 6, 2010 at 5:35 am #

    Hi Christophe,

    I am working on a similar project using blazeds to push data to subscribed clients. I notice that you have used 200 to set maximum polling requests. How does this affect the scalability of app ? How many requests can blazeds handle without substantially degrading quality of service ?

    Thanks,
    Blinkx

  58. siemens servisi September 30, 2010 at 5:39 am #

    thanks for information.good web site

  59. George black October 17, 2010 at 9:26 am #

    Your guide was really helpful. Took me a while to understand it and a lot longer to actually follow all the steps but it was worth it. Thanks a lot.

  60. altın çilek January 26, 2011 at 9:07 am #

    I am working on a similar project using blazeds to push data to subscribed clients. I notice that you have used 200 to set maximum polling requests. How does this affect the scalability of app ? How many requests can blazeds handle without substantially degrading quality of service ?

  61. Altın Çilek January 27, 2011 at 6:45 am #

    Get a Yahoo API key here and assign it to the appid variable in MapArea.mxml.

  62. teknikservisrehberi January 31, 2011 at 4:40 am #

    Thank you for sharing admin

    service

  63. engineering leveling April 1, 2011 at 7:54 pm #

    Thanks a lot. this is great.

  64. osman April 24, 2011 at 4:33 pm #

    neredesin kiz

  65. Victor May 19, 2011 at 10:05 am #

    Thank you!
    this is great.

  66. Benefit Lip Gloss August 8, 2011 at 4:44 am #

    This glossy color wand is your best beauty pal. A mini Benetint – the original and still the best rosy lip and cheek stain is paired with a shiny clear gloss on the other end. Carry it in the handy pocket protector and you’ll have kiss-proof, smudge-proof color with you wherever you go.

  67. alex August 8, 2011 at 10:04 am #

    thanks, going to use.

  68. Max Manus August 15, 2011 at 6:52 pm #

    Max fixed? Or fixed life?

  69. stron katalog September 15, 2011 at 10:46 am #

    I am often to blogging and i actually appreciate your content. The article has really peaks my interest. I’m going to bookmark your website and maintain checking for new information.

Trackbacks/Pingbacks

  1. 40 лет назад в авиакатастрофе погиб Юрий Алексеевич Гагарин - Самара сегодня - April 3, 2008

    [...] Yahoo Maps Collaboration using Flex and BlazeDS [...]

  2. eismann-sf » Two New Flex Apps and Code Samples from Adobe - April 3, 2008

    [...] up, Cristophe Coenraets, re-releases his collaborarative mapping tool: The Flex application listened to Google Maps events to synchronize maps between different users. [...]

  3. 03.04 Арт-директор «Трубы» пригласил на юбилей «Ундервуд» и задумался о создании нового клуба - НГС.НОВОСТИ - April 3, 2008

    [...] Yahoo Maps Collaboration using Flex and BlazeDS [...]

  4. links for 2008-04-08 « M@’s Blog - April 7, 2008

    [...] Yahoo Maps Collaboration using Flex and BlazeDS : Christophe Coenraets An good example of flex collaboration. [...]

  5. Collaborative Data Entry with Flex and BlazeDS : Christophe Coenraets - April 7, 2008

    [...] Yahoo Maps collaboration, here is another example of enabling collaboration in a Flex application using the [...]

  6. Niko & Java » Karten Kollaboration in Flex - April 13, 2008

    [...] Coenraets hat seine interaktive Karten-Demo mit Flex nun auf die ActionScript 3 fähige Yahoo API upgedated, so dass man nun ohne AJAX auskommt (zuvor hatte die Demo Google Maps verwendet). Dadurch bleibt [...]

  7. Live Help / Call Center Application with Flex and BlazeDS : Christophe Coenraets - April 29, 2008

    [...] recently posted a number of examples (Yahoo Maps Collaboration and Collaborative Data Entry) showing how to use the BlazeDS / LCDS Message Service to build [...]

  8. Google Maps Collaboration Using Google’s New ActionScript API and BlazeDS : Christophe Coenraets - May 23, 2008

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

  9. Ibuprofen. - July 7, 2008

    Old ibuprofen….

    Ibuprofen recall….

  10. gambling odd - October 11, 2008

    gambling odd…

    maskable scattered,Clio counteractive!…

  11. Bookmark: 60+ Adobe Flex reference websites - January 11, 2009

    [...] Tour De Flex Application – insideria.com Developing .NET class – themidnightcoders.com Yahoo Maps Collaboration using Flex and BlazeDS – coenraets.org Integrating Flex into Ajax applications – ibm.com AOL Pictures and Flex – [...]

  12. Flex开发必备网站集合 | ria之家--RIA三部曲:JQ、ext、flex - August 5, 2009

    [...] Yahoo Maps Collaboration using Flex and BlazeDS – coenraets.org [...]

  13. 60+有用的Flex站点 « Flexsns-关注富互联网的世界 - November 5, 2009

    [...] Yahoo Maps Collaboration using Flex and BlazeDS – coenraets.org [...]

  14. 12 Very Useful Applications Based on Flex/Flash - Ntt.cc - December 15, 2009

    [...] Yahoo Maps [...]

  15. 行骏-IT Player » Blog Archive » 推荐60+ Flex开发参考网站 - December 25, 2009

    [...] Yahoo Maps Collaboration using Flex and BlazeDS – coenraets.org [...]

  16. 16 » January » 2010 » 博兮博客 - January 16, 2010

    [...] Yahoo Maps Collaboration using Flex and BlazeDS – coenraets.org [...]

  17. Bookmark: 60+ Adobe Flex reference websites « Indian-Music.com Blog - August 3, 2010

    [...] Yahoo Maps Collaboration using Flex and BlazeDS – coenraets.org [...]

  18. Bookmark: 60+ Adobe Flex reference websites | Financial Information For Better Life - July 23, 2011

    [...] Tour De Flex Application – insideria.com Developing .NET class – themidnightcoders.com Yahoo Maps Collaboration using Flex and BlazeDS – coenraets.org Integrating Flex into Ajax applications – ibm.com AOL Pictures and Flex [...]

  19. Adobe Suite » Blog Archive Bookmark: 60+ Adobe Flex reference internet sites | Adobe Suite - August 28, 2011

    [...] Tour De Flex Application – insideria.com Developing .NET class – themidnightcoders.com Yahoo Maps Collaboration using Flex and BlazeDS – coenraets.org Integrating Flex into Ajax applications – ibm.com AOL Pictures and Flex [...]

Leave a Reply

css.php