Common MapTips


PurposeThis sample demonstrates how to programmatically manipulate Web Application Developer Framework (ADF) MapTips. The ability to perform this manipulation allows you to fully customize the format and contents of MapTips at run time. Each page in this sample demonstrates a different manipulation technique, ranging in difficulty from simple to complex.

How to use

If the sample has associated data, you will find that the sample's zip file includes a "data" folder alongside the language folders. However, you will need to update the sample to point to the location of the data once you have extracted all the files.

At design time
  1. Verify that the Web ADF for the .NET Framework is installed and functioning properly. For information on installing and configuring the Web ADF, consult the installation guide.
  2. In Windows Explorer, navigate to <ArcGIS install location>\DeveloperKit10.0\Samples\ServerNET. This folder contains the Common_MapTips CSharp and VBNet folders.
  3. Open the folder of the language you're going to use—CSharp or VBNet—and copy the Common_MapTips_<language> folder to c:\inetpub\wwwroot. The <language> variable can be either CSharp or VBNet.
  4. Open the IIS Manager from Control Panel > Administrative Tools > Internet Information Services (IIS) Manager or Internet Information Services.
  5. In the console tree view on the left, navigate to Local Computer > Web Sites > Default Web Site, expand Default Web Site, right-click the Common_MapTips_<language> folder, and click Properties. The Properties dialog box opens.
  6. Click the Directory tab, click the Create button in the Application Settings section, then click OK to close the Properties dialog box.
  7. Start Microsoft Visual Studio 2008 or 2010, and open the solution for the version of Visual Studio you're using. The Visual Studio version is appended to the solution file name. For example, the Visual Studio 2008 solution file for the Common_MapTips_CSharp sample is Common_MapTips_CSharp2008.sln and is located in the c:\inetpub\wwwroot\Common_MapTips_CSharp folder.
  8. In Solution Explorer, right-click the page you want to view and select Set As Start Page.
  9. The pages in this sample are configured to use the USA map service, and it is assumed that this service is running on the local machine (localhost). You can create this service by publishing the map document located at <ArcGIS install location>\DeveloperKit10.0\Samples\data\Usa\USA.mxd. For instructions on how to publish a map document to ArcGIS Server, refer to the Publishing a GIS resource to the server topic in the ArcGIS Server Help. Using a map service other than USA requires modifying the sample code, as some pages specify an extent based on this data and others assume the presence of particular attributes.
  10. If the USA service is not running on the local machine, you must specify the proper location. To do this, open the page you want to view, open the properties window for the MapResourceManager control, and click the ellipsis next to the ResourceItems property. The ResourceItem Collection Editor dialog box opens.
  11. Click the ellipsis next to the Definition property. The Map Resource Definition Editor dialog box opens.
  12. In the Data Source field, replace localhost with the name of the machine hosting the USA service.
  13. Save the project.
  14. Click the Debug drop-down menu and click Start Debugging.

