Arrows on a map line

12 posts, 1 answers
  1. Thorsten
    Thorsten avatar
    5 posts
    Member since:
    Jan 2013

    Posted 27 Sep 2013 Link to this post

    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.
  2. Answer
    Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 01 Oct 2013 Link to this post

    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 >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Thorsten
    Thorsten avatar
    5 posts
    Member since:
    Jan 2013

    Posted 02 Oct 2013 Link to this post

    It works flawlessly. Good example.

    Thank you very much.
  5. Renier Pretorius
    Renier Pretorius avatar
    46 posts
    Member since:
    Apr 2010

    Posted 01 Aug Link to this post

    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.

  6. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 02 Aug Link to this post

    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.
  7. Renier Pretorius
    Renier Pretorius avatar
    46 posts
    Member since:
    Apr 2010

    Posted 02 Aug in reply to Martin Link to this post

    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 

  8. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 02 Aug Link to this post

    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.
  9. Renier Pretorius
    Renier Pretorius avatar
    46 posts
    Member since:
    Apr 2010

    Posted 02 Aug in reply to Martin Link to this post

    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 

  10. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 02 Aug Link to this post

    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.
  11. Renier Pretorius
    Renier Pretorius avatar
    46 posts
    Member since:
    Apr 2010

    Posted 02 Aug in reply to Martin Link to this post

    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

  12. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 03 Aug Link to this post

    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.
  13. Renier Pretorius
    Renier Pretorius avatar
    46 posts
    Member since:
    Apr 2010

    Posted 03 Aug in reply to Martin Link to this post

    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

Back to Top
UI for WPF is Visual Studio 2017 Ready