MapEllipse doesn't draw on InformationLayer

[Clint Singer]

Hi,

I am trying to add some MapEllipse controls to my map but for some reason they aren't showing up.  I am successfully drawing MapPolygons so I don't know why the ellipses won't draw.

MapEllipse ellipse = new MapEllipse();
ellipse.Fill = new SolidColorBrush(Colors.Red);
ellipse.Stroke = new SolidColorBrush(Colors.Blue);
ellipse.StrokeThickness = 3;
ellipse.Width = 30;
ellipse.Height = 30;

ellipse.Location = polygon.Points[0];

Where polygon.Points[0] is a location from one of the correctly rendering polygons.

I was using just Ellipse correctly in one of my custom MapLayer derived classes but I wasn't able to figure out how to get regular polygons to render on that layer since I needed to interpret for each point what its value should be on the Canvas relative to the location.

Ellipses were easy to calculate because they only have one location point which I attached via the MapLayer.SetLocation() method.

Now that I am trying to use InformationLayer instead of a custom MapLayer I have an opposite problem since I can get the Polygons but I can't get get the ellipses (MapPolygon and MapEllipse respectively.)

I just can't seem to win :)

Cheers,
Clint

[Clint Singer]

Ok... Well I found out why my ellipses wouldn't "draw".  It turns out that the ellipse is measured in Kilometers and drawn with the location at the top left corner.  I was working at a zoomed in level such that the ellipses were drawn outside of my viewport at an enormous size. Because the top left corner is used for its origin this threw the ellipse off the screen because it was so large.

Also, I need the location to represent the center of the ellipse.  Can one select where on the shape the hot spot is?  If not I would like to make a feature request for this.  Kind of like how one specifies a transform origin.  A value between 0..1 would be great because then I could use 0.5, 0.5 to render the location at the center of the shape.

Actually in this case I was trying to use the ellipses as control points so really I need them to be a fixed screen size independant of the zoom.  I was trying to hack this in using MapEllipse.  Perhaps you have another idea of how I could accomplish this?

Cheers,
Clint

[Andrey]

Hi Clint Singer,

You have to use MapPinPoint instead of MapEllipse in this case. This class is designed to represent control points. It can have an arbitrary template with any image or regular shape geometry inside. The MapPinPoint class allows you to specify hot point as well. The following example demonstrates how the pin point can be set into the point where mouse is clicked. It uses custom pin point template with geometry which looks like the doughnut.

<UserControl x:Class="Telerik.Silverlight.RadMap.Q3._2009.MainPage"
             xmlns="http%3A%2F%2Fschemas%2Emicrosoft%2Ecom/winfx/2006/xaml/presentation"
             xmlns:x="http%3A%2F%2Fschemas%2Emicrosoft%2Ecom/winfx/2006/xaml"
             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>
            <Style x:Key="CustomPinPoint" TargetType="layer:MapPinPoint">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="layer:MapPinPoint">
                            <Border Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="1"
                                    CornerRadius="3"
                                    Padding="2,2,2,2">
                                <Grid Name="PART_Panel">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="14" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <Path Fill="Green" Name="PART_Image">
                                        <Path.Data>
                                            <GeometryGroup>
                                                <EllipseGeometry Center="7,7" RadiusX="3" RadiusY="3" />
                                                <EllipseGeometry Center="7,7" RadiusX="7" RadiusY="7" />
                                            </GeometryGroup>
                                        </Path.Data>
                                    </Path>
                                    <TextBlock Grid.Column="2" Name="PART_Text" Margin="2,0,0,0" VerticalAlignment="Center" Text="{TemplateBinding Text}" />
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>

        <map:RadMap x:Name="radMap"
                    Center="37.684297,-122.06924"
                    ZoomLevel="5"
                    MapMouseClick="radMap_MapMouseClick"
                    MouseClickMode="None">
            <layer:InformationLayer Name="informationLayer" />
        </map:RadMap>
    </Grid>
</UserControl>

private void radMap_MapMouseClick(object sender, MapMouseRoutedEventArgs eventArgs)
{
    MapPinPoint point = new MapPinPoint()
    {
        Style = this.LayoutRoot.Resources["CustomPinPoint"] as Style
    };
    MapLayer.SetLocation(point, eventArgs.Location);
    this.informationLayer.Items.Add(point);

}

All the best,
Andrey Murzov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.