This is a migrated thread and some comments may be shown as answers.

Change Shapefile rendering

9 Answers 18 Views
Map
This is a migrated thread and some comments may be shown as answers.
Yoan
Top achievements
Rank 1
Iron
Yoan asked on 31 Mar 2021, 04:33 PM

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:x="http://schemas.microsoft.com/winfx/2006/xaml"
             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

9 Answers, 1 is accepted

Sort by
0
Vladimir Stoyanov
Telerik team
answered on 05 Apr 2021, 08:11 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Yoan
Top achievements
Rank 1
Iron
answered on 07 Apr 2021, 03:31 PM

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

 

0
Yoan
Top achievements
Rank 1
Iron
answered on 07 Apr 2021, 03:34 PM

Please find my shape at this adress :

http://dl.free.fr/fJsCRbKE3

Thanks for your help

0
Vladimir Stoyanov
Telerik team
answered on 12 Apr 2021, 11:52 AM

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

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

0
Yoan
Top achievements
Rank 1
Iron
answered on 12 Apr 2021, 01:35 PM

Hi,

 

I've just open ticket N°1515000

Thanks in advance

Yoan

0
Vladimir Stoyanov
Telerik team
answered on 14 Apr 2021, 02:35 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Yoan
Top achievements
Rank 1
Iron
answered on 14 Apr 2021, 04:00 PM

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

0
Vladimir Stoyanov
Telerik team
answered on 19 Apr 2021, 09:46 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Yoan
Top achievements
Rank 1
Iron
answered on 30 Apr 2021, 05:13 AM

Hi,

Sorry for answering late.

Works fine, that's perfect !

Thanks for your help

Tags
Map
Asked by
Yoan
Top achievements
Rank 1
Iron
Answers by
Vladimir Stoyanov
Telerik team
Yoan
Top achievements
Rank 1
Iron
Share this question
or