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

Arrows on a map line

11 Answers 94 Views
Map
This is a migrated thread and some comments may be shown as answers.
Thorsten
Top achievements
Rank 1
Thorsten asked on 27 Sep 2013, 09:06 AM
Hi,

is there any easy way to show arrows on a mapline? The alignment should be centered.
Please have a look on my attached example delivery_network.png.

Maybe could caluclate the mid point of two geo coordinates and attach a custom node, but how could i bind the transformation to the edge line?

<telerik:RadMap Provider="{Binding MapProvider}" Center="{Binding Center}">
    <telerik:InformationLayer ItemsSource="{Binding Edges}">
        <telerik:InformationLayer.ItemTemplate>
            <DataTemplate>
                <telerik:MapLine Point1="{Binding SourceLocation}" Point2="{Binding TargetLocation}" Stroke="Black" StrokeThickness="2" />
            </DataTemplate>
        </telerik:InformationLayer.ItemTemplate>
    </telerik:InformationLayer>
    <telerik:InformationLayer ItemsSource="{Binding Nodes}">
        <telerik:InformationLayer.ItemTemplate>
            <DataTemplate>
                <Border Background="Transparent" telerik:MapLayer.Location="{Binding Location}">
                    <ToolTipService.ToolTip>
                        <ToolTip>
                            <ToolTip.Content>
                                <TextBlock Text="{Binding DisplayLocation}" />
                            </ToolTip.Content>
                        </ToolTip>
                    </ToolTipService.ToolTip>
                    <telerik:MapLayer.HotSpot>
                        <telerik:HotSpot X="0.5" Y="0.5" ElementName="Ellipse"/>
                    </telerik:MapLayer.HotSpot>
                    <Grid>
                        <Ellipse Fill="{Binding Fill}" Width="15" Height="15" x:Name="Ellipse" />
                        <TextBlock Text="{Binding Name}" Foreground="{Binding Foreground}" FontSize="14" FontWeight="Bold" Margin="0 0 0 50" />
                    </Grid>
                </Border>
            </DataTemplate>
        </telerik:InformationLayer.ItemTemplate>
    </telerik:InformationLayer>
</telerik:RadMap>

I've found something similar but it doesn't really help me because binding inside geometry group or segments is not supported.
http://www.telerik.com/community/forums/wpf/map/custom-mapshape.aspx

Thanks for your help.

11 Answers, 1 is accepted

Sort by
0
Accepted
Andrey
Telerik team
answered on 01 Oct 2013, 06:15 PM
Hi Thorsten,

I have attached a sample solution which implements the arrow-direction on the MapLine.
I hope it helps.

Regards,
Andrey Murzov
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Thorsten
Top achievements
Rank 1
answered on 02 Oct 2013, 07:20 AM
It works flawlessly. Good example.

Thank you very much.
0
Renier Pretorius
Top achievements
Rank 1
answered on 01 Aug 2016, 10:11 AM

Hi,

I am doing something very similar but I am using a VisualizationLayer instead of an InformationLayer. This causes the lines not to show. I can replicate the behaviour with the provided sample application by changing the layer type. Why is this? I have another VisualisationLayer with ItemTemplate definition which works fine, but the DataTemplate is a base Elipse element.

0
Martin Ivanov
Telerik team
answered on 02 Aug 2016, 08:10 AM
Hi Renier,

The lines are not displayed in the VisualizationLayer because they are represented by the MapLine class. MapLine works only with InformationLayer. The visualization layer works with LineData objects. However, those objects are not UI elements and they cannot be defined in the ItemTemplate of the layer. Instead, you will need to add them directly in the Items collection of VisualizationLayer. Or you can use the map's bindable wrappers. This will allow you to define line data in the ItemTemplate through the MapLineView class.

Regards,
Martin
Telerik by Progress
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Renier Pretorius
Top achievements
Rank 1
answered on 02 Aug 2016, 08:48 AM

Hi Martin, 

Thanks for the response. I'm not sure what you mean with bendable wrappers.  Are there any examples I can look at?  Are you implying that I can only change the item template definition from MapLine to MapLineView? 

Regards Renier 

0
Martin Ivanov
Telerik team
answered on 02 Aug 2016, 10:37 AM
Hello Renier,

I am afraid that there is a lack of documentation and examples for the visualization layer's bindable wrappers. But, basically they are descriptors that derive from the MapShapeBindableWrapper class and can be defined in the ItemTemplate of the layer. They stand as a middle man between the business objects added in the ItemsSource and the map shape data. The wrappers tells what map shape data object to be created for each business object.

