05
Apr
07

Show the marker on the map on the click on the map

Hi,

Girish had written a comment in my post of Yahoo maps communication toolkit , upto my understanding I think he is trying to put some marker whenever user clicks somewhere on the map.

I tried to solve the problem and was amazed to find out that point object which is returned by the onClick method of the map is of the type string πŸ™‚

So its the question of some string manipulation and some of the type conversion and i am able to show the marker whenever user clicks on the map.

So here is the code I think it might be useful to others also


//Create the event listner which listens to the click event on the map
mapEventDispatcher = new MapEventDispatcher(myAS2Map);
//Attach the event listner to the click event of the map
mapEventDispatcher.addEventListener("onClick",mapClicked);


//Function to handle the click event
private function mapClicked(ev:MapEvent):void{


//Variable to hold the position of opening and closing parenthesis
var posofbracket1:int = new int();
var posofbracket2:int = new int();


//Variable to hold the string object which contains lat and lon information
var point:String= new String();


//Assign the latlon string to the point string
point = ev.lastResult.latlon;


//Find out the position of opening parenthesis
posofbracket1 = point.toString().indexOf("(");


//Find out the position of closing parenthesis
posofbracket2 = point.toString().indexOf(")");


//Slice the string so you have lat and lon comma seperated
var latlon:String= point.toString().slice(posofbracket1+1,posofbracket2-1);


//Split the lat and lon and store them in the array
var splitedLatlon:Array = latlon.split(",",2);


//Convert the lat and lon to number type
var latitude:Number = Number(splitedLatlon[0].toString());
var longitude:Number = Number(splitedLatlon[1].toString());


//Add a marker using this lat and lon values
latlonController.addMarkerByLatLon('WaypointMarker',longitude,latitude,null);
}

I hope that solves the problem

If you have any other query do write to me πŸ™‚

P.S: You can achieve this by changing the as2map.fla file also :), but i like to work on Flex 2.0

Cheers,

Anupam

Advertisements

