none
Is it possible to change a pushpin icon without refreshing the map? RRS feed

  • Question

  • I am working on a web application for mobile devices. When the user "clicks" on a pushpin I make visible a <div> on the page which forces the map out of the display area of the screen. Using Ajax and PHP the user interacts with a database. When the user has finished his interaction he changes the visibility of the <div> to none allowing the map to "re-appear". At this point I would like to change the pushpin on which he originally clicked so that it is displaying a different icon depending on the result of his interaction with the database.

    I can get this to work if I re-display the whole map having decided on the icons to be displayed using the database but in practice this is too slow when connection speeds to the mobile device are erratic.

    Is there any easy way to just change the one pushpin icon?

     

    • Moved by Ricky_Brundritt Saturday, March 10, 2012 12:33 PM (From:Bing Maps: Map Control and Web services Development)
    Thursday, December 15, 2011 4:49 PM

Answers

  • use setOptions method on pushpin object http://msdn.microsoft.com/en-us/library/gg427615.aspx. You can update the 'icon' pushpinObjects to specify different icon.
    MSFT
    Hemant Goyal
    Thursday, December 15, 2011 6:00 PM
  • Hi Steve. I've put together a sample application to demonstrate how you can change the icon of a pushpin. Simply load this code in a browser and click on the pushpin. The icon will change.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title></title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
          <script type="text/javascript">
            var map = null, pin;
    		var customIcon = "http://www.longtrek.com/LongTrek/Tutorial-MapBoard_files/pushpin1-blue-40x40.png";      
    		var customIcon2 = "http://www.longtrek.com/LongTrek/Tutorial-MapBoard_files/pushpin-purple-40x40.png";   
    
            function GetMap()
            {
                // Initialize the map
                map = new Microsoft.Maps.Map(document.getElementById("myMap"),
                             {credentials:"Bing Maps Key"}); 
    
                pin = new Microsoft.Maps.Pushpin(map.getCenter(), {icon:customIcon, width:40, height: 40}); 	
    			Microsoft.Maps.Events.addHandler(pin, 'click', toggleIcon);
                map.entities.push(pin);
            }
    
    		function toggleIcon(e){
    			if(e.target.getIcon() == customIcon){
    				e.target.setOptions({icon : customIcon2});
    			}else{
    				e.target.setOptions({icon : customIcon});
    			}
    		}
          </script>
       </head>
       <body onload="GetMap();">
          <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
       </body>
    </html>
    


    http://rbrundritt.wordpress.com
    Friday, December 16, 2011 4:32 PM

