Change Shapefile rendering

[Yoan]

Hi,

 

I'm using RadMap to load a simple ESRI shapefile containing points (described by latitude/longitude in associated dbf file).

I want to change the defaut icon used to draw the point (which is looking like a google map pin) to a single blue circle with a radius of one ou two pixel.

I want to change the color of the circle on mouse click for select it.

I tried to use VisualizationLayer.ShapeFill but it doesn't work.

Here is my code :

<UserControl x:Class="Example"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:POCMap"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">

    <UserControl.Resources>

    </UserControl.Resources>

    <DockPanel>

        <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" HorizontalAlignment="Center">
            <Button Click="France_OnClick">France</Button>
            <Button Click="Roumanie_OnClick">Roumanie</Button>
            <Button Click="Yenne_OnClick">Yenne</Button>
        </StackPanel>

        <Grid DockPanel.Dock="Bottom">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Row ="0" Grid.Column="0">Latitude (°N)</TextBlock>
            <TextBox Grid.Row ="0" Grid.Column="1" x:Name="txtLatitude" KeyDown="TxtLatitudeLongitude_OnKeyDown"></TextBox>
            <TextBlock Grid.Row ="1" Grid.Column="0">Longitude (°E)</TextBlock>
            <TextBox Grid.Row ="1" Grid.Column="1" x:Name="txtLongitude" LostFocus="TxtLatitudeLongitude_OnLostFocus" KeyDown="TxtLatitudeLongitude_OnKeyDown"></TextBox>
        </Grid>

        <telerik:RadBusyIndicator Name="busyIndicator">
            <telerik:RadMap x:Name="radMap"  Center="40,-100" ZoomLevel="8" >
                <telerik:RadMap.Provider>
                    <telerik:ArcGisMapProvider x:Name="prov" Mode="Aerial" />
                </telerik:RadMap.Provider>


                <!--<telerik:InformationLayer x:Name="informationLayer"/>-->

                <telerik:VisualizationLayer x:Name="visualizationLayer" UseBitmapCache="False">
                    <telerik:VisualizationLayer.ZoomLevelGridList>
                        <telerik:ZoomLevelGrid MinZoom="0" />
                        <telerik:ZoomLevelGrid MinZoom="9" />
                        <telerik:ZoomLevelGrid MinZoom="8" />
                    </telerik:VisualizationLayer.ZoomLevelGridList>

                    <telerik:VisualizationLayer.ShapeFill>
                        <telerik:MapShapeFill Fill="#6FDFEFFF"
                                          Stroke="Blue"
                                          StrokeThickness="2" />
                    </telerik:VisualizationLayer.ShapeFill>

                    <telerik:VisualizationLayer.VirtualizationSource>

                        <telerik:MapShapeDataVirtualizationSource x:Name="mapShapeDataVirtualizationSource">
                            <telerik:MapShapeDataVirtualizationSource.Reader>
                                <!--<telerik:AsyncShapeFileReader Source="/POCMap;component/Resources/Time_Zones.shp" ToolTipFormat="Time Zone : {ZONE_}" /> -->
                                <telerik:AsyncShapeFileReader x:Name="mapShapeDataReader"

                                                              ToolTipFormat="Latitude : {latitude} / Longitude : {longitude}"
                                                              ProgressChanged="OnProgressChanged"
                                                              ReadShapeDataCompleted="OnReadShapeDataCompleted"/>




                            </telerik:MapShapeDataVirtualizationSource.Reader>
                        </telerik:MapShapeDataVirtualizationSource>
                    </telerik:VisualizationLayer.VirtualizationSource>
                </telerik:VisualizationLayer>


            </telerik:RadMap>
        </telerik:RadBusyIndicator>

    </DockPanel>


</UserControl>

 

Imports System.Windows.Resources
Imports Telerik.Windows.Controls.Map

Public Class Example
    Public Sub New()

        ' Cet appel est requis par le concepteur.
        InitializeComponent()

        AddHandler Me.Loaded, AddressOf Page_Loaded

        ' Ajoutez une initialisation quelconque après l'appel InitializeComponent().
        prov.Mode = ArcGisMapMode.Topographic
        radMap.Center = New Location(45.7, 5.75)
        radMap.ZoomLevel = 8
        radMap.MaxZoomLevel=8
        txtLatitude.Text = 45.7
        txtLongitude.Text = 5.75

        AddHandler Me.Loaded, AddressOf Me.ExampleLoaded
    End Sub

    Private Sub Page_Loaded(sender As Object, e As RoutedEventArgs)
        Me.mapShapeDataVirtualizationSource.ReadAsync()
    End Sub

    Private Sub TxtLatitudeLongitude_OnLostFocus(sender As Object, e As RoutedEventArgs)
        SetLocation()
    End Sub

    Private Sub TxtLatitudeLongitude_OnKeyDown(sender As Object, e As KeyEventArgs)
        If e.Key = Key.Enter Then
            SetLocation()
        End If
    End Sub

    Private Sub SetLocation()
        If txtLatitude.Text AndAlso txtLongitude.Text Then
            Dim latitude = CDbl(txtLatitude.Text)
            Dim longitude = CDbl(txtLongitude.Text)
            radMap.Center = New Location(latitude, longitude)
        End If
    End Sub

    Private Sub France_OnClick(sender As Object, e As RoutedEventArgs)
        radMap.Center = New Location(47.08, 2.39)
        radMap.ZoomLevel = 6
    End Sub

    Private Sub Roumanie_OnClick(sender As Object, e As RoutedEventArgs)
        radMap.Center = New Location(44.94, 26.96)
        radMap.ZoomLevel = 6
    End Sub

    Private Sub Yenne_OnClick(sender As Object, e As RoutedEventArgs)
        radMap.Center = New Location(45.7, 5.75)
        radMap.ZoomLevel = 13
    End Sub

    Private Sub ExampleLoaded(sender As Object, e As RoutedEventArgs)
        Me.busyIndicator.IsIndeterminate = False
        Me.busyIndicator.IsBusy = True
        Me.mapShapeDataReader.Source = New Uri("/POCMap;component/Resources/0.25deg_grille_EU.shp", UriKind.Relative)
    End Sub

    Private Sub OnProgressChanged(sender As Object, e As System.ComponentModel.ProgressChangedEventArgs)
        Me.busyIndicator.ProgressValue = e.ProgressPercentage
        If e.ProgressPercentage >= 100 Then
            Me.busyIndicator.IsIndeterminate = True
            Me.busyIndicator.BusyContent = "Refresh layer"
        End If
    End Sub

    Private Sub OnReadShapeDataCompleted(sender As Object, e As Telerik.Windows.Controls.Map.ReadShapeDataCompletedEventArgs)
        If Me.busyIndicator IsNot Nothing Then
            Me.busyIndicator.IsBusy = False
        End If
    End Sub
