Visualization layer with different shape types

[Peter]

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

[Dinko | Tech Support Engineer]

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 :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. A  (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

[Peter]

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

 

[Dinko | Tech Support Engineer]

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

[Peter]

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

[Dinko | Tech Support Engineer]

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

[Peter]

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

[Dinko | Tech Support Engineer]

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