How to create template for kml elements?

2 posts, 0 answers
  1. Eirik
    Eirik avatar
    1 posts
    Member since:
    Jan 2011

    Posted 04 Feb 2011 Link to this post

    Hi!
    How can i create a template that works on every element in a kml file i load from my computer?

    .cs:
    Loading the kml file works fine:   

                try
                {
                    FileStream streamResource = File.Open("c:\\mapsource\\wildlife.kml",FileMode.Open,FileAccess.Read);
                    List<FrameworkElement> elements = Telerik.Windows.Controls.Map.KmlReader.Read(streamResource);


                    foreach (FrameworkElement element in elements)
                    {
                        this.informationLayer.Items.Add(element);
                    }
                }
                catch (Exception e)
                {
                    MessageBox.Show("Error: " + e);
                }

    .xaml:
    <StackPanel>
            <Label HorizontalContentAlignment="Center" Content="Map" Width="{Binding Source={StaticResource configSource}, Path=DefaultMapWidth}" Height="30" Background="Gray"></Label>
            <telerik:RadMap x:Name="radMap"  Width="{Binding Source={StaticResource configSource}, Path=DefaultMapWidth}" Height="{Binding Source={StaticResource configSource}, Path=DefaultMapHeight}"
                                MouseDragMode="Drag"
                                ZoomBarVisibility="Collapsed"
                                NavigationVisibility="Collapsed">
                <telerik:InformationLayer x:Name="informationLayer">
                    <telerik:InformationLayer.ItemTemplate>
                        <DataTemplate>
                            <Grid telerik:MapLayer.BaseZoomLevel="5" >
                                
                            </Grid>
                        </DataTemplate>
                    </telerik:InformationLayer.ItemTemplate>
                    <!--<telerik:InformationLayer.Reader>
                        <telerik:MapShapeReader Source="c:/mapsource/Oil_Spills.kml" SourceType="Kml"/>
                    </telerik:InformationLayer.Reader>-->
                </telerik:InformationLayer>
            </telerik:RadMap>
        </StackPanel>


    KML:
    Here's a part of the kml file that i'm using:

    <?xml version="1.0" encoding="UTF-8"?>
    <kml xmlns="http://earth.google.com/kml/2.1">
            <Document>
            <name>wildlife-national-parks-india.kml</name>


            <Placemark>
            <name>Anshi National Park</name>
                  <description>
                    <![CDATA[
                      <p>Wildlife: Bonnet Macaque, Deer, Mouse Deer, Spotted Deer, Indian Bison, Malabar Civet, Malabar Giant Squirrel, Pangolin, Sloth Bear, Black Panther, Elephants, Tigers, Adjutant Stork, Ashy Woodswallow, Black-cre... </p>
                      <p>Plan your wildlife adventure holiday to <a href="http://www.world-wildlife-adventures.com/directory/india/wildlife-park.asp?sanctuary=Anshi+National+Park&state=Karnataka">Anshi National Park</a>, India...
                       read reviews by fellow wildlife enthusiasts, and share your own.  For information about other parks in India and the rest of the world visit: <a href="http://www.world-wildlife-adventures.com/">World Wildlife Adventures</a></p>
                    ]]>
                  </description>
            <Point>
            <coordinates>74.39598,15.07237,0</coordinates>
            </Point>
            </Placemark>
            <Placemark>
            <name>Balphakram National Park</name>
                  <description>
                    <![CDATA[
                      <p>Wildlife: Indian Elephant, Bengal Tiger, Leopard, Clouded Leopard, Wild Buffalo, Gaur (Indian Bison), Muntjac (Barking Deer), Hoolock (White-browed) Gibbon, Assamese Macaque, Pig-tailed Macaque, Capped Langur (... </p>
                      <p>Plan your wildlife adventure holiday to <a href="http://www.world-wildlife-adventures.com/directory/india/wildlife-park.asp?sanctuary=Balphakram+National+Park&state=Meghalaya">Balphakram National Park</a>, India...
                       read reviews by fellow wildlife enthusiasts, and share your own.  For information about other parks in India and the rest of the world visit: <a href="http://www.world-wildlife-adventures.com/">World Wildlife Adventures</a></p>
                    ]]>
                  </description>
            <Point>
            <coordinates>90.82664,25.25261,0</coordinates>
            </Point>
            </Placemark>


    It's important that i'm able to format the name and description.
    I did not find any examples on this, so i hope you can help.

    Thanks in advance.
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 09 Feb 2011 Link to this post

    Hi Eirik,

    You can override a standard style for the MapPinPoint to customize its appearance.
    Each MapPinPoint which is returned from the KmlReader contains the ExtendedData property. You can use it to get the Name and Description of Placemark. Also you can add necessary properties to the ExtendedData for binding them later in the custom template.
    The sample code is below.
    <Window x:Class="KmlTemplating.MainWindow"
            Title="MainWindow" Height="600" Width="800">
        <Window.Resources>
            <telerik:ExtendedDataConverter x:Key="ExtendedDataConverter" />
      
            <Style TargetType="telerik:MapPinPoint">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerik:MapPinPoint">
                            <Border Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}" 
                                    BorderThickness="1" 
                                    CornerRadius="3"
                                    Padding="2,2,2,2">
                                <Grid Name="PART_Panel">
                                    <ToolTipService.ToolTip>
                                        <ToolTip Content="{TemplateBinding ExtendedData, Converter={StaticResource ExtendedDataConverter}, ConverterParameter=FormattedDescription}" />
                                    </ToolTipService.ToolTip>
                                    <Image Name="PART_Image" 
                                           Stretch="None" 
                                           Source="{TemplateBinding ImageSource}" 
                                           Width="32" 
                                           Height="32" />
                                    <TextBlock Name="PART_Text" 
                                               VerticalAlignment="Center" 
                                               HorizontalAlignment="Center"
                                               Text="{TemplateBinding Text}" />
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
        <Grid>
            <telerik:RadMap x:Name="radMap"
                            Center="15.07237,74.39598"
                            ZoomLevel="9">
                <telerik:RadMap.Provider>
                    <telerik:OpenStreetMapProvider IsTileCachingEnabled="True" />
                </telerik:RadMap.Provider>
                <telerik:InformationLayer x:Name="informationLayer" />
            </telerik:RadMap>
        </Grid>
    </Window>
    public MainWindow()
    {
        InitializeComponent();

        
    try
        {
            FileStream streamResource = File.Open("c:\\mapsource\\wildlife.kml", FileMode.Open, FileAccess.Read);
            List<FrameworkElement> elements = Telerik.Windows.Controls.Map.KmlReader.Read(streamResource);

            
    foreach (FrameworkElement element in elements)
            {
                MapPinPoint point = element as MapPinPoint;
                if (point != null)
                {
                    // get description
                    // Placemark.Name could be used to get the Name of Placemark
                    string description = (string)point.ExtendedData.GetValue("Placemark.Description");

                    
    // format description to a control
                    ContentControl control = this.GetFormattedDescription(description);

                    
    // register the FormattedDescription property
                    point.ExtendedData.PropertySet.RegisterProperty("FormattedDescription", "", typeof(ContentControl), null);

                    
    // add the control to ExtendedData
                    point.ExtendedData.SetValue("FormattedDescription", control);
                }

                
    this.informationLayer.Items.Add(element);
            }
        }
        catch (Exception e)
        {
            MessageBox.Show("Error: " + e);
        }
    }

    private
    ContentControl GetFormattedDescription(string description)
    {
        // format of description to control should be implemented
        // ...
        ContentControl control = new ContentControl();
        control.Content = description;

        
    return control;
    }

    Kind regards,
    Andrey Murzov
    the Telerik team
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top