How to use Yahoo! Maps in Flex
You need to know that most of the classes in the Yahoo! Maps API are based on Sprites and because of that we can add as child any shape that we can create in our custommarker. In the constructor the following things happen: • Call super • Position the custommarker • Set the colors, web site and local search item • Create a drop-shadow effect • Create the details text fields and their formats – the texts for the fields is taken from the _localSearchItem object, but the web site is taken from the _web variable. • Create the nice looking bubble • Add the text fields to the bubble • Add the whole bubble to the custom marker This is what is happening in there. createBubble function is a drawing function that creates the bubble which will contain the details. The process is not very complex. You can play with tipShape array to modify the form of the bubble. Three more function – event handlers – will take care of the mouse over effect for the hyperlink and the click on it. The code, see (Listing 3) contains the source code for the CustomMarker component. (Figure 2) shows how the custommarker will look like. Conclusion The Yahoo! Maps API for Flex is a powerful API and the maps provided by Yahoo! are complete even in not very know parts of the world. More powerful things can be done starting with a collapsible marker and going further playing a video in a marker. ANDREI CRISTIAN IONESCU Andrei Cristian Ionescu is a Web Developer with 10 years of experience. Is co-founder of DesignIT Web Development http://www.designit.ro company and author of numerous articles on Fx{r} http:/ /www.flexer.info blog. He’s also co-manager of Flexer Community which is a new international community raised around Fx{r} blog. His expertise includes Flash, Flex, AIR, Actionscript, XHTML, Javascript, CSS, PHP and SQL but not limited there. Andrei likes to innovate and to combine different technologies, architectures and programming languages. When not working he spends time with his family and tries to know God as much as possible.
On the ‘Net
http://www.flexer.info
•
• http://www.flexer.info/2008/08/04/how-to-use-yahoo-maps-in-flex/ • http://www.flexer.info/2008/08/14/how-to-add-a-custom-marker-on-yahoo-maps/ • http://developer.yahoo.com/flash/maps/getLatest.php • http://developer.yahoo.com/flash/maps/ • http://developer.yahoo.com/flash/maps/examples.html • http://developer.yahoo.com/flash/maps/classreference/index.html
When creating the custom marker we give the following parameters in constructor: color of the marker, geo-point, local search item and the website. We choose to send the website separately from the LocalSearchItem because there is no available node for this kind of property. The code (Listing 2) contains the code for the main application. Explaining CustomMarker In our custom marker we need to display the following details:
• Title/Company name • Address • City • State/County • Web site
These are the five details we want to show but for the website we want to act like hyperlink, so we need the underlining effect implemented. Related to these five details we will have some text formats to shape out the text in the marker.
03/2009 (5)
51
Made with FlippingBook HTML5