At run time
  1. Browse to the application uniform resource locator (URL) (for example, http://localhost/Common_MapTips_CSharp) or start the application from Visual Studio.
  2. Interact with each .aspx page as described in the following sections.

CustomFormat_Server.aspx and CustomFormat_Client.aspx
  1. Move the mouse pointer over a city feature. The MapTips title is formatted as specified in the sample code.
  2. Click the MapTip to expand it. As with the title, the MapTips content is formatted as specified in the sample code.

JavaScriptFormatting.aspx
  1. Move the mouse pointer over a county feature and click the MapTip that appears. The first value, which was dynamically calculated via the JavaScript specified in the sample code, matches the second value, which was populated from the feature's data.

ConditionalFormatting.aspx
  1. Move the mouse pointer over a county feature and click the MapTip that appears. Depending on the county's population density, the background of the MapTip is red, yellow, or green.

SetMapTipsWidth.aspx
  1. Move the mouse pointer over a city feature and click the MapTip that appears. Note the width of the expanded MapTip.
  2. In the text box below the map, type a new width for the MapTips and click Update MapTips Width. Note that the width is in pixels.
  3. Move the mouse pointer over a city feature again and click the MapTip that appears. The typed width has been applied.

CustomDefaultLayout.aspx
  1. Move the mouse pointer over a city graphic feature (symbolized by a blue star). The MapTip shown has a custom layout.
  2. Move the mouse pointer over a highway feature. The MapTip shown has the same custom layout because a custom default layout has been specified programmatically.
  3. Execute the page's QueryAttributesTask. The custom default layout also applies to the MapTips for the task results.

MultipleCustomLayouts.aspx
  1. Move the mouse pointer over a city graphic feature (symbolized by a blue star). The MapTip shown has a custom layout.
  2. Move the mouse pointer over a highway feature. The MapTip shown has a different custom layout because distinct layouts for the two graphics layers have been specified in the code.

SetMapTipsLayer.aspx
  1. Select a layer from the drop-down menu below the map. Once the map is refreshed, MapTips are shown for the selected layer.

ShowOnlyOnClick.aspx
  1. Move the mouse pointer over a city feature. No MapTip is displayed.
  2. Click the city feature. The MapTip is now displayed.

StickyMapTips.aspx
  1. Move the mouse pointer over a highway feature and click the MapTip that appears.
  2. Repeat step 1 for several more highway features. When a new MapTip is displayed, the previously displayed MapTips remain visible.
  3. Click a MapTip that is obscured by another MapTip. The MapTip clicked moves to the front.
  4. Click the MapTip that you brought to the front. The MapTip closes.

CoincidentFeatureList.aspx
  1. Move the mouse pointer over a city feature that overlaps other city features. The names of all the overlapping cities are shown on the MapTip that appears.
  2. Click the MapTip to expand it. The overlapping features' attributes are shown in a list in the contents section.

AttributesOnDemand.aspx
  1. On the AttributesOnDemandTask, click the Find button.
  2. Mouse over one of the results features and click the MapTip that appears. An activity indicator is shown while the feature's attributes are retrieved; this is replaced by the attributes once they are returned to the client.

CoincidentFeatureDropDown.aspx
  1. Move the mouse pointer over a city feature that overlaps other city features. The MapTip that appears has a drop-down menu and a close hyperlink at the top of it.
  2. Click the drop-down menu and select a different city. The MapTip updates to display the attributes of the selected city.
  3. Click the close hyperlink. The MapTip closes.

Additional information

The following is a brief description of the different manipulation techniques, listed in order of difficulty:
  • CustomFormat_Server.aspx—Illustrates the Web-tier specification of the MapTip title and contents.
  • CustomFormat_Client.aspx—Illustrates the client-tier specification of the MapTip title and contents.
  • JavaScriptFormatting.aspx—Demonstrates how to embed JavaScript in the MapTip Contents property. Enables the creation of content that is dynamically calculated based on attributes of the feature for which a MapTip is shown.
  • ConditionalFormatting.aspx—Demonstrates how to format a MapTip based on an attribute value of the graphic feature for which the MapTip is shown.
  • SetMapTipsWidth.aspx—Demonstrates how to programmatically manipulate a MapTip's width.
  • CustomDefaultLayout.aspx—Demonstrates how to define a custom default MapTips layout in code.
  • MultipleCustomLayouts.aspx—Demonstrates how to programmatically define different MapTip layouts on different graphics layers.
  • SetMapTipsLayer.aspx—Illustrates changing the layer for which MapTips are displayed at run time.
  • ShowOnlyOnClick.aspx—Illustrates the use of event handling to implement MapTips that are shown only when a feature is clicked.
  • StickyMapTips.aspx—Illustrates the creation of MapTips that remain open once they are expanded. This is done via extensive document object model (DOM) element manipulation and MapTips event handling. A MapTip that is obscured by other MapTips can be brought to the front by a single click and closed by clicking again.
  • CoincidentFeatureList.aspx—Demonstrates how to create MapTips that display a feature list when overlapping features are moused over. This is accomplished by extending the Web ADF JavaScript Library's GraphicFeatureGroup to raise a coincidentFeaturesMouseOver event, then implementing a handler for this event.
  • AttributesOnDemand.aspx—Illustrates modifying MapTips so that a feature's attribute data is retrieved only when a MapTip is expanded. This is done by (1) extending the Web ADF JavaScript Library's GraphicFeatureGroup, GraphicFeature, and MapTips objects; and (2) implementing a custom QueryAttributesTask that interacts with the JavaScript extensions.
  • CoincidentFeatureDropDown.aspx—Demonstrates how to customize MapTips so that, when overlapping features are moused over, the MapTip displayed contains a drop-down menu that allows you to select the overlapping feature with which to view attributes. Makes use of the same extensions as CoincidentFeatureList and adds extensive event handling and DOM element manipulation.


Common_MapTips_CSharp\CustomFormat_Server.aspx Formats MapTips content via Web-tier properties.
Common_MapTips_CSharp\CustomFormat_Server.aspx.cs Code behind the .aspx page.
Common_MapTips_CSharp\CustomFormat_Client.aspx Formats MapTips content via client-tier properties.
Common_MapTips_CSharp\CustomFormat_Client.aspx.cs Code behind the .aspx page.
Common_MapTips_CSharp\JavaScriptFormatting.aspx Formats MapTips content dynamically via JavaScript.
Common_MapTips_CSharp\JavaScriptFormatting.aspx.cs Code behind the .aspx page.
Common_MapTips_CSharp\ConditionalFormatting.aspx Formats MapTips content based on attribute values.
Common_MapTips_CSharp\ConditionalFormatting.aspx.cs Code behind the .aspx page.
Common_MapTips_CSharp\SetMapTipsWidth.aspx Specification of MapTips width.
Common_MapTips_CSharp\SetMapTipsWidth.aspx.cs Code behind the .aspx page.
Common_MapTips_CSharp\CustomDefaultLayout.aspx Specification of a custom default MapTips layout.
Common_MapTips_CSharp\CustomDefaultLayout.aspx.cs Code behind the .aspx page.
Common_MapTips_CSharp\MultipleCustomLayouts.aspx Specification of different custom MapTips layouts on different graphics layers.
Common_MapTips_CSharp\MultipleCustomLayouts.aspx.cs Code behind the .aspx page.
Common_MapTips_CSharp\SetMapTipsLayer.aspx Changes the MapTips layer at run time.
Common_MapTips_CSharp\SetMapTipsLayer.aspx.cs Code behind the .aspx page.
Common_MapTips_CSharp\App_Code\MapTipsLayerMenu.cs Contains the implementation of the DropDownBox ServerAction. Updates the MapTips when a new layer is selected.
Common_MapTips_CSharp\ShowOnlyOnClick.aspx Implements MapTips that are only shown when a GraphicFeature is clicked.
Common_MapTips_CSharp\ShowOnlyOnClick.aspx.cs Code behind the .aspx page.
Common_MapTips_CSharp\StickyMapTips.aspx Implements MapTips that remain open when other MapTips are shown.
Common_MapTips_CSharp\StickyMapTips.aspx.cs Code behind the .aspx page.
Common_MapTips_CSharp\CoincidentFeatureList.aspx Implements MapTips that display a feature list when overlapping features are moused over.
Common_MapTips_CSharp\CoincidentFeatureList.aspx.cs Code behind the .aspx page.
Common_MapTips_CSharp\JavaScript\CoincidentFeatureFunctions.js JavaScript file containing extensions to GraphicFeatureGroup.
Common_MapTips_CSharp\AttributesOnDemand.aspx Implements MapTips that retrieve a feature's attributes only when the MapTip for that feature is expanded.
Common_MapTips_CSharp\AttributesOnDemand.aspx.cs Code behind the .aspx page.
Common_MapTips_CSharp\JavaScript\AttributesOnDemand.js JavaScript file containing extensions to GraphicFeatureGroup, GraphicFeature, and MapTips.
Common_MapTips_CSharp\App_Code\AttributesOnDemandTask.cs Contains the implementation of custom QueryAttributesTask.
Common_MapTips_CSharp\CoincidentFeatureDropDown.aspx Implements MapTips that display a MapTip containing a feature selection drop-down menu when overlapping features are moused over.
Common_MapTips_CSharp\CoincidentFeatureDropDown.aspx.cs Code behind the .aspx page.
Download the C# files
Common_MapTips_VBNet\CustomFormat_Server.aspx Formats MapTips content via Web-tier properties.
Common_MapTips_VBNet\CustomFormat_Server.aspx.vb Code behind the .aspx page.
Common_MapTips_VBNet\CustomFormat_Client.aspx Formats MapTips content via client-tier properties.
Common_MapTips_VBNet\CustomFormat_Client.aspx.vb Code behind the .aspx page.
Common_MapTips_VBNet\JavaScriptFormatting.aspx Formats MapTips content dynamically via JavaScript.
Common_MapTips_VBNet\JavaScriptFormatting.aspx.vb Code behind the .aspx page.
Common_MapTips_VBNet\ConditionalFormatting.aspx Formats MapTips content based on attribute values.
Common_MapTips_VBNet\ConditionalFormatting.aspx.vb Code behind the .aspx page.
Common_MapTips_VBNet\SetMapTipsWidth.aspx Specification of MapTips width.
Common_MapTips_VBNet\SetMapTipsWidth.aspx.vb Code behind the .aspx page.
Common_MapTips_VBNet\CustomDefaultLayout.aspx Specification of a custom default MapTips layout.
Common_MapTips_VBNet\CustomDefaultLayout.aspx.vb Code behind the .aspx page.
Common_MapTips_VBNet\MultipleCustomLayouts.aspx Specification of different custom MapTips layouts on different graphics layers.
Common_MapTips_VBNet\MultipleCustomLayouts.aspx.vb Code behind the .aspx page.
Common_MapTips_VBNet\SetMapTipsLayer.aspx Changes the MapTips layer at run time.
Common_MapTips_VBNet\SetMapTipsLayer.aspx.vb Code behind the .aspx page.
Common_MapTips_VBNet\App_Code\MapTipsLayerMenu.vb Contains the implementation of the DropDownBox ServerAction. Updates the MapTips when a new layer is selected.
Common_MapTips_VBNet\ShowOnlyOnClick.aspx Implements MapTips that are only shown when a GraphicFeature is clicked.
Common_MapTips_VBNet\ShowOnlyOnClick.aspx.vb Code behind the .aspx page.
Common_MapTips_VBNet\StickyMapTips.aspx Implements MapTips that remain open when other MapTips are shown.
Common_MapTips_VBNet\StickyMapTips.aspx.vb Code behind the .aspx page.
Common_MapTips_VBNet\CoincidentFeatureList.aspx Implements MapTips that display a feature list when overlapping features are moused over.
Common_MapTips_VBNet\CoincidentFeatureList.aspx.vb Code behind the .aspx page.
Common_MapTips_VBNet\JavaScript\CoincidentFeatureFunctions.js JavaScript file containing extensions to GraphicFeatureGroup.
Common_MapTips_VBNet\AttributesOnDemand.aspx Implements MapTips that retrieve a feature's attributes only when the MapTip for that feature is expanded.
Common_MapTips_VBNet\AttributesOnDemand.aspx.vb Code behind the .aspx page.
Common_MapTips_VBNet\JavaScript\AttributesOnDemand.js JavaScript file containing extensions to GraphicFeatureGroup, GraphicFeature, and MapTips.
Common_MapTips_VBNet\App_Code\AttributesOnDemandTask.vb Contains implementation of custom QueryAttributesTask.
Common_MapTips_VBNet\CoincidentFeatureDropDown.aspx Implements MapTips that display a MapTip containing a feature selection drop-down menu when overlapping features are moused over.
Common_MapTips_VBNet\CoincidentFeatureDropDown.aspx.vb Code behind the .aspx page.
Download the VB.NET files

Download the files for all languages