Arrows on a map line

[Thorsten]

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.

[Andrey]

Hi Thorsten,

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

Regards,
Andrey Murzov
Telerik

[Thorsten]

It works flawlessly. Good example.

Thank you very much.

[Renier Pretorius]

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.

[Martin Ivanov]

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

[Renier Pretorius]

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 

[Martin Ivanov]

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

[Renier Pretorius]

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 

[Martin Ivanov]

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

[Renier Pretorius]

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

[Martin Ivanov]

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

[Renier Pretorius]

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