« How To Create a Wildcard Filename Search
» Flash Player 10 Debug is Out

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

How To Add a Custom Marker On Yahoo! Maps

Andrei Ionescu | 14.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

In the previous article I explained how to use Yahoo! Maps. Now I’ll explain how to create a custom marker and how to place it on the map. This is not an easy task because on Yahoo! Developer Network (YDN) there is not enough documentation regarding Yahoo! Maps API for AS3. Take a look at any function found in here and you’ll see that what is there is insufficient.

So… let’s start!

First you need to extend the normal marker class which is a hassle with this lack of documentation.

Secondly you need to add this custom mark to your map which is very simple so we will have two pieces of code: CustomMarker.as (our custom marker) and YahooMapsSimple.mxml (our main application).

Now we will focus on extending the marker class because this is the complex part. All display object will be created in the constructor like this:

  1. set variables
  2. add text object
  3. recalculate the main object width and height based on text objects
  4. reposition text object (centering them vertically)
  5. draw the bubble
  6. add all text objects

I’ll not post the CustomMarker class here but it will be available at the end for download and the code fully commented.

Now here is the application…


You will notice after taking a look at the code there is possible to position the marker separately from the map position. In our case we will see that we use the same coordinates for both.

And the code for YahooMapsSimple application.

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

<?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.markers.events.MarkerEvent;
            import com.yahoo.maps.webservices.local.LocalSearchItem;
            import com.yahoo.maps.api.core.location.LatLon;
            import com.yahoo.maps.api.YahooMap;
            import com.yahoo.maps.api.YahooMapEvent;
            import com.flexer.CustomMarker;
 
            // our map
            private var _yahooMap:YahooMap;
            // our custom marker
            private var _yahooMarker:CustomMarker;
 
            // Yahoo API Id - take it from Yahoo!
            private var _appId:String = "__YOUR_YAHOO_MAP_API_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);
                _yahooMap.addEventListener(
                    YahooMapEvent.MAP_INITIALIZE, handleMapInit);
                // adding map object
                mapHolder.addChild(_yahooMap);
            }
 
            private function handleMapInit(e:YahooMapEvent):void
            {
                // adding controls
                _yahooMap.addPanControl();
                _yahooMap.addZoomWidget();
                _yahooMap.addTypeWidget();
                // centering map
                var latlon:LatLon = new LatLon(44.401314,26.073638);
                _yahooMap.centerLatLon = latlon;
                // setting zoom level
                // smaller means closer
                _yahooMap.zoomLevel = 1;
                // setting data for custom marker
                var xmlItem:XML = 
                    <listing>
                        <title>DesignIT Web Development</title>
                        <addr>Str. Florica, nr. 26, sector 5</addr>
                        <city>Bucuresti</city>
                        <lat>44.401314</lat>
                        <lon>26.073638</lon>
                        <state>Bucuresti</state>
                    </listing>;
                // creating a new local search item
                var myLocalSearchItem:LocalSearchItem = 
                    new LocalSearchItem(xmlItem);
                // creating our custom marker based on local search item
                _yahooMarker = new CustomMarker(0x26333b, latlon, 
                    myLocalSearchItem, "http://www.designit.ro");
                // aading it to the map
                _yahooMap.markerManager.addMarker(_yahooMarker);
            }
        ]]>
    </mx:Script>
</mx:Application>

Bellow are some resources from Yahoo!
http://developer.yahoo.com/maps/
http://developer.yahoo.com/flash/maps/
http://developer.yahoo.com/flash/maps/classreference/index.html
http://developer.yahoo.com/flash/maps/examples.html

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




Tags: , , , , ,

This post was written by Andrei Ionescu

Views: 1956

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="">

:

:


« How To Create a Wildcard Filename Search
» Flash Player 10 Debug is Out