Grouping map elements

[Clint Singer]

Hi,

I was wondering if you have any samples that demonstrate the grouping of elements that are stacked in the same place.  Here is the scenario.  I have various assets that are being tracked.  In some cases they are parked together.  I would like to show the together units with some kind of indicator.  When I hover over the the grouped item control I would like to then show which assets that are stacked together.

Obviously I would like this to play neatly with zooming in and out since I am more likely to have elements stack each other as I zoom out.

I suppose the problem may be how do you detect efficiently what items are clustered together. 

Cheers,
Clint

[Andrey]

Hi Clint,

Please, take a look into this code. It shows 3 elements when zoom is >=15 and only one when <=14. It is done using ZoomRange property. It seems to me that it is what you are looking for.

<UserControl x:Class="Telerik.Silverlight.RadMap.MainPage"
             xmlns="http%3A%2F%2Fschemas%2Emicrosoft%2Ecom/winfx/2006/xaml/presentation"
             xmlns:x="http%3A%2F%2Fschemas%2Emicrosoft%2Ecom/winfx/2006/xaml"
             xmlns:local="clr-namespace:Telerik.Silverlight.RadMap"
             xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
             xmlns:map="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.DataVisualization"
             xmlns:layer="clr-namespace:Telerik.Windows.Controls.Map;assembly=Telerik.Windows.Controls.DataVisualization"
             Width="800"
             Height="600">
    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
        </Grid.Resources>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="80*" />
            <ColumnDefinition Width="20*" />
        </Grid.ColumnDefinitions>

        <map:RadMap x:Name="radMap"
                    MapMouseClick="radMap_MapMouseClick"
                    InitializeCompleted="radMap_InitializeCompleted"
                    MouseClickMode="None"
                    UseSpringAnimations="False"
                    UseDefaultLayout="True"
                    Center="37.7040701207995,-121.882780875908"
                    ZoomLevel="10">
            <layer:InformationLayer Name="informationLayer">

                <Border Background="#FFFFFFFF"
                        layer:MapLayer.Location="37.7040701207995,-121.882780875908"
                        layer:MapLayer.ZoomRange="1,14">
                    <StackPanel>
                        <ToolTipService.ToolTip>
                            <StackPanel>
                                <TextBlock Text="Best Buy" />
                                <TextBlock Text="Bed Bath & Beyond" />
                                <TextBlock Text="Regal Cinemas" />
                            </StackPanel>
                        </ToolTipService.ToolTip>
                        <TextBlock Text="Hacienda" />
                        <TextBlock Text="Crossings" />
                    </StackPanel>
                </Border>

                <Border Background="#FFFFFFFF"
                        layer:MapLayer.Location="37.7029326609139,-121.880420531975"
                        layer:MapLayer.ZoomRange="15,20">
                    <TextBlock Text="Best Buy" />
                </Border>

                <Border Background="#FFFFFFFF"
                        layer:MapLayer.Location="37.7055810479825,-121.88481935476"
                        layer:MapLayer.ZoomRange="15,20">
                    <TextBlock Text="Bed Bath & Beyond" />
                </Border>


                <Border Background="#FFFFFFFF"
                        layer:MapLayer.Location="37.7033040359869,-121.885125126587"
                        layer:MapLayer.ZoomRange="15,20">
                    <TextBlock Text="Regal Cinemas" />
                </Border>
            </layer:InformationLayer>
        </map:RadMap>
    </Grid>
</UserControl>

Sincerely yours,
Andrey Murzov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Clint Singer]

Hi,

Is there also a way to use the TemplateSelector along with the ZoomRange so that the same bound item uses a different DataTemplate depending on the ZoomLevel.  For (a contrived) example, when zoom is between 15 and 16 a DataTemplate with a Circle is used but when the zoom is between 17 and 20 a square is used.

The sample you have in this thread has a completely different entity being represented at the different levels.

Cheers,
Clint

[Andrey]

Hi Clint,

Currently the TemplateSelector couldn't be used along with the ZoomRange and/or the ZoomLevel, because it would be invoked for each element of the information layer once only. We will consider implementation of this feature for future releases.
As workaround you can use the ZoomChanged event for selecting data template for items of information layer. See the following sample code:

private void SetProvider()
{
    ...
    this.RadMap1.ZoomChanged += this.RadMap1_ZoomChanged;
}
void RadMap1_ZoomChanged(object sender, EventArgs e)
{
    foreach (object item in this.InformationLayer1.Items)
    {
        var control = this.InformationLayer1.ItemContainerGenerator.ContainerFromItem(item) as System.Windows.Controls.ContentPresenter;
        control.ContentTemplate = this.SelectTemplate();
    }
}
private DataTemplate SelectTemplate()
{
    // template selecting logic
}

All the best,
Andrey Murzov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.