Table of contents
- 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.
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
| ||
|
Tags: ActionScript, api, Components, maps, MXML, yahoo
This post was written by Andrei Ionescu
Views: 7078










You should also set the autoSize property on the _urlText TextField.
Wish I had come across this a few days ago!
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.
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?
David, take a look at the following examples:
Where’s the custommarker.as code?
Justin, as I said in the article:
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
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.
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.
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.
A simple “sorry” would be enough!
Who is that rude ‘justin’ tosser? What an unappreciative git.