Visual Basic (Declaration) | |
---|---|
Public Property MapTip As FrameworkElement |
C# | |
---|---|
public FrameworkElement MapTip {get; set;} |
How to use:
When the application loads the KmlLayer.MapTip will be wired up automatically in XAML. Move your cursor over the the red circles to see MapTip information about that large city. Follow the SPECIAL INSTRUCTIONS to create this intermediate level of sample application.
The following screen shot corresponds to the code example in this page.
SPECIAL INSTRUCTIONS:
The following steps show one example of how a developer could test a KML file (with no external hyperlink dependencies) using Visual Studio’s built-in web server (Cassini) to take advantage of the KmlLayer.MapTip Property:
- Launch Visual Studio 2010
- Choose File | New Project from the Visual Studio menus.
- In the New Project dialog, expand .NET Language of your choice (Visual Basic shown in this example), click on the Silverlight Template, choose Silverlight Application, and specify the following information in the textboxes:
- Name: KmlLayer_MapTip_Test
- Location: C:\KML_Test\
- Solution name: KmlLayer_MapTip_Test
- In the New Silverlight Application dialog, accept the defaults (make sure the Host the Silverlight application in a new Web site is checked). This will use the Visual Studio built-in web server (Cassini) for launching your Silverlight application.
- Drag an ESRI Silverlight API Map Control onto the MainPage.xaml design surface.
- Add the following additional Reference to the Visual Studio Project: ESRI.ArcGIS.Client.Toolkit.DataSources.
- Choose Project | Add Class from the Visual Studio menus. In the Add new Item – KmlLayer_MapTip_Test dialog, specify ExtendedDataConverter.vb or ExtendedDataConverter.cs for the Name: depending on the .NET Language used and click the Add button (see the following screen shot):
- Replace the ExtendedDataConverter.vb or ExtendedDataConverter.cs with the following:
C# code:// This is a custom Class used to convert the complex KmlExtendedData object with it's three Properties // (DisplayName, Name, and Value) into a simple string that can be used for binding to the KmlLayer.MapTip. // In your application add a new class called 'ExtendedDataConverter.vb' and replace the contents of that // Class with this code. public class ExtendedDataConverter : Data.IValueConverter { // This is the function that does the work of the conversion. public object Convert(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture) { // Create a variable that will be used to return something. string theReturnValue = null; // Ensure we have the KmlExtendedData in an IList. if (value is IList<ESRI.ArcGIS.Client.Toolkit.DataSources.Kml.KmlExtendedData>) { // Cast the input 'value' object of the converter to the correct Type. IList<ESRI.ArcGIS.Client.Toolkit.DataSources.Kml.KmlExtendedData> theIList = (IList<ESRI.ArcGIS.Client.Toolkit.DataSources.Kml.KmlExtendedData>)value; // Obtain the first KmlExtendedData object from the IList. ESRI.ArcGIS.Client.Toolkit.DataSources.Kml.KmlExtendedData theKmlExtendedData = theIList.FirstOrDefault(); // Depending on what passed as the ConverterParameter (which is the input argument 'parameter') in XAML will // determine what we Return back. The options are: 'Value', 'DisplayName', and 'Name'. if (parameter.ToString() == "Value") { theReturnValue = theKmlExtendedData.Value; } else if (parameter.ToString() == "DisplayName") { theReturnValue = theKmlExtendedData.DisplayName; } else if (parameter.ToString() == "Name") { theReturnValue = theKmlExtendedData.Name; } } // Return something back. return theReturnValue; } // This function is necessary because we implement the Data.IValueConverter Interface. Hence we must have the signature // defined even though we will not really be doing any ConvertBack operations in this example. public object ConvertBack(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new System.NotImplementedException(); } }
VB.NET code:' This is a custom Class used to convert the complex KmlExtendedData object with it's three Properties ' (DisplayName, Name, and Value) into a simple string that can be used for binding to the KmlLayer.MapTip. ' In your application add a new class called 'ExtendedDataConverter.vb' and replace the contents of that ' Class with this code. Public Class ExtendedDataConverter Implements Data.IValueConverter ' This is the function that does the work of the conversion. Public Function Convert(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert ' Create a variable that will be used to return something. Dim theReturnValue As String = Nothing ' Ensure we have the KmlExtendedData in an IList. If TypeOf value Is IList(Of ESRI.ArcGIS.Client.Toolkit.DataSources.Kml.KmlExtendedData) Then ' Cast the input 'value' object of the converter to the correct Type. Dim theIList As IList(Of ESRI.ArcGIS.Client.Toolkit.DataSources.Kml.KmlExtendedData) = CType(value, IList(Of ESRI.ArcGIS.Client.Toolkit.DataSources.Kml.KmlExtendedData)) ' Obtain the first KmlExtendedData object from the IList. Dim theKmlExtendedData As ESRI.ArcGIS.Client.Toolkit.DataSources.Kml.KmlExtendedData = theIList.FirstOrDefault() ' Depending on what passed as the ConverterParameter (which is the input argument 'parameter') in XAML will ' determine what we Return back. The options are: 'Value', 'DisplayName', and 'Name'. If parameter.ToString = "Value" Then theReturnValue = theKmlExtendedData.Value ElseIf parameter.ToString = "DisplayName" Then theReturnValue = theKmlExtendedData.DisplayName ElseIf parameter.ToString = "Name" Then theReturnValue = theKmlExtendedData.Name End If End If ' Return something back. Return theReturnValue End Function ' This function is necessary because we implement the Data.IValueConverter Interface. Hence we must have the signature ' defined even though we will not really be doing any ConvertBack operations in this example. Public Function ConvertBack(value As Object, targetType As System.Type, parameter As Object, culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.ConvertBack Throw New System.NotImplementedException() End Function End Class
- Replace the XAML code in the MainPage.xaml with the following:
<UserControl x:Class="KmlLayer_MapTip_Test.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="480" d:DesignWidth="640" xmlns:esri="http://schemas.esri.com/arcgis/client/2009" xmlns:local="clr-namespace:KmlLayer_MapTip_Test"> <Grid x:Name="LayoutRoot"> <!-- Add some resources that will used by our XAML page. You will need to add the correct 'local' namespace reference to the top of this XAML page that makes use of custom 'ExtendedDataConverter' Class. In this code example, we used: xmlns:local="clr-namespace:KmlLayer_MapTip_Test" near the top of the XAML file because our Visual Studio project was named 'KmlLayer_MapTip_Test'. --> <Grid.Resources> <!-- The x:Key of "extendedDataConverter" is what will be used as the StaticResource when trying bind a KmlLayer.MapTip to the KmlExtendedData Type in the .kml file. --> <local:ExtendedDataConverter x:Key="extendedDataConverter" /> </Grid.Resources> <!-- Add a Map Control. Zoom to the Continental US. --> <esri:Map Background="White" HorizontalAlignment="Left" Margin="0,169,0,0" Name="Map1" VerticalAlignment="Top" WrapAround="True" Height="299" Width="628" Extent="-128.59,22.28,-66.71,51.75"> <esri:Map.Layers> <esri:LayerCollection> <!-- Add a background ArcGISTiledMapServiceLayer for visual reference. --> <esri:ArcGISTiledMapServiceLayer Url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer" /> <!-- Add a KmlLayer to the Map. In this Silverlight Application example, we are testing against a .kml file that is on the local hard drive in the path: C:\KML_Test\KmlLayer_MapTip_Test\KmlLayer_MapTip_Test.Web\ClientBin. Review the API documentation for the ESRI.ArcGIS.Client.Toolkit.DataSources.KmlLayer Class for the various options of how you can Access KML/KMZ files on the local hard drive. See the example code documentation in the ESRI.ArcGIS.Client.Toolkit.DataSources.KmlLayer.MapTip Property for the structure of the .kml file. --> <esri:KmlLayer ID="BIG US CITIES" Url="BIG_US_CITIES.kml"> <!-- Set up using a MapTip on the KmlLayer. --> <esri:KmlLayer.MapTip> <Grid Background="White"> <Border BorderBrush="SeaGreen" BorderThickness="10" Name="Border1"> <StackPanel> <StackPanel Orientation="Horizontal" Name="StackPanel_name"> <TextBlock Text="Name: " FontWeight="Bold" FontSize="10" VerticalAlignment="Center" /> <!-- For each KML Placemark bind to the <name> tag. --> <TextBlock Text="{Binding [name]}" HorizontalAlignment="Left" VerticalAlignment="Center"/> </StackPanel> <StackPanel Orientation="Horizontal" Name="StackPanel_description"> <TextBlock Text="Nickname: " FontWeight="Bold" FontSize="10" VerticalAlignment="Center"/> <!-- For each KML Placemark bind to the <description> tag. --> <TextBlock Text="{Binding [description]}" HorizontalAlignment="Left" VerticalAlignment="Center"/> </StackPanel> <StackPanel Orientation="Horizontal" Name="StackPanel_value"> <!-- For each KML Placemark bind to the <ExtendedData> tag. This option is more complicated because the <ExtendedData> tag maps internally to the ESRI.ArcGIS.Client.Toolkit.DataSources.Kml.KmlExtendedData Class. Each KmlExtendedData object has three Properties: 'DisplayName', 'Name', and 'Value' that can have attribute information. A custom converter (ExtendedDataConverter.vb or ExtendedDataConverter.cs) was added to this project that helps to convert one of the three attributes in the KmlExtendedData object into something that is bindable for display in the MapTip. When looking at the binding syntax for the Text="" Property the following applies: (1) Binding [extendedData] ==> extendedData is the internal attribute name of the KmlExtenedData object. Hence you are binding to this Attribute just as you would a normal String but in this case you are binding to an object that can have any of three attribute values ('DisplayName', 'Name', and 'Value'). (2) Converter={StaticResource extendedDataConverter} ==> extendedDataConverter is the StaticResource that was defined in the <Grid.Resources> above. (3) ConverterParameter=Name or ConverterParameter=Value ==> this is the 'parameter' argument passed into the Convert function of the custom converter ExtendedDataConverter Class. For example: giving the 'Name' parameter will retrieve the KmlExtendedData.Name Property as a String and giving the 'Value' parameter will retrieve the KmlExtendedData.Value Property as a String. --> <TextBlock Text="{Binding [extendedData], Converter={StaticResource extendedDataConverter}, ConverterParameter=Name}" FontWeight="Bold" FontSize="10" VerticalAlignment="Center"/> <TextBlock Text=": " FontWeight="Bold" FontSize="10" VerticalAlignment="Center"/> <TextBlock Text="{Binding [extendedData], Converter={StaticResource extendedDataConverter}, ConverterParameter=Value}" HorizontalAlignment="Left" VerticalAlignment="Center"/> </StackPanel> </StackPanel> </Border> </Grid> </esri:KmlLayer.MapTip> </esri:KmlLayer> </esri:LayerCollection> </esri:Map.Layers> </esri:Map> <!-- Provide the instructions on how to use the sample code. --> <TextBlock Height="138" HorizontalAlignment="Left" Name="TextBlock1" VerticalAlignment="Top" Width="628" TextWrapping="Wrap" Text="When the application loads the KmlLayer.MapTip will be wired up automatically in XAML. Move your cursor over the the red circles to see MapTip information about that large city. Follow the SPECIAL INSTRUCTIONS to create this intermediate level of sample application." /> </Grid> </UserControl>
- Choose Build | Build Solution from the Visual Studio menus (you should not have any compiler Errors/Warnings).
- Using the text editor application, Notepad, copy the following KML syntax and save the file as C:\KML_Test\KmlLayer_MapTip_Test\KmlLayer_MapTip_Test.Web\ClientBin\BIG_US_CITIES.kml (this is the same location as where the SilverlightApplication1.xap file gets created when the Visual Studio Project gets built).
<?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://www.opengis.net/kml/2.2"> <Document> <name>Big US Cities</name> <visibility>1</visibility> <open>1</open> <Placemark> <name>New York City</name> <description>The Big Apple</description> <ExtendedData> <Data name="Population"> <value>8,175,133</value> </Data> </ExtendedData> <visibility>true</visibility> <open>0</open> <Point> <coordinates>-74.006,40.714,0</coordinates> </Point> </Placemark> <Placemark> <name>Los Angeles</name> <description>City of Angles</description> <ExtendedData> <Data name="Population"> <value>3,792,621</value> </Data> </ExtendedData> <visibility>true</visibility> <open>0</open> <Point> <coordinates>-118.243,34.052,0</coordinates> </Point> </Placemark> <Placemark> <name>Chicago</name> <description>The Windy City</description> <ExtendedData> <Data name="Population"> <value>2,695,598</value> </Data> </ExtendedData> <visibility>true</visibility> <open>0</open> <Point> <coordinates>-87.636,41.878,0</coordinates> </Point> </Placemark> </Document> </kml>
- Use Windows Explorer to confirm you have a the C:\KML_TEST\SilverlightApplication1\SilverlightApplication1.Web\ClientBin\BIG_US_CITIES.kml file created (see the following screen shot):
. - Hit F5 (or click the Start Debugging button) in Visual Studio to launch the Silverlight application in Internet Explorer. Move you mouse cursor over the various red circles (i.e. Big US Cities) to display the MapTip information.
The KmlLayer.MapTip Property is only works in the ArcGIS for Silverlight and ArcGIS for WPF API’s; it is not supported in the Windows Phone API.
A KmlLayer.MapTip is a FrameworkElement that displays a visual popup containing information associated with a Graphic. Defining the User Interface (UI) look of the FrameworkElement for a KmlLayer.MapTip can be done in either XAML (see the code example in this document) or code-behind.
There are several sources of where the information that is displayed in a KmlLayer.MapTip can come from:
- The information is stored in the Graphic.Attributes of the KmlLayer.
- The information is hard coded
- The information is generated on the fly based upon user interaction with the Map
You can use a binding expression in XAML to bind the Attributes of the GraphicsLayer (embedded in the KmlLayer) to the DataContext Property of the Graphic. The general usage syntax follows the pattern:
<esri:KmlLayer>
<esri:KmlLayer.MapTip>
<StackPanel Orientation="Horizontal" Background="White">
<TextBlock Text="KML Placemark Name:" />
<TextBlock Text="{Binding [SomeAttributeName]}" />
</StackPanel>
</esri:KmlLayer.MapTip>
<esri:KmlLayer>
Tip: Starting with Silverlight version 4, developers can perform DataContext binding directly to Dictionary Keys by specifying the Key name in brackets. Therefore when binding the DataContext of a KmlLayer.MapTip to a specific attribute name in the Graphic.Attributes (which is a Dictionary), encase the attribute name in square brackets (i.e. []). Example: <TextBlock Text="{Binding [name]}" /> or the slightly more verbose version <TextBlock Text="{Binding Path=[name]}" />).
As of version 2.3 of the ArcGIS for Silverlight and ArcGIS for WPF API’s, the following KML tags map to Attributes in a GraphicsLayer that can be used for binding to a KmlLayer.MapTip: <atom:author> 'name' attribute, <atom:link> 'href' attribute, ' <atom:name> 'href' attribute, <BalloonStyle><text> information, <description> information, <name>, and <ExtendedData>.
The <ExtendedData> tag maps internally to the ESRI.ArcGIS.Client.Toolkit.DataSources.Kml.KmlExtendedData Class. Each KmlExtendedData object has three Properties: 'DisplayName', 'Name', and 'Value' that can have attribute information. In order to use binding from a KmlLayer.MapTip to a KmlExtendedData object, developers must create their own custom converter. See the code example in this document for one possible way to use a custom converter for the KmlExtendedData Class. Additional discussion on the use of the KML <ExtendedData> tags can also be found in ArcGIS Resource Center in the Forum thread entitled: KMLLayer use of identify or maptips.
Target Platforms: Windows XP Professional, Windows Server 2003 family, Windows Vista, Windows Server 2008 family