FLEX{er}

How To Add a Custom Marker On Yahoo! Maps

Andrei Ionescu | 14.08.08 | 11 Comments

How To Use Yahoo! Maps in Flex
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:

set variables
add text object
recalculate the main object width and height based on text objects
reposition text object (centering them vertically)
draw the bubble
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.

<?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:

YahooMapsSimple

YahooMapsSimple_sources

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Tags: ActionScript, api, Components, maps, MXML, yahoo

This post was written by Andrei Ionescu

Views: 7078

11 Comments

On 08.14.08 Nathan wrote these pithy words:

You should also set the autoSize property on the _urlText TextField.

Wish I had come across this a few days ago!

On 08.15.08 Andrei Ionescu wrote these pithy words:

Yes, Nathan! If you intend to make the content of the _urlText dynamic that is a must. But in this example we are displaying only a predefined text: “website”.

Thanks and I’m sorry you didn’t had this article when you need it.

On 08.18.08 David wrote these pithy words:

I like your example, the marker is very nice and clean looking.

Do you know how to make it into a POI marker? In other words, you hover your mouse over (or click) the marker and it shows the text?

I found an example of how to create a POI (Point Of Interest) marker
here:
http://developer.yahoo.com/maps/flash/flexGettingStarted.html

Come to find out I need to
import com.yahoo.maps.markers.CustomPOIMarker;

I’m struggling to find where I can download CustomPOIMarker.as

I found a version of it here:
http://modestmaps.mapstraction.com/trac/browser/trunk/reference/YahooMaps/com/yahoo/maps/markers/CustomPOIMarker.as?rev=7

However, when I download that and import it into my Flex app, I get
errors in using it.

Specifically I get the error:
“A file found in a source-path must have an externally visible
definition. If a definition in the file is meant to be externally
visible, please put the definition in a package.”

Does anyone know how to use CustomPOIMarker in Flex and where can I
download a public package of it?

On 08.18.08 Andrei Ionescu wrote these pithy words:

David, take a look at the following examples:

http://www.brucephillips.name/flex/yahoomaps/yahoomapsex4/yahoomapsex4.html
http://modestmaps.mapstraction.com/trac/browser/trunk/reference/YahooMaps/com/yahoo/maps/markers/CustomPOIMarker.as?rev=7
http://www.brucephillips.name/blog/index.cfm/2008/2/14/Using-The-New-Yahoo-Maps-ActionScript-3-API–Create-Your-A-SearchMarker-Using-Your-Own-Data – go to Christopher Keeler’s comment – he did something like me but more complex

On 04.23.09 justin wrote these pithy words:

Where’s the custommarker.as code?

On 04.23.09 Andrei Ionescu wrote these pithy words:

Justin, as I said in the article:

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

the code for CustomMarker can be found in the archive at the end (ready for download) – YahooMapsSimple_sources.

Don’t know how you missed that part

On 04.24.09 justin wrote these pithy words:

No, I didn’t miss it. THE END OF WHAT? The page? Nope. The end of the day/year/world? Your last reply wouldn’t have been to terse and unhelpful if you’d just put the link.

On 04.25.09 Andrei Ionescu wrote these pithy words:

Justin there is no need to be rude… I just trying to help you. The source files can be downloaded just above the amazon ad. All source files are archived in a zip file and can be downloaded from there. So your rudeness doesn’t belong here. And there is no need to put any link for it because it is already there – a link to download all source files. CustomMarker.as is in com/flexer/ folder of the YahooMapsSimple_sources. The CustomMarker.as file is not put separately but together with the project and I will not put is separately. Hope you can understand this.

On 04.27.09 justin wrote these pithy words:

I have found the link now, thank you. I felt that the first act of rudeness was your response to my first query. The direction, “At the end,” was ambiguous. When asked to clear up that ambiguity, you simply pasted and earlier part of the page into a comment box. Treating people you don’t know like idiots is rude.

On 04.27.09 Andrei Ionescu wrote these pithy words:

A simple “sorry” would be enough!

On 04.30.09 justintime wrote these pithy words:

Who is that rude ‘justin’ tosser? What an unappreciative git.

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

How To Create a Wildcard Filename Search

Flash Player 10 Debug is Out