Yahoo! Map custom markers in Flash CS.3

I already posted a small tutorial on how to implement a Yahoo! map into your Flash Actionscript project, if you did not read it check it here.

In this post i will show you briefly on how you can change the standard map marker into any custom marker. Basically we can just send a movieclip to the map marker manager to attach as marker.

Standard Marker

Below is the Actionscript code you can use to achieve a custom marker , this is just a movieclip that is attached to the SimpleMarker and can be used to make the map more interactive by example including buttons or other components inside this movieclip …

Custom Marker Clip with linkage name : markerClip

Following the code above, the outcome would be something like this , but than with your custom image as marker

Final Outcome

Yahoo! Map Component in Flash CS 3

In this blogpost i will guide you through the process of bringing a Yahoo! map control in to your Flash AS3 project …

At the end of this post , this is what you basicly will get , a basic Yahoo! map … Which i will later explain how you can add the ‘cool stuff’ ….

What will we need before we can get to the fun stuff?

- Like most API’s we will need a developer key , get yours here.

- The Yahoo! Map component , which you can get here. This is not really necessary , but it contains some usefull documentation…

Now its time for the real thing … So open up Flash CS 3

Imports

//Imports

import com.yahoo.maps.api.YahooMap;
import com.yahoo.maps.api.YahooMapEvent;
import com.yahoo.maps.api.core.location.LatLon;

Creating a Yahoo! Map Object in Flash Actionscript CS 3

//Here we will create a new Yahoo map object

var _map:YahooMap = new YahooMap();

Initialising the Yahoo! Map Object in Flash Actionscript CS 3

//A variable of type String which keeps record of our development key (change this is your personal key)

var appid:String = “xLxU4IfV34GgQYVTKlXVMIV4V0M_0mUKqb5m7JWDRF9CIEUoGzqUKyth_uqXd5uW824-”;

//Here we initialize the Yahoo! Map component (our development key , the map widht , the map height)

_map.init(appid,stage.stageWidth,stage.stageHeight);

//Add a event listener to listen to the finish of the initialisation

_map.addEventListener(YahooMapEvent.MAP_INITIALIZE, onMapInit);

function onMapInit(event:YahooMapEvent):void
{

//Pancontrol = the ability to drag the Yahoo! Map around

_map.addPanControl();

//Zoomwidget = Zoom Out and Zoom In control

_map.addZoomWidget();

// TypeWidget = Map Type Buttons

_map.addTypeWidget();

//Setting the beginning zoom level

_map.zoomLevel = 5;

//telling our map component what location will be showed at start up,

//if we forget this, the map will show blank

//Required – Longtitude and Latitude of your favourite location

_map.centerLatLon = new LatLon(50.4026,5.52506);

//Addind our map to the display

addChild(_map);

}