Binding shapes in VisualizationLayer

[Peter]

I have multiple VisualizationLayers in my radmap. On one layer I want to render a collection of shapes (lines, polygons, ellipses). I have bound the collection of shapes to my layer but I notice that when the map is zoomed the shapes remain a constant size. I want to achieve the behaviour shown in the sample app "Information Layer Map Polygon" so the shapes grow/shrink as the map is zoomed in or out. The sample code uses MapPolygon (which I can't use in VisualizationLayer?). Is there some way for me to get the same behaviour in a VisualizationLayer?

Thanks

Pete

 

[Martin Ivanov]

Hello Pete,

Indeed, the map's VisualizationLayer doesn't work with MapShape objects as the MapPolygon, but uses different type of shape models - MapShapeData. You can read more about this in the corresponding article in the documentation of RadMap. Specifically for MapPolygon, it can be replaced with PolygonData.

Regards,
Martin
Telerik by Progress

[Peter]

Hi Martin,

Thanks for the response. I've looked at the documentation you mentioned but there's no example of using PolygonData within a DataTemplate (for the items in the VisualizationLayer) - is that possible? Is there some way I can bind the properties for PolygonData to properties in my view model or will I have to do this in code-behind?

Thanks,

Pete

[Martin Ivanov]

Hi Pete,

The MapShapeData objects cannot be added in a DataTemplate because they are not UI elements. In order to use them in an MVVM scenario you can connect them to your view model, using the map bindable wrappers. Basically, those are classes that allows the view model to communicate with the shape data. Each shape data element has corresponding wrapper. For example, the EllipseData has a MapEllipseView, and the PolygonData, MapPolygonView. You can see how to use the wrappers in the attached project.

Or you can just create the MapShapeData objects in code, based on your collection of business items.

Regards,
Martin
Telerik by Progress

[Peter]

Hi Martin,
Thanks for the reply. I ran your example and it worked fine. I then changed the xaml to put the template in Window.resources as so:

<Window.Resources>
    <DataTemplate x:Key="DataTemplate">
        <telerik:MapPolygonView Points="{Binding Points}">
            <telerik:MapPolygonView.ShapeFill>
                <telerik:MapShapeFill Fill="#33F3277B" Stroke="Green" StrokeThickness="1"/>
            </telerik:MapPolygonView.ShapeFill>
        </telerik:MapPolygonView>
    </DataTemplate>
</Window.Resources>
<Grid>
    <telerik:RadMap x:Name="RadMap">
        <telerik:RadMap.Provider>
            <telerik:EmptyProvider />
        </telerik:RadMap.Provider>
        <telerik:VisualizationLayer ItemsSource="{Binding}" ItemTemplate="{StaticResource DataTemplate}" />
    </telerik:RadMap>
</Grid>

 

It still worked. I then commented out the VisualizationLayer declaration in the xaml and changed the constructor code in the code-behind i.e.

public MainWindow()
{
    InitializeComponent();
    _source = new ObservableCollection<PolygonShapeModel>()
    {
        new PolygonShapeModel()
        {
            Points = new LocationCollection()
            {
                new Location(5, 5), new Location(5, 30), new Location(30, 30), new Location(30, 5),
            }
        },
    };

    var itemTemplate = (DataTemplate)Resources["DataTemplate"];
    RadMap.Items.Add(new VisualizationLayer {ItemsSource = _source, ItemTemplate = itemTemplate});
    this.DataContext = _source;
}

When I run this the shape is no longer displayed - can you explain why?
Thanks
Pete

[Martin Ivanov]

Hello Peter,

The shape is not display because of the bindable wrappers mechanism that synchronizes the visual elements with the view model. Creating of the corresponding visual depends on a specific shape template defined in the VisualizationLayer's style. If this template is not loaded the shape won't be displayed. It seems that setting the ItemsSource of the layer in the constructor of the view is too early, and the template is still missing.

In order to resolve this you can set the ItemsSource when the VisualizationLayer is loaded.

var itemTemplate = (DataTemplate)Resources["DataTemplate"];
var layer = new VisualizationLayer() { ItemTemplate = itemTemplate };
layer.Loaded += (s, e) =>
{
    layer.ItemsSource = _source;
};

map.Items.Add(layer);

Or you can set the ItemsSource via a binding in code behind.

var itemTemplate = (DataTemplate)Resources["DataTemplate"];
var binding = new Binding() { Source = _source };
var layer = new VisualizationLayer() { ItemTemplate = itemTemplate };
layer.SetBinding(VisualizationLayer.ItemsSourceProperty, binding);
map.Items.Add(layer);

I hope this helps.

Regards,
Martin
Telerik by Progress

[Peter]

Hi Martin,

That works thanks,

Pete