GoToLocation Control

In this topic

About the GoToLocation Control
Using the control
Hook it up on toolbar
Members

About the GoToLocation Control

Use GoToLocation control to pan or zoom to a location(coordinate) on map. The control provides textboxes to enter the X Y coordinates and buttons to zoom or pan to the location entered. The control is buddied with Map control and can be either placed on the form or hooked to the toolbar.

Using the control

Open Visual Studio to add supporting controls to the page. Set up a Web application with, at minimum, a MapResourceManager control and a Map control. Other controls can optionally be added, such as a TOC control, Toolbar control for zoom and pan functionality (you can also zoom and pan by using mouse and keyboard combinations).
Drag a GoToLocation control to add it on the page. Move the control to the position where you want it be displayed because it cannot be moved around at run-time unless placed in floating panel (discussed later in this topic). See the following screen shot that shows the page in Visual Studio in a table layout:

In design mode, click the GoToLocation control to set the properties. The Properties window appears showing the control's properties. The property that must be set for the GoToLocation control is the Map property. Another property that is important for proper functioning of the control is ZoomFactor. Click the drop-down arrow for the property's value, then choose the previously added Map control. See the following screen shot:

Save and run the web application. The GotoLocation control will be displayed as shown below. Enter the coordinates and click Zoom To or Pan To button.

Hook it up on toolbar

GotoLocation control can be part of the toolbar by adding a command to the toolbar to toggle the visibility of GotoLocation control. For this to happen the control needs to be placed in a floating panel and necessary logic(code) should be added to handle the visibility when command on the toolbar is clicked. Following steps will guide you on how to accomplish this.

In the above application, add a floating panel control and move the GoToLocation control inside the floating panel. See the following screen shot:

The page markup would like as shown in the code below :

[HTML]


        <esri:FloatingPanel ID="FloatingPanelGTL" runat="server" Height="85px" Title="Go To Location"
Width="380px" Style="left: 51px; position: absolute; top: 272px" Visible="True"
BackColor="White" Transparency="15">
<esri:GoToLocation ID="GoToLocation1" runat="server" EnableUpdates="False" Height="75px"
SignificantDigits="3" Width="380px" XLabel="X:" YLabel="Y:" ZoomFactor="0.25"
Map="Map1"/>
</esri:FloatingPanel>

Set the visible property of floating panel to false to ensure that when page load the floating panel is not visible.
In the design mode, select the toolbar control to display is properties. Click ellipsis on ToolbarItems property. Add a command and change the name property and hit OK to close the window. See screen shot below:

Now we will add code to toggle the visibility of the floating panel holding the GoToLocation control. In the markup(source) mode, add the following javascript code between </form> and </body> tags.

[JavaScript]


         < script type = "text/javascript" language = "javascript" > function
     toggleGoToLocation(){
    var gtl = $get("FloatingPanelGTL");
    if (gtl != null){
        toggleFloatingPanelVisibility('FloatingPanelGTL');
    }
    else
        alert("Go To Location is not available");
}

 <  / script >

In the design mode, select the toolbar control to display is properties. Click in ellipsis on ToolbarItems property. Select the command that you added to toggle the visibility (step 3 above). In the ClientAction property enter the name of the javascript function added above. See screen shot below:

You can also set the DefaultImage property for the command.
Save and run the application. The GotoLocation control is not visible at run time. However when you click on command on the toolbar, GotoLocation control gets displayed. See screen shot below:

Members

The following table shows a list of properties related to the GoToLocation control. For more reference information, see the GoToLocation control in the library reference section.