Create Click Regions on RadMap for data imported from KML File

8 posts, 1 answers
  1. Vidyadhar
    Vidyadhar avatar
    23 posts
    Member since:
    Oct 2011

    Posted 22 Dec 2011 Link to this post

    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.
  2. Answer
    Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 23 Dec 2011 Link to this post

    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"
        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 >>

  3. DevCraft banner
  4. Vidyadhar
    Vidyadhar avatar
    23 posts
    Member since:
    Oct 2011

    Posted 24 Jan 2012 Link to this post

    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.
  5. Vidyadhar
    Vidyadhar avatar
    23 posts
    Member since:
    Oct 2011

    Posted 24 Jan 2012 Link to this post

    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.
  6. Jon
    Jon avatar
    539 posts
    Member since:
    Apr 2004

    Posted 14 Mar 2012 Link to this post

    Hi..
    How do you create a MouseButton click for each element in the list?
    thanks in advance
  7. Jon
    Jon avatar
    539 posts
    Member since:
    Apr 2004

    Posted 14 Mar 2012 Link to this post

    Hi..
    How do you create a MouseButton click for each element in the list?
    thanks in advance
  8. Vidyadhar
    Vidyadhar avatar
    23 posts
    Member since:
    Oct 2011

    Posted 16 Mar 2012 Link to this post

    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.
  9. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 19 Mar 2012 Link to this post

    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 >>
Back to Top
DevCraft banner