locked
Change ShowFindControl Default location RRS feed

  • Question

  • Help!

    Does anyone know how to change the default placement of the FindControl and Dashboard.  I found examples of changing the compass icons and such on the dashboard control. However I would like to move where it and the Find Control is placed.  Can it be done via a Style Sheet. If so can someone please supply an example.

     

    Thank you

    Robert

    Wednesday, September 13, 2006 4:03 PM

Answers

  • Here is the code I finally was able to put together to interact with VB.NET

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
       <head>
          <title></title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <script src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js"></script>
          <STYLE TYPE="text/css" MEDIA=screen>
         
                <!--

                    .Compass{ width:54px; height:54px; background:url(Compass.gif);
                    margin:0px; cursorStick out tongueointer }
                    .ZoomBar{ position:relative;background:url(Bar.gif);
                    width:103px; height:20px; margin:2px; overflow:hidden; }
                    .ZoomBar_slider { position:absolute; background:url(Slider.gif);
                    width:7px; height:20px; overflow:hidden; display:block; }
                -->

          </STYLE>
          <script language="javascript">

             // Declare the map object
             var map = null;
            
             // Declare the variable to hold the current location of the
             // map
             var loc;
            
             // Flag to tell the onChangeFunction that the find function
             // made the call
             var FindMoved;
            
             // Show the Navigation controls
             function ShowControl()
                 {
                    map.ShowDashboard();
                 }
                
             // Hide the navigation controls
             function HideControl()
                 {
                    map.HideDashboard();
                 }

             //- <GetMap>
             //- Author: Robert McArthur
             //- Date: August 10, 2006
             //- Description: This function loads the map for the first time
             //               and sets up any events
             //
             function GetMap()
             {
              
               try
                    {
                      
                       FindMoved = true;
                      
                       // Create an instance of the map
                       map = new VEMap('myMap');
                      
                       map.onLoadMap = function(){ window.external.OnLoadMap(true); };
              
                       // load the map
                       //map.LoadMap(null, 10, 'r', false);
                       map.LoadMap();
                      
                       // Hide the navigation dashboard
                       map.HideDashboard();
                      
                       // Attach the on change view event
                       map.AttachEvent("onchangeview", onChangeView);                          

                    }
                catch (err)           
                    {               
                        //alert(err.message); 
                        window.external.OnLoadMap(false);         
                    }  
             }  
            
             //- <Route>
             //- Author: Robert McArthur
             //- Date: August 10, 2006
             //- Description: This function displays a route between two address
             //- Parameters: From_Address - The address to start the route from
             //              To_Address - The Address to finish the route
             //
             function Route()
             {
            
                // Get the from, to addresses
                var From_Address = document.getElementById('txtFrom').value
                var To_Address = document.getElementById('txtTo').value
                           
                // Call the get route method to display the route
                map.GetRoute(From_Address,                    
                              To_Address,                    
                              VEDistanceUnit.Kilometers,                    
                              VERouteType.Quickest,
                              onGotRoute);
                             
                // Centre the map
                loc = map.GetCenter();

             }
            
             //- <onGotRoute>
             //- Author: Robert McArthur
             //- Date: August 10, 2006
             //- Description: This function is an event that gets fired when the
             //               route is completed
             //- Parameters: Route - A reference to the VERoute Class
             //
             function onGotRoute(route)        
             {          
               
                var routeinfo="Route info:\n\n";   
                    
                routeinfo+="Total distance: ";           
                routeinfo+=   route.Itinerary.Distance+" ";          
                routeinfo+=   route.Itinerary.DistanceUnit+"\n";                       
            
                var steps="";           
            
                var len = route.Itinerary.Segments.length;

                for (var i = 0; i < len ;i++)              
                      {
                            steps+=route.Itinerary.SegmentsIdea.Instruction+" -- (";                 
                            steps+=route.Itinerary.SegmentsIdea.Distance+") ";                 
                            steps+=route.Itinerary.DistanceUnit+"\n";              
                      }
                     
                routeinfo+="Steps:\n"+steps;  
               
                // Pass the route information to the external window's Route details event
                window.external.OnRouteDetails(routeinfo);

             }
               
             //- <onChangeView>
             //- Author: Robert McArthur
             //- Date: August 10, 2006
             //- Description: This function is an event that fires when
             //              the map has finished moving to a new view
             //
             function onChangeView()
                {
                    if (FindMoved==true)
                        {
                            loc = map.GetCenter();
                            var s=map.GetMapStyle();
                            //if (s!=VEMapStyle.Hybrid)
                            //    {
                                window.external.OnMapChangeView();
                            //    }
                            FindMoved = false;
                        }
                }
     
             function GetLatitude()
                {
                    return loc.Latitude
                }
               
             function GetLongitude()
                {
                    return loc.Longitude
                }
               
             //- <Find>
             //- Author: Robert McArthur
             //- Date: August 10, 2006
             //- Description: Find a specific address
             //- Parameters: Address - This can be a physical address or postal code
             //
             function FindLocation(Address)
                {
                    try
                    {
                        if (map!=null)
                            {
                                FindMoved = true;  
                                map.FindLocation(Address);

                            }
                    }
                    catch (err)
                        {
                        alert(err.message);
                        }
                }
            
             //- <FindLocation>
             //- Author: Robert McArthur
             //- Date: August 14, 2006
             //- Description:  This function finds the map location based on either
             //                a where (address or postal code) or a what ie (landmark or well
             //                know building
             //
             function FindLoc()
                {
                     try
                        {
                            var what = document.getElementById('txtWhat').value
                            var where = document.getElementById('txtWhere').value
                           
                            if (where=='')
                                {
                               
                                    map.Find(where, what);
                                }
                            else
                                {
                                map.Find(what, where);
                                }   
                        }
                     catch (err)
                        {
                        // Do Nothing
                        }
     
                }
             
               
             //- <DeleteRoute>
             //- Author: Robert McArthur
             //- Date: August 10, 2006
             //- Description:  Remove the displayed route
             //
             function DeleteRoute()        
              {           
                try           
                    {               
                    map.DeleteRoute();           
                    }           
                catch (err)           
                    {               
                    alert(err.message);           
                    }        
              }
            
             //- <AddPin>
             //- Author: Robert McArthur
             //- Date: August 10, 2006
             //- Description:  Add a pin to the map
             //- Parameters: ID = The Id to store in the pin
             //              Title - The title to put in the pushpin popup
             //
             function AddPin(ID, Title, Description, Lat, Long)
             {  
                try
                    {
             
                    // Create a new pin to add
                    var pin = new VEPushpin(
                       ID,
                       new VELatLong(Lat, Long),
                       null,
                       Title,
                       Description
                       );
                      
                    // Add the pin
                    map.AddPushpin(pin);

                    }
                catch (err)
                    {
                    //alert(err.message);
                    }
             }  
            
             //- <DeletePin>
             //- Author: Robert McArthur
             //- Date: August 10, 2006
             //- Description:  Delete a pin on the map
             //- Parameters: ID = The Id of the pin to delete
             //
             function DeletePin(id)
             { 
                try
                {
                    if (id!=null)
                    {
                    map.DeletePushpin(id);
                    }
                    else
                    {
                    map.DeleteAllPushpins();
                    }
                }
                catch (err)
                {
                    // Do nothing as we don't care if
                    // there is an error on the delete of
                    // the pin
                    //alert(err.message);
                }
             }  
            
             //- <AddSearchControl>
             //- Author: Robert McArthur
             //- Date: August 12, 2006
             //- Description: This function adds a custom control for searching
             //- Parameters: DefaultWhere - The initial where location to display by default
             //-             DefaultWhat - The initial what location to display
             //
             function AddSearchControl(DefaultWhat, DefaultWhere)        
                 {        
                    var el = document.createElement("div");    
                    el.setAttribute('id', "cSearchControl")          
                    el.style.top ="100px";            
                    el.style.left = "5px";      
                    el.style.width = "575px";
                    el.style.height = "60px";    
                    el.style.filter = "alpha(opacity=90)";
                    el.style.border = "solid 1px #D9D4D4";         
                    el.style.background = "lightBlue";           
                    el.innerHTML = "<table width='558' sytle='postion:absolute; border='0'; height='65';><tr><td height='19'; valign='middle'; width='242';><b><font face='Verdana, Arial, Helvetica, sans-serif'; size='2';>&nbsp;What</font></b></td><td width='232'; valign='middle';><font face='Arial, Helvetica, sans-serif';><b><font face='Verdana, Arial, Helvetica, sans-serif'; size='2';>&nbsp;Where</font></b></font></td><td rowspan='2'; width='62'; valign='middle'; align='center';><input type='button'; name='Search'; value='Search'; onclick='FindLoc();';></td></tr><tr><td height='30'; valign='top';><input id='txtWhere'; type='text'; name='Where'; size='35'; value='"+DefaultWhere+"';></td><td valign='top';><input id='txtWhat'; type='text'; name='What'; size='35'; value='"+DefaultWhat+"';></td></tr></table>";
                     
                    map.AddControl(el);        
                 }
            
             //- <RemoveSearchControl>
             //- Author: Robert McArthur
             //- Date: August 12, 2006
             //- Description: This function removes a custom control from the page
             //- Parameters: ControlName - The name of the control to remove
             //
             function RemoveSearchControl()
                 {
                    var el = document.getElementById("cSearchControl")
                    el.parentNode.removeChild(el);
                 }
                
             //- <AddDirectionControl>
             //- Author: Robert McArthur
             //- Date: August 12, 2006
             //- Description: This function adds a custom control for Direction
             //- Parameters: DefaultWhere - The initial where location to display by default
             //-             DefaultWhat - The initial what location to display
             //
             function AddDirectionControl(DefaultFrom, DefaultTo)        
                 {        
                    var el = document.createElement("div");    
                    el.setAttribute('id', "cDirectionControl")          
                    el.style.top ="170px";            
                    el.style.left = "5px";      
                    el.style.width = "575px";
                    el.style.height = "60px";    
                    el.style.filter = "alpha(opacity=90)";
                    el.style.border = "solid 1px #D9D4D4";         
                    el.style.background = "lightGreen";           
                    el.innerHTML = "<table width='558' sytle='postion:absolute; border='0'; height='65';><tr><td height='19'; valign='middle'; width='242';><b><font face='Verdana, Arial, Helvetica, sans-serif'; size='2';>&nbsp;From</font></b></td><td width='232'; valign='middle';><font face='Arial, Helvetica, sans-serif';><b><font face='Verdana, Arial, Helvetica, sans-serif'; size='2';>&nbsp;To</font></b></font></td><td rowspan='2'; width='62'; valign='middle'; align='center';><input type='button'; name='Get'; value='Get'; onclick='Route();';></td></tr><tr><td height='30'; valign='top';><input id='txtFrom'; type='text'; name='From'; size='35'; value='"+DefaultFrom+"';></td><td valign='top';><input id='txtTo'; type='text'; name='To'; size='35'; value='"+DefaultTo+"';></td></tr></table>";
                     
                    map.AddControl(el);        
                 }
            
             //- <RemoveDirectionControl>
             //- Author: Robert McArthur
             //- Date: August 12, 2006
             //- Description: This function removes a custom control from the page
             //- Parameters: ControlName - The name of the control to remove
             //
             function RemoveDirectionControl()
                 {
                    var el = document.getElementById("cDirectionControl")
                    el.parentNode.removeChild(el);
                 }
                
          </script>
       </head>
       <body onload="GetMap();">
          <div id='myMap' style="position:relative; width:600px; height:427px;"></div>
       </body>
    </html>

    Thursday, June 7, 2007 8:47 PM