Fx{r} is trying to start the Fx{r} Community! Please join our group on Adobe Groups following this link: http://groups.adobe.com/groups/ab29539ab9.
Fx{r} is now on Twitter too. Follow us @ twitter.com/fx_r!
« Some Stats About Flash Player and Browsers
» Flex Won “Best of Open Source Developer Tools”

ActionScript, Flex Builder 3, How to, MXML, RIA

How To Use Yahoo! Maps in Flex

Andrei Ionescu | 04.08.08 | 4 Comments

Table of contents

  1. How To Use Yahoo! Maps in Flex
  2. How To Add a Custom Marker On Yahoo! Maps

This article will explain how to integrate the Yahoo! Maps into your Flex application. Is important to know that in this we are using Flex Builder 3 and that the example and the code won’t work in Flex Builder 2 (it seems that in Flex Builder 2 there are some compiling problems with the SWC file).

What you need? Just three things:

  1. Adobe Flex Builder 3
  2. Yahoo! Maps component/library
  3. Yahoo! Maps API Key

Now that you got both copy the YahooMap.swc file from the downloaded archive and copy it into your /libs/ folder of you Flex application (the file is in /YahooMap/Build/Flex/ folder in your archive).

Now the code… is simple and commented that you may easy understand how to use Yahoo! Maps.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute"
    width="600"
    height="600"
    creationComplete="init()">
    <mx:UIComponent id="mapHolder"
        width="100%"
        height="100%"/>
    <mx:Script>
        <![CDATA[
            import com.yahoo.maps.api.YahooMap;
            import com.yahoo.maps.api.YahooMapEvent;
            import com.yahoo.maps.api.core.location.Address;
            import com.yahoo.maps.webservices.geocoder.GeocoderResult;
            import com.yahoo.maps.webservices.geocoder.events.GeocoderEvent;
 
            import mx.controls.Alert;
 
            private var _yahooMap:YahooMap;
            private var _address:Address;
 
            // Yahoo API Id - take it from Yahoo!
            private var _appId:String = "_REPLACE_THIS_WITH_YOUR_KEY_";
 
            // initialization
            private function init():void 
            {
                // new yahoo map
                _yahooMap = new YahooMap();
                // setting its apiId, width and height 
                _yahooMap.init(_appId, mapHolder.width, mapHolder.height);
                // adding controls
                _yahooMap.addPanControl();
                _yahooMap.addZoomWidget();
                _yahooMap.addTypeWidget();
                // adding map object
                mapHolder.addChild(_yahooMap);
                // searching for "Bucharest"
                geocodeAddress("Bucharest");
            }
 
            // geocoding address
            // from "Bucharest" to geocode coords
            private function geocodeAddress(value:String):void 
            {
                // new Address object
                _address = new Address(value);
                // aading success and failure events
                _address.addEventListener(GeocoderEvent.GEOCODER_SUCCESS, 
                    address_geocoderSuccess);
                _address.addEventListener(GeocoderEvent.GEOCODER_FAILURE, 
                    address_geocoderFailure);
                // trying to geocode
                _address.geocode();
            }
 
            // handle event for successful geocoding
            private function address_geocoderSuccess(evt:GeocoderEvent):void 
            {
                // getting the result after geocoding
                var result:GeocoderResult = 
                    Address(evt.target).geocoderResultSet.firstResult;
                // setting the map to the found location
                _yahooMap.centerLatLon = result.latlon;
                // setting zoom
                _yahooMap.zoomLevel = result.zoomLevel;
            }
 
            // handle event for unsuccessful geocoding
            private function address_geocoderFailure(evt:GeocoderEvent):void 
            {
                // just display an alert
                Alert.show("Unable to get to the address: " + _address.address);
            }
 
        ]]>
    </mx:Script>
</mx:Application>

This is all for now.

Some resources:
http://developer.yahoo.com/flash/maps/
http://developer.yahoo.com/flash/maps/examples.html
http://developer.yahoo.com/flash/maps/classreference/index.html

Share and Enjoy:
  • TwitThis
  • Technorati
  • StumbleUpon
  • del.icio.us
  • NewsVine
  • Reddit
  • Digg
  • Furl
  • co.mments
  • blogmarks
  • Slashdot
  • description
  • Taggly
  • YahooMyWeb
  • connotea
  • Webride




Tags: , ,

This post was written by Andrei Ionescu

Views: 3519

related

4 Comments

have your say

Add your comment below, or trackback from your own site. Subscribe to these comments.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

:

:


« Some Stats About Flash Player and Browsers
» Flex Won “Best of Open Source Developer Tools”