End Class

 

Thanks for your help

Yoan

[Vladimir Stoyanov]

Hello Yoan,

Thank you for the shared code snippets. 

Can you check out the VisualizationLayerShapeSelection SDK example? It demonstrates the ShapeFill property in action and also shows how to select/unselect items. 

Note, that you can use the C# to VB code converter in order to convert the code behind logic. 

I hope you find this helpful.

Regards,
Vladimir Stoyanov
Progress Telerik

[Yoan]

Hi,

I've already look at this SDK example. It works fine with Polygon or lines Shapes.

 

Unfortunately, as said upper, my Shape contains only points (X,Y coordinates) and it seems that ShapeFill doesn't work with that kind of shape.

For example, replacing the shape file (world.shp) by my shape doesn't work.

I've also tried to define a ShapeTemplate like this but i obtaint the same result : 

<telerik:VisualizationLayer x:Name="visualizationLayer">
                <telerik:VisualizationLayer.ShapeTemplate >
                    <DataTemplate>
                        <Ellipse Fill="Black" Stroke="Black" StrokeThickness="5" />
                    </DataTemplate>
                </telerik:VisualizationLayer.ShapeTemplate>

                <telerik:VisualizationLayer.Reader>
                    <telerik:AsyncShapeFileReader x:Name="mapShapeDataReader"
                                                  Source="/VisualizationLayerShapeSelection;component/Resources/0.25deg_grille_EU_EO.shp" />
                </telerik:VisualizationLayer.Reader>
            </telerik:VisualizationLayer>

 

Please see the result in attached image

 

[Yoan]

Please find my shape at this adress :

http://dl.free.fr/fJsCRbKE3

Thanks for your help

[Vladimir Stoyanov]

Hello Yoan,

Thank you for the shared link. 

I am afraid that I cannot download the shared file, since the "dll.free" website is blocked for security reasons. Can you share the file in a new support ticket so that I can test the scenario on my end? 

Thank you in advance for your assistance.

Regards,
Vladimir Stoyanov
Progress Telerik

[Yoan]

Hi,

 

I've just open ticket N°1515000

Thanks in advance

Yoan

[Vladimir Stoyanov]

Hello Yoan,

I posted a reply in the opened ticket, however I will add it here as well for visibility:

What I can suggest is to override the default look of the PushPin element visualized in that scenario. Here is what I have in mind:

<Grid>
        <Grid.Resources>
            <Style TargetType="telerik:Pushpin">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate >
                            <Ellipse Fill="Black" Stroke="Black" StrokeThickness="5" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <telerik:RadMap x:Name="radMap"
				ZoomLevel="10"
				Center="35.8525491530559,-5.96887207031268">
            <telerik:RadMap.Provider>
                <telerik:OpenStreetMapProvider StandardModeUserAgent="Your SMUA"/>
            </telerik:RadMap.Provider>
            <telerik:VisualizationLayer x:Name="visualizationLayer">
                <telerik:VisualizationLayer.Reader>
                    <telerik:AsyncShapeFileReader x:Name="mapShapeDataReader"
                                                  Source="/VisualizationLayerShapeSelection;component/Resources/0.25deg_grille_EU_EO.shp" />
                </telerik:VisualizationLayer.Reader>
            </telerik:VisualizationLayer>
        </telerik:RadMap>
    </Grid>

Regards,
Vladimir Stoyanov
Progress Telerik

[Yoan]

Thanks, it works fine !

Could you telle me how i can select items of the shape by clicking on them, and change their colour ?

I tried the VisualizationLayer.SelectedFill in this example but it doesn't work on this type of item

 

Thanks in advance

[Vladimir Stoyanov]

Hello Yoan,

Thank you for the update. 

I investigated the scenario some more and I can suggest an alternative to modifying the look of the pin point elements. You can also use the ItemTemplate property instead of the approach suggested in my previous reply. 

As for indicating the selection, you can handle the MouseDown event of the elements within the DataTemplate and change their Stroke/Fill.

Please, find a sample project demonstrating the above suggestions. Do check it out and let me know, if it helps.

Regards,
Vladimir Stoyanov
Progress Telerik

[Yoan]

Hi,

Sorry for answering late.

Works fine, that's perfect !

Thanks for your help