All replies

  • Which map control are you using? If you are using JavaScript then there is no need to ever reload your page.
    http://rbrundritt.wordpress.com
    Thursday, December 15, 2011 5:10 PM
  • Hi Richard,

    I am using javascript on V7.0 so that is great to hear.

    I  am new to this so do you know how I change the icon on the individual pushpin? I have looked but all the example code that I have found starts with loading the map

    Thanks Steve


    Steve
    Thursday, December 15, 2011 5:17 PM
  • use setOptions method on pushpin object http://msdn.microsoft.com/en-us/library/gg427615.aspx. You can update the 'icon' pushpinObjects to specify different icon.
    MSFT
    Hemant Goyal
    Thursday, December 15, 2011 6:00 PM
  • Hi Hemant,

    I am sure it is me missing something simple but I have been looking at the page you refer to all day and trying any number of things without success.

    The example starts with getting the map (refreshing the whole page). Is there a line of javascript to instruct the single pushpin pp1 to use the icon "icons/c1f.png" without refreshing the whole map?

    Thank you for your help

    Steve


    Steve
    Thursday, December 15, 2011 6:32 PM
  • Here you go http://www.bingmapsportal.com/ISDK/AjaxV7#Pushpins2

    use same pushpinOptions variable in setOptions. variable 'virtualpath' to blank.


    MSFT
    Hemant Goyal
    Thursday, December 15, 2011 6:40 PM
  • HI Hemant,

    I have spent a lot of time looking at that page as well. I know I must be missing something really simple but whatever it is is beyond me.

    The example again begins with getting the map (refreshing the whole page).

    Really sorry to be a pain.

     

    Steve


    Steve
    Thursday, December 15, 2011 6:57 PM
  • Hi Steve. I've put together a sample application to demonstrate how you can change the icon of a pushpin. Simply load this code in a browser and click on the pushpin. The icon will change.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title></title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
          <script type="text/javascript">
            var map = null, pin;
    		var customIcon = "http://www.longtrek.com/LongTrek/Tutorial-MapBoard_files/pushpin1-blue-40x40.png";      
    		var customIcon2 = "http://www.longtrek.com/LongTrek/Tutorial-MapBoard_files/pushpin-purple-40x40.png";   
    
            function GetMap()
            {
                // Initialize the map
                map = new Microsoft.Maps.Map(document.getElementById("myMap"),
                             {credentials:"Bing Maps Key"}); 
    
                pin = new Microsoft.Maps.Pushpin(map.getCenter(), {icon:customIcon, width:40, height: 40}); 	
    			Microsoft.Maps.Events.addHandler(pin, 'click', toggleIcon);
                map.entities.push(pin);
            }
    
    		function toggleIcon(e){
    			if(e.target.getIcon() == customIcon){
    				e.target.setOptions({icon : customIcon2});
    			}else{
    				e.target.setOptions({icon : customIcon});
    			}
    		}
          </script>
       </head>
       <body onload="GetMap();">
          <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
       </body>
    </html>
    


    http://rbrundritt.wordpress.com
    Friday, December 16, 2011 4:32 PM
  • Hi Richard,

    Thank you for the help you are giving me. I have looked at the example above and can see how it works.

    My problem is that when the user clicks on the pin, I do not know at that stage which icon to change to. It is only after the interaction with the database that I know what to change the icon to.

    At that point I do not have an "event" on the map that can trigger the change of icon. Is there a way of creating a virtual event on the map to trigger this?

    Stephen

     


    Steve
    Saturday, December 17, 2011 11:01 AM
  • But the change of icon is still initiated by a mouseclick, right?

    Why not just add whatever logic you need to determine which icon to display (including, say, interacting with a database) into the toggleIcon() method? e.g. Make an XMLHttpRequest to a handler that executes a stored procedure in the database - when the result is returned use a callback method to process the response and change the icon as appropriate.


    twitter: @alastaira blog: http://alastaira.wordpress.com/
    Saturday, December 17, 2011 11:40 AM
    Moderator
  • Hi tanashimi,

    The change of icon needs to be initiated by a mousclick but not on the map. At the moment the user clicks on a button which calls the following script.

    <script type="text/javascript">function submitmaprtn1(maprtn1){document.getElementById("cluepp1").style.display = "none"; } </script>

    This just gets rid of the part of the page they are on allowing the map to become visible again on the mobile screen.

    There is not a click on the map.

    Stephen


    Steve
    Saturday, December 17, 2011 12:11 PM
  • Hi,

    As I wasn't getting very far I decided to change the icon when I first click on it. The icon changes when I first click on it but about a second later returns to the original icon. I am really at a loss as to what is hapenning here.

    Here is the code I am using (sorry it is wrapped up in the php script that is generating it)

    To make it easier to see what I am doing at this stage I I have split the code into 2 the first part generating the pushpins and the second creating the functions.

    $query="SELECT * FROM gpsteamans WHERE GROUPID = $gid AND teamid = $tid ";
    $result=mysql_query($query);
    while($row = mysql_fetch_array($result))
    {
        $cluedisp.= "var pp".$row['clueid']."= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(".$row['clat'].",".$row['clong']."),{icon: 'http://www.huntfun.co.uk/Apps/icons/C".$row['ctype']."".$row['done'].".png', width: 24, height: 24, zindex: 9, anchor:new Microsoft.Maps.Point(12,12), }); map.entities.push(pp".$row['clueid']."); Microsoft.Maps.Events.addHandler(pp".$row['clueid'].", 'click', getClue".$row['clueid'].");";
    }   
       
    $query="SELECT * FROM gpsteamans WHERE GROUPID = $gid AND teamid = $tid ";
    $result=mysql_query($query);
    while($row = mysql_fetch_array($result))
    {
    $cluefunc.= "function getClue".$row['clueid']."(e) { if(e.target.getIcon() == 'http://www.huntfun.co.uk/Apps/icons/C1T.png'){
                    e.target.setOptions({icon : 'http://www.huntfun.co.uk/Apps/icons/C1S.png'});
    }else {e.target.setOptions({icon : 'http://www.huntfun.co.uk/Apps/icons/C1F.png'})};
    document.getElementById(\"cluepp".$row['clueid']."\").style.display = \"inherit\"; }";

    }


    Steve
    Saturday, December 17, 2011 8:33 PM