Visualization layer with different shape types

8 posts, 0 answers
  1. Peter
    Peter avatar
    22 posts
    Member since:
    Oct 2016

    Posted 28 Nov 2016 Link to this post

    I'm trying to create a data template for items on a VisualizationLayer. For each item I'd like to show:

    a) a shape whose points are in geographic units (i.e. the shape grows/shrinks as the map zoom changes (I've been trying to use MapShapeView types)

    b) an ellipse of fixed size i.e. whose screen size remains the same as the map is zoomed in/out.

    c) an image element (which again keeps the same size as the map is zoomed)

    d) a textblock (which again keeps the same size as the map is zoomed)

    All four elements should be bound to properties in the item's view model.

    Is this possible with a VisualizationLayer? I've been able to do it with an InformationLayer.

    Thanks

    Pete

  2. Dinko
    Admin
    Dinko avatar
    257 posts

    Posted 01 Dec 2016 Link to this post

    Hi Peter,

    Let us get straight to your question,

    1. A shape whose points are in geographic units (i.e. the shape grows/shrinks as the map zoom changes (I've been trying to use MapShapeView types) - 

    You can take a look at the Map Shape Data help article in the Visualization Layer section in our documentation which describes the shape object you can use in geographic units.

    2. An ellipse of fixed size i.e. whose screen size remains the same as the map is zoomed in/out.

    You can specify Ellipse Framework element in the Visualization Layer and set the telerik:MapLayer.Location attached property. You can read more about this in the Introduction help article of the Visualization Layer section.

    3. An image element (which again keeps the same size as the map is zoomed) - The answer on the second question is applicable here.

    4.textblock (which again keeps the same size as the map is zoomed) -  The answer to the second question is also applicable here.

    As for the in data bound scenario you can take a look at the Data Binding help article in our documentation of the RadMap.

    Hope this information is helpful.

    Regards,
    Dinko
    Telerik by Progress
    Telerik UI for WPF is ready for Visual Studio 2017 RC! Learn more.
  3. Peter
    Peter avatar
    22 posts
    Member since:
    Oct 2016

    Posted 02 Dec 2016 in reply to Dinko Link to this post

    Hi Dinko,

    I added a RadMap control using OpenStreetMapProvider and a single VisualizationLayer bound to a collection in my view model. I wanted to have a data template that looks something like this (i.e. allowing me to bind four different types, as previously described, bound to a single item):

    <DataTemplate x:Key="ItemTemplate" >
        <Grid>
            <Ellipse x:Name="Halo"
                         telerik:MapLayer.Location="{Binding Location}"
                             Width="100"
                             Height="100"
                             Stroke="Red"
                             StrokeThickness="1"
                             Fill="Blue"
                             Opacity="0.5" />
            <Image Source="satellite_dish.png"
                       telerik:MapLayer.Location="{Binding Location}" Height="100" Width="100" />
            <TextBlock  HorizontalAlignment="Center" VerticalAlignment="Bottom" Text="{Binding Label}"
                           Foreground="Black"
                           Background="White"
                           FontSize="10" FontFamily="Tahoma" />
            <telerik:PolygonData Location="{Binding Location}" Points="{Binding MapPoints}" >
                <telerik:PolygonData.ShapeFill>
                    <telerik:MapShapeFill Fill="#6FDFEFFF" Stroke="Blue" StrokeThickness="2" />
                </telerik:PolygonData.ShapeFill>
            </telerik:PolygonData>
        </Grid>
    </DataTemplate>

    Unfortunately I can't put a PolygonData in the data template because it's not a UIElement. It does appear that I can't mix map shape data, with the other types I want to use, in a single data template.

    Have I misunderstood you response?

    Thanks

    Pete

     

  4. Dinko
    Admin
    Dinko avatar
    257 posts

    Posted 07 Dec 2016 Link to this post

    Hi Peter,

    If you want to bind four different types of object to a collection from your ViewModel you can create a custom class which derives from DataTemplateSelector and create a different template for every object. Then you can create a class for every item you want to add in the visualization layer.

    As the PolygonData is not a UIElement you can use bindable wrappers in DataTemplate. These are the wrappers classes: MapPathView, MapEllipseView, MapLineView, MapPolygonView, MapPolylineView, MapRectangleView. They all inherit from MapShapeBindableWrapper and they are UI Controls that can be used in DataTemplates. They have ShapeFill, HighlightFill and SelectedFill properties which you can use to customize their Stroke, StrokeThickness etc.

    For your convenience, we have created sample project demonstrating the mentioned above approach. (You can add your custom image).

    Regards,
    Dinko
    Telerik by Progress
    Telerik UI for WPF is ready for Visual Studio 2017 RC! Learn more.
  5. Peter
    Peter avatar
    22 posts
    Member since:
    Oct 2016

    Posted 07 Dec 2016 in reply to Dinko Link to this post

    Hi Dinko,

    I'm not trying to bind different types but I am trying to represent a single type with 4 different elements on the map (ellipse, text, image, polygon) as previously explained. At your suggestion I swapped from using PolygonData to MapPolygonView but that doesn't seem to work (the polygon doesn't appear). 

    This simple data template works (showing only the polygon):

    <DataTemplate x:Key="ItemTemplate" >
        <telerik:MapPolygonView Points="{Binding MapPoints}" >
            <telerik:MapPolygonView.ShapeFill>
                <telerik:MapShapeFill Fill="#6FDFEFFF" Stroke="Blue" StrokeThickness="2" />
            </telerik:MapPolygonView.ShapeFill>
        </telerik:MapPolygonView>
    </DataTemplate>

    However when I add the MapPolygonView into my existing template, the polygon does not appear (although the other elements do appear). In fact, as soon as I put the MapPolygonView inside a container element (e.g. Grid), the polygon no longer appears:

    <DataTemplate x:Key="ItemTemplate" >
        <Grid>
            <telerik:MapPolygonView Points="{Binding MapPoints}" >
                <telerik:MapPolygonView.ShapeFill>
                    <telerik:MapShapeFill Fill="#6FDFEFFF" Stroke="Blue" StrokeThickness="2" />
                </telerik:MapPolygonView.ShapeFill>
            </telerik:MapPolygonView>
        </Grid>
    </DataTemplate>

    Can you please explain?

    Thanks,

    Pete

  6. Dinko
    Admin
    Dinko avatar
    257 posts

    Posted 09 Dec 2016 Link to this post

    Hi Peter,

    When you are using bindable wrappers in DateTemplate they have to be placed as a direct child. This is a current limitation of the bindable wrappers which we will reconsider improving it in out future releases.

    Regards,
    Dinko
    Telerik by Progress
    Telerik UI for WPF is ready for Visual Studio 2017 RC! Learn more.
  7. Peter
    Peter avatar
    22 posts
    Member since:
    Oct 2016

    Posted 09 Dec 2016 in reply to Dinko Link to this post

    OK. That clears thing up. Is there any kind of shape, whose points are in geographic units (i.e. the shape grows/shrinks as the map zoom changes, that I can use in a data template with other elements?

    Thanks

    Pete

  8. Dinko
    Admin
    Dinko avatar
    257 posts

    Posted 14 Dec 2016 Link to this post

    Hello Peter,

    Currently, the VisualizationLayer of the RadMap control doesn't provide other map shapes ( from already mentioned in my previous post) which you can use in data templates. 

    Regards,
    Dinko
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top