20 Responses to “Show the marker on the map on the click on the map”


  1. 1 G
    April 5, 2007 at 3:25 pm

    Hey Anupam,

    Thanks for this post. Where do you declare latlonController? In mapClicked() or outside? It seems I am getting an error if I call the event ‘onClick’ and the function name ‘mapClicked’.

    Also, I am declaring my map service as:

    Do I need to include any other attributes for YahooMapService?

    Thanks again

  2. 2 G
    April 5, 2007 at 3:26 pm

    my code was not posted, YahooMapService code:

    yahoo:YahooMapService id=”myAS2Map” UUID=”{UNIQUEID}”
    swfDomId=”{SWFDOMID}” apiId=”{YAHOOAPIKEY}” mapURL = “{MAPSWF}”
    scaleContent=”false”

  3. 3 G
    April 5, 2007 at 3:55 pm

    Wowo, nevermind Anupam, it is at last working. Thank you so much.
    Previously, I was modifying the as2map.fla file, but it seems handling the Point object as a String leads to better results. I’m still not sure why my previous method was not working, but no matter!

    I may have other interesting problems with Yahoo Maps, I will let you know if I come across anything! thx πŸ™‚

  4. April 6, 2007 at 6:36 am

    Hi Girish,
    I am declaring latlon controller as a private variable so it remains available across all the methods.
    I am attaching the map instance to it in the onMapLoaded event handler.
    Here is the code which look like

    private var mapController:MapController;
    private var mapEventDispatcher:MapEventDispatcher;
    private var latlonController:LatLonController;

    private function init():void {
    myAS2Map.addEventListener(‘onMapLoad’, onMapLoaded);
    myAS2Map.addEventListener(‘onMapError’, onMapError);
    }

    private function onMapLoaded(ev:Object):void {
    mapController = new MapController(myAS2Map);
    latlonController = new LatLonController(myAS2Map);
    mapEventDispatcher = new MapEventDispatcher(myAS2Map);
    mapEventDispatcher.addEventListener(“onClick”,mapClicked);

    }

    I hope that helps.

    Cheers!
    Anupam

  5. 5 G
    April 11, 2007 at 12:09 am

    Hello Anupam,

    I want to put a yahoo map in a VDividedBox, so that I can have a panel below the map which can be dragged up and down. In order to properly do this, the yahoo map must also become bigger and smaller as one drags the VDividedBox. Do you know if this is possible?

    Here is my code so far. I was hoping that on dividerRelease I could re-init the map. Unfortunately, the map does not change size and I cannot drag the lower panel higher than the lowest point of the map. Thx!:)

  6. 6 G
    April 11, 2007 at 12:11 am

    Sorry, HERE is the code:

    mx:VDividedBox id=”vdb” right=”5″ top=”5″ bottom=”5″ left=”285″ dividerRelease=”init();”

    mx:Canvas width=”100%” top=”5″ bottom=”5″ backgroundColor=”#99CCFF”

    yahoo:YahooMapService id=”myAS2Map” UUID=”{UNIQUEID}”
    swfDomId=”{SWFDOMID}” apiId=”{YAHOOAPIKEY}” mapURL = “{MAPSWF}”
    scaleContent=”false”
    /mx:Canvas

    mx:Canvas label=”Canvas 2″ width=”100%” height=”100%” backgroundColor=”#99CCFF”>
    mx:Label text=”Add components here” fontWeight=”bold”/>
    /mx:Canvas>

    /mx:VDividedBox>

  7. 7 Shiv nikum
    April 24, 2007 at 7:34 am

    hi
    dear Anupam,

    i am unable to use u top most code explained (as2map.fla ) when i use this i gives me an error

    this is the error
    ==========
    **Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 9: The class or interface ‘MapEvent’ could not be loaded.
    function mapClicked(ev:MapEvent):void

    this is the code
    =========
    //Create the event listner which listens to the click event on the map
    mapEventDispatcher = new MapEventDispatcher(myAS2Map);
    //Attach the event listner to the click event of the map
    mapEventDispatcher.addEventListener(“onClick”,mapClicked);

    //Function to handle the click event
    function mapClicked(ev:MapEvent):void
    {
    //Variable to hold the position of opening and closing parenthesis
    var posofbracket1;
    var posofbracket2;
    //Variable to hold the string object which contains lat and lon information
    var point:String= new String();
    //Assign the latlon string to the point string
    point = ev.lastResult.latlon;
    //Find out the position of opening parenthesis
    posofbracket1 = point.toString().indexOf(“(“);
    //Find out the position of closing parenthesis
    posofbracket2 = point.toString().indexOf(“)”);
    //Slice the string so you have lat and lon comma seperated
    var latlon:String= point.toString().slice(posofbracket1+1,posofbracket2-1);
    //Split the lat and lon and store them in the array
    var splitedLatlon:Array = latlon.split(“,”,2);
    //Convert the lat and lon to number type
    var latitude:Number = Number(splitedLatlon[0].toString());
    var longitude:Number = Number(splitedLatlon[1].toString());
    //Add a marker using this lat and lon values
    latlonController.addMarkerByLatLon(‘WaypointMarker’,longitude,latitude,null);
    }

    plz help me out dear

  8. 8 Shiv nikum
    April 24, 2007 at 7:36 am

    hi there,

    and please help me out if there is any way to zoom the map on click mouse and to get the address of clicked location.

    i am unable to zoom the map on particular location and to get the address

    plz help me dear

    thanks

  9. April 24, 2007 at 12:56 pm

    Hi Shiv,

    I think you are mistaken, the code which i have written that you dont need to write in as2map.fla file this is the code which you need to write in the mxml file in which you have put your yahoo map component.
    Put the code in the in Flex 2.0 and it should work.
    I am not much aware about how to achieve this same functionality using Flash.
    But you can achieve the same functionality by using Flex.

    I hope this helps.
    If you have ne doubt do write it here.
    Cheers!
    Anupam

  10. 10 Shiv nikum
    May 4, 2007 at 7:33 am

    Thanks dear anupam

  11. 11 Shiv nikum
    May 5, 2007 at 6:14 am

    hi every one,

    i want to animate map when i click particular location and i want to load that image and animate that image.

    like:- when i click the map i want to get the location and load the map, image in flash and tween the particular image like after loading.

    is it posible to load clicked location and animate the image plz heklp me out

  12. 12 Elias
    August 28, 2007 at 1:32 pm

    Hi
    I see this post has been made a long time ago but i’m just now getting to know yahoo maps and i’m using the new communication kit for as3 but i have some questions :

    1- I can’t add custom swf marker, except if it has only an image i’d like to be able to show more data

    2- I want to make draggable markers, i don’t know how, it seems there was a marker class, but with this communication kit it’s gone.

    3rd- i’d like to be able to show some photos associated with markers, how can i do that?

    thanks

  13. September 3, 2008 at 6:26 pm

    For anyone searching for how to do this in Flash AS2, this helped me put this together:

    // New listener Object
    var mapListener:Object = new Object();
    // Add listener to map with “onClick” parameter
    myAS2Map.addEventListener(“onClick”, mapListener);
    // Tell the listener what to do when that event is thrown
    mapListener.onClick = function (event) {
    // lat and lon are contained in a LatLon object, targeted like this;
    var lat:Number = event.latlon.lat;
    var lon:Number = event.latlon.lon;
    // Add marker to the map
    var markerData:Object = {id:1, title:myTitle, url:type, useClip:true};
    myAS2Map.addMarkerByLatLon(CustomSWFMarker,new LatLon(points.lat, points.lon),markerData);
    }

    Enjoy!

  14. 14 mehdi
    September 13, 2012 at 3:46 am

    hi my Friend. i am problem in use of addeventlistener()
    .

    i want too create several addeventlistener() in for()but evry tim send diffrent arguman to may function .

    but when i do just send The latest data to my function 😦
    *************************************************************************************************************************
    example:

    for(var j:int=0;j<5;j++)
    {

    m=new Marker(new LatLng(list[i].lat,list[i].lon),opts);

    m.addEventListener(MapMouseEvent.CLICK,function (){ontest2(j);},false);
    map.addOverlay(m);
    }

    public function ontest2(k):void
    {
    mess:String=String(k);
    Alert.show("helloooooo",mess);

    }
    **********************************************************************************************************************************

    i want to every tim i click on the marker show j Same addeventlistener . no latest j

    please help me 😦 plz plz plz

    thank you

  15. June 15, 2013 at 8:06 am

    Wow, that’s what I was looking for, what a material! present here at this web site, thanks admin of this web site.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Its Me

April 2007
M T W T F S S
« Mar   Jun »
 1
2345678
9101112131415
16171819202122
23242526272829
30  

Categories

Blog Stats

  • 10,455 hits

My Links

Amazon Wish List

My Amazon.com Wish List

%d bloggers like this: