none
VEMap Pushpin z-index issue RRS feed

  • Question

  • I have inherited a project where we are receiving a list of locations from our database and adding them to the map. The pushpin z-indexing seems to happen in the order the map receives them from the database rather that doing the indexing based on longitude, which should really always be the case. I am trying to find a way to adjust the z-index without having to reorder the set before passing it to the map.

    Is there a simple way to accomplish this where the z-indexing default is by longitudinal value?

    Thanks.

    • Moved by Ricky_Brundritt Friday, March 9, 2012 6:15 PM (From:Bing Maps: Map Control and Web services Development)
    Thursday, June 30, 2011 4:28 PM

Answers

  • Store your data in an array and use JavaScript to sort it. Assuming your data set is at most a few thousand points this would take no time at all. Here is a simple code block:

    testData = testData.sort(compareLatitudes);
    		 
    function compareLatitudes(a, b){
    	return b.latlong.latitude - a.latlong.latitude;
    }
    

    Here is a full working example:

    <!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;
    		 var testData = [
    						{name:'pin1',latlong:new Microsoft.Maps.Location(45,-100)},
    						{name:'pin2',latlong:new Microsoft.Maps.Location(43,-110)},
    						{name:'pin3',latlong:new Microsoft.Maps.Location(48,-90)},
    						{name:'pin4',latlong:new Microsoft.Maps.Location(40,-120)}
    						];
    
         function GetMap()
         {
          // Initialize the map
          map = new Microsoft.Maps.Map(document.getElementById("myMap"),
                 {credentials:"Bing Maps Key"}); 
         }
    
        function compareLatitudes(a, b){
    			return b.latlong.latitude - a.latlong.latitude;
    		}
    		
    		function addPushpins(sortOrder){
    			map.entities.clear();
    			
    			var t;
    			
    			switch(sortOrder){
    				case 0:		//sort by descending order based on latitude
    					t = testData.sort(compareLatitudes);
    					break;
    				case 1:		//sort by ascending order based on latitude
    					t = testData.sort(compareLatitudes).reverse();
    					break;
    				default:	//do not sort data
    					t = testData;
    					break;
    			}
    
    			for(var i=0;i<t.length;i++){
    				var pin = new Microsoft.Maps.Pushpin(t[i].latlong); 
    				map.entities.push(pin);
    			}
    		}
       </script>
      </head>
      <body onload="GetMap();">
       <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
    	 <br/>
    	 Sort and add data based on Latitude property:
    	 <br/>
    	 <input type='button' onclick='addPushpins()' value='Unorder'/>
       <input type='button' onclick='addPushpins(0)' value='Ascending Order'/>
    	 <input type='button' onclick='addPushpins(1)' value='Descending Order'/>
      </body>
    </html>
    



    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    Friday, July 1, 2011 3:01 PM

All replies

  • I have never heard of anyone z-index based on the longitude. Having the z-index based on the order is important as you can sort your data any way you want and have it layered accordingly. The only way to do what you want is to sort the data by longitude. Note that depending on how your pushpin is designed ordering by Longitude may not be ideal.
    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    Thursday, June 30, 2011 5:21 PM
  • I'm an idiot...I meant latitude - so that the pushpins that are at a lower point on the map have the highest z-index. Sorry.
    Thursday, June 30, 2011 5:23 PM
  • If you're retrieving the point locations from a database, isn't this as simple as adding an ORDER BY latitude DESC clause to your SELECT statement?
    twitter: @alastaira blog: http://alastaira.wordpress.com/
    Thursday, June 30, 2011 6:47 PM
    Moderator
  • The problem is the results have to be ordered one way for the page, and then reordered for the map. I'm just not sure what the best way to handle this is.

    Thanks for your help.

    Thursday, June 30, 2011 6:58 PM
  • Store your data in an array and use JavaScript to sort it. Assuming your data set is at most a few thousand points this would take no time at all. Here is a simple code block:

    testData = testData.sort(compareLatitudes);
    		 
    function compareLatitudes(a, b){
    	return b.latlong.latitude - a.latlong.latitude;
    }
    

    Here is a full working example:

    <!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;
    		 var testData = [
    						{name:'pin1',latlong:new Microsoft.Maps.Location(45,-100)},
    						{name:'pin2',latlong:new Microsoft.Maps.Location(43,-110)},
    						{name:'pin3',latlong:new Microsoft.Maps.Location(48,-90)},
    						{name:'pin4',latlong:new Microsoft.Maps.Location(40,-120)}
    						];
    
         function GetMap()
         {
          // Initialize the map
          map = new Microsoft.Maps.Map(document.getElementById("myMap"),
                 {credentials:"Bing Maps Key"}); 
         }
    
        function compareLatitudes(a, b){
    			return b.latlong.latitude - a.latlong.latitude;
    		}
    		
    		function addPushpins(sortOrder){
    			map.entities.clear();
    			
    			var t;
    			
    			switch(sortOrder){
    				case 0:		//sort by descending order based on latitude
    					t = testData.sort(compareLatitudes);
    					break;
    				case 1:		//sort by ascending order based on latitude
    					t = testData.sort(compareLatitudes).reverse();
    					break;
    				default:	//do not sort data
    					t = testData;
    					break;
    			}
    
    			for(var i=0;i<t.length;i++){
    				var pin = new Microsoft.Maps.Pushpin(t[i].latlong); 
    				map.entities.push(pin);
    			}
    		}
       </script>
      </head>
      <body onload="GetMap();">
       <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
    	 <br/>
    	 Sort and add data based on Latitude property:
    	 <br/>
    	 <input type='button' onclick='addPushpins()' value='Unorder'/>
       <input type='button' onclick='addPushpins(0)' value='Ascending Order'/>
    	 <input type='button' onclick='addPushpins(1)' value='Descending Order'/>
      </body>
    </html>
    



    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    Friday, July 1, 2011 3:01 PM