Yahoo AS3 Maps: Real Estate Schtuff

A couple months ago, I created a Yahoo! map component for a real estate project my team worked on. I have talked about the Yahoo! Map API before, and well, just figured I’d post this project.

I really like how easy it is to integrate your own graphic elements into Yahoo! maps. Adding markers is also a breeze. You can associate a marker with a groups for easy referencing ( marker management was a pain in the previous version ).

Overall, the AS3 API saved me on this project. I had built a previous AS2 version and the performance was shakey. To be fair the previous version used had a lot of complex polygons ( each neighborhood on the map was a clickable button that zoomed the map into that neighorhood). Issues with markers and polygons not being destroyed properly really made it unusable. Its nice to see a shiney new AS3 API that has taken care of the performance troubles, runs natively in your AS3 project, and integrates with Yahoo! other great APIs seamlessly.

On the site, the same map SWF is used in a few different ways. AMFPHP and embedded JSON handle all the property data. For instance, on the homepage, the map checks queries our DB for the top 20 properties within that bounding box. On the search results page, the map will plot properties based on embedded JSON data. Finally, when viewing an individual property, JSON data agin tells the map what property to plot (and to use a slightly different marker/bubble combination).

I have included the source files for the basic Yahoo Map implementation with the Yahoo LocalSearch implemented (finding the bars/schools/restaurants, etc….). I had to leave out the remoting services that find the properties, but hopefully its a helpful example. Yahoo! Map API demo source files

7 Responses to 'Yahoo AS3 Maps: Real Estate Schtuff'

  1. Greg Bown says:

    Awesome job I wanted to build something similar and have been playing around with amfphp and comparing the Google and Yahoo Flash API. Your example swayed me towards Yahoo. Question did you use MXML or pure AS? If pure AS could you post or email an example? Thanks

  2. thanks greg. this was completely AS3, I seem to have an aversion to MXML :) Although the Google Map Flash API was not released until after this project wrapped, I would still use the Yahoo! API if i were starting now.

    I would love to post the full source for the example above, but I am not sure that would fly with the client, so I will include an example of just the Yahoo! Map and its LocalSearch functionality. I just have to leave out the remoting services and the connections and calls to their server. You should be able to see how I approached the custom marker creation, etc… Hope it helps!

  3. joshua says:

    Really great job. I was just working on something like this with ajax and yahoo, and figured I would try a prototype in flex. You gave me a very high bar to aspire to for my first ever flex project. :-) The custom markers are great btw.

    One thing you may want to clarify: is this open and available for anyone to use (the source you provided) as you also include assets and such. It’s useful as a guide, but even more useful as a base. :-)

    Best,
    Joshua

  4. Hey Josh, feel free to use the code as a learning tool and a base for your project if you’d like… you are very right about the assets though (marker graphics)… those cannot be reused for any other projects. i will toss a readme file in the source package.

  5. James says:

    Jonathan-

    Just came on your postings today. Have you done work with .net as well? I’d love to talk with you about a project for our site when you have time.

  6. Jim Grapes says:

    I’d like do one of these with all the condo/loft projects downtown Spokane.

  7. Hi there to every body, it’s my first pay a quick visit of
    this web site; this weblog consists of amazing and in fact good information designed for
    visitors.

Leave a Reply

Your email address will not be published. Required fields are marked *

*