Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Map > Create Click Regions on RadMap for data imported from KML File

• Vidyadhar

  Posted on Dec 22, 2011 (permalink)

  I have a RadMap and am importing data from a kml file to display on one information layer. It has multiple Placemark types. A few Paths(LineStrings displayed as MapPolyLines) and an Image at particular Points(displayed as an ellipse). My requirement is I should be able to click on these Paths and Images and display some some information about them, say in a tooltip. What is the best way I can create these click regions. Mine is a Silverlight app with MVVM framework.
  Am not sure if my approach is right, but I started of with parsing the same KML file, extracting information and creating a list of MapPolyLines for my Paths in KML. Each line in this list contains its respective points in its Points property as a LocationCollection. My idea was to add a new Information Layer to the map, with these PolyLines setting their opacity to 0, and create MouseClickEvents for these lines. Though am not sure if this is right or how this can be done yet, I started of with this approach. 
  
  My Questions:
  1. Is there a better way to create click regions on the map for the data imported from a KML file. 
  2. Can I add a collection of Polylines to an Information Layer, or do I have to do it one-by-one using --> InformationLayer.Items.Add(line).
  3. If the procedure am following is not wrong, how can I know where the user has clicked, I mean even if I get the location where the user       has clicked, how can I know if that location lies on a particular Path(PolyLine).
  
  Thanks,
  Vidyadhar.

  Reply

• Answer Andrey Andrey

  Posted on Dec 23, 2011 (permalink)

  Hello,
  
  You can use the MapShapeReader.PreviewReadCompleted event to set a tooltip or to attach the mouse events. The sample below specifies tooltip for MapShape objects (MapPolygon, MapPolyline and MapPath).
  

  <UserControl x:Class="KMLTest.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"

      xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

      mc:Ignorable="d"

      d:DesignHeight="300" d:DesignWidth="400">

      <UserControl.Resources>

          <telerik:ExtendedDataConverter x:Key="ExtendedDataConverter" />

   

          <DataTemplate x:Key="ToolTipTemplate">

              <TextBlock FontWeight="Bold"

                         Text="{Binding Path=Data, Converter={StaticResource ExtendedDataConverter}, ConverterParameter=Placemark.Name}" />

          </DataTemplate>

      </UserControl.Resources>

      <Grid x:Name="LayoutRoot" Background="White">

          <telerik:RadMap x:Name="radMap">

              <telerik:RadMap.Provider>

                  <telerik:OpenStreetMapProvider />

              </telerik:RadMap.Provider>

              <telerik:InformationLayer x:Name="informationLayer">

                  <telerik:InformationLayer.Reader>

                      <telerik:MapShapeReader Source="MyKmlFile.kml"

                                              PreviewReadCompleted="MapShapeReader_PreviewReadCompleted"/>

                  </telerik:InformationLayer.Reader>

          </telerik:RadMap>

      </Grid>

  </UserControl>

  
  

  private void MapShapeReader_PreviewReadCompleted(object sender, PreviewReadShapesCompletedEventArgs eventArgs)

  {

      foreach (FrameworkElement element in eventArgs.Items)

      {

          MapShape polygon = element as MapShape;

          if (polygon != null)

          {

              var tooltip = new ToolTip();

              tooltip.Content = polygon.ExtendedData;

              tooltip.ContentTemplate = this.Resources["ToolTipTemplate"] as DataTemplate;

   

              ToolTipService.SetToolTip(element, tooltip);

          }

      }

  }

  
  Kind regards,
  Andrey Murzov
  the Telerik team

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  Reply

• Vidyadhar

  Posted on Jan 24, 2012 (permalink)

  Hi Andrey,
  Can you guide me on this? I am parsing a KML file, and using KMLReader.Read am getting a list of FrameworkElements and binding it to the Information Layer on the RadMap. But by doing so, am not able to capture the clicks on these elements on the Map. I was able to capture the clicks when I directly gave the kml file source to the MapShapeReader. But when I data bind the list of Elements to the layer, I cannot capture the clicks. I have tried with both PreviewReadCompleted and ReadCompleted Events. But non of them fire when the list is bound to the layer. How can I capture the clicks, in this case?
  
  Any help would be greatly appreciated.
  Thanks,
  Vidyadhar.

  Reply

• Vidyadhar

  Posted on Jan 24, 2012 (permalink)

  OK, I figured it out. Just created a Mouse Button Click event handler for each element in the List read from the KML file and it worked :)
  
  Thanks,
  Vidyadhar.

  Reply

• Jon Master

  Posted on Mar 14, 2012 (permalink)

  Hi..
  How do you create a MouseButton click for each element in the list?
  thanks in advance
  

  Reply

• Jon Master

  Posted on Mar 14, 2012 (permalink)

  Hi..
  How do you create a MouseButton click for each element in the list?
  thanks in advance

  Reply

• Vidyadhar

  Posted on Mar 16, 2012 (permalink)

  Hi Jon,
  
  Once you have the list of Framework elements from the KMLReader.Read method, loop through each element in the list, get the 
  type of the element and cast it to its respective type (MapPinPOint,MapPolygon,MapPolyline,etc)). Now you can create the 
  Mouse events for the new element.Have a look at the example below.
  
  StreamResourceInfo streamResource = Application.GetResourceStream( new Uri( "mykml.kml", UriKind.RelativeOrAbsolute ));
      List<FrameworkElement> elements = KmlReader.Read( streamResource.Stream );
      foreach ( FrameworkElement element in elements )
      {
  	if (element.GetType() == typeof(MapPinPoint))
          {
  		var placemark = element as MapPinPoint;
  		if (placemark != null)
                  {
                  	placemark.MouseLeftButtonDown += new MouseButtonEventHandler(Placemark_MouseLeftButtonDown);
                          placemark.MouseEnter += new MouseEventHandler(Placemark_MouseEnter);
                          placemark.MouseRightButtonDown += new MouseButtonEventHandler(Placemark_MouseRightButtonDown);
                  }
  	}
      }
  
  Hope this helps.
  
  Viddy.

  Reply

• Andrey Andrey

  Posted on Mar 19, 2012 (permalink)

  Hello Jon,
  
  It can be done using standard Silverlight approach by assigning MouseLeftButtonDown and MouseLeftButtonUp event handlers for every element in the list.
  
  All the best,
  

  Andrey Murzov

  the Telerik team

  Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Map > Create Click Regions on RadMap for data imported from KML File