As for the changing of MapLine to MapLineView, the APIs of both classes are similar, but they are not identical. However, in general you should be able to change MapLine to MapLineView and with minimal effort to make it work. Lets take the Andrey's example - originally a MapLine is used.
<DataTemplate x:Key="LineItemTemplate">
    <telerik:MapLine Point1="{Binding Point1}"
                     Point2="{Binding Point2}"
                     Stroke="Black"
                     StrokeThickness="3" />
</DataTemplate>
To make this template works in the VisualizationLayer you can use the following bindable wrapper.
<DataTemplate x:Key="LineItemTemplate">
    <telerik:MapLineView Point1="{Binding Point1}"
                         Point2="{Binding Point2}">
        <telerik:MapLineView.ShapeFill>
            <telerik:MapShapeFill Stroke="Black" StrokeThickness="3" />
        </telerik:MapLineView.ShapeFill>
    </telerik:MapLineView>
</DataTemplate>
You can notice that the colors (stroke, fill, etc.) of the MapLineView object are not set directly, but through its ShapeFill property.

Regards,
Martin
Telerik by Progress
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Renier Pretorius
Top achievements
Rank 1
answered on 02 Aug 2016, 11:21 AM

Hi Martin, 

Thanks again.  I got this going and it works great. However, I am unable to get a tooltip working. Any special tricks? 

Renier 

0
Martin Ivanov
Telerik team
answered on 02 Aug 2016, 01:52 PM
Hi Renier,

Regardless the fact that MapShapeBindableWrapper is a visual element, it is never added in the visual tree. We only use it as a descriptor and based on its set up, we create native shapes that are added in the application. Some of the wrapper's properties are not synced with the visual presenter (the shape) and this is why they might not be respected. This is why the ToolTip property doesn't work.

In order to manually sync properties between the wrapper and the visual presenter you can use the MapShapeVisualizationCreated event of the VisualizationLayer.
<telerik:VisualizationLayer x:Name="lineLayer" MapShapeVisualizationCreated="lineLayer_MapShapeVisualizationCreated" />

<DataTemplate x:Key="LineItemTemplate">    
    <telerik:MapLineView Point1="{Binding Point1}"
                         Point2="{Binding Point2}"
                         ToolTip="I am a tooltip!">
        <telerik:MapLineView.ShapeFill>
            <telerik:MapShapeFill Stroke="Black" StrokeThickness="3" />
        </telerik:MapLineView.ShapeFill>
    </telerik:MapLineView>
                          
</DataTemplate>

void lineLayer_MapShapeVisualizationCreated(object sender, MapShapeOperationEventArgs e)
{
    var presenter = (ContentPresenter)e.Visualization;
    var data = (LineData)presenter.Content;
    var wrapper = (MapLineView)data.Wrapper;
    presenter.ToolTip = wrapper.ToolTip;
}

Regards,
Martin
Telerik by Progress
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Renier Pretorius
Top achievements
Rank 1
answered on 02 Aug 2016, 03:44 PM

Hi Martin,

Works like a charm. Thanks. BUT... I never noted that this was in the WPF forum (and the sample app is WPF). I am actually trying to do this in Silverlight and found that the MapLineView class does not contain a ToolTip property. It it never easy.

Renier

0
Martin Ivanov
Telerik team
answered on 03 Aug 2016, 06:51 AM
Hello Thorsten,

Indeed, the Silverlight controls don't have ToolTip property. There you can use the ToolTipService or RadToolTipService classes and their attached properties.
<telerik:MapLineView telerik:RadToolTipService.ToolTipContent="I am a tooltip"/>

RadToolTipService.GetToolTipContent(wrapper);
RadToolTipService.SetToolTipContent(presenter);

If you have any further questions about RadMap I would ask you to open a new forum in the  RadMap for Silverlight section. This way the forum will be better organized and its users will find relevant information more quickly. Thank you for the understanding.

Regards,
Martin
Telerik by Progress
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Renier Pretorius
Top achievements
Rank 1
answered on 03 Aug 2016, 08:12 AM

Thanks. I came right on a similar track. Using a controltemplate for hooking up the bindings with its datacontext set to the datacontext of the wrapper.

If i get stuck again I will pick this up in the silverlight forum

Tags
Map
Asked by
Thorsten
Top achievements
Rank 1
Answers by
Andrey
Telerik team
Thorsten
Top achievements
Rank 1
Renier Pretorius
Top achievements
Rank 1
Martin Ivanov
Telerik team
Share this question
or