Map Ellipse Questions

[Dan Kane]

Hi There,

i am trying to add shapes onto the map, what i have are points, lines and polygons. I follow the documentation and am managed to add lines and polygons correctly onto the map. however, i am having trouble with the points. 

what i need to do is to make sure that points are displayed onto the map at a reasonable size so that it's visible at certain zoom levels. preferably the size of the point is consistent at those zoom levels.

i tried to use map ellipses for this task, but first of all, the size of ellipses changes when zoom level changes. in addition, the location property of ellipse seems to be the top left point of the shape rather than the center -_-!!! since the Location property is the only property to specify an ellipse's location, i would expect it to be the center, just like MapRectangle does. in addition if i set the width and height to 1, the ellipse is still very big at zoom level 18. making the size smaller than 1 didn't help either.

how can i make the size of the ellipse consistent at all zoom levels? 

please advice me if i should be using another map shape to accomplish this task

thanks

[Andrey]

Hi Dan Kane,

I am not sure I followed your requirements completely. Could you, please, clarify it for me:

1. Would you like the points on the map change their size depends on the zoom level?
     If so, you can use the MapEllipse. It is located at the top-left point the same as the standard Ellipse shape in Silverlight. The MapRectangle uses the same behavior. Note, the Width and Height of MapEllipse depend on the DistanceUnit property of the RadMap control. The DistanceUnit could be a kilometer or a mile. You can use the following sample method to create MapEllipse by a center:

private MapEllipse CreateMapEllipseByCenter(Location center, double width, double height)

{

    MapEllipse ellipse = new MapEllipse()

    {

        Width = width,

        Height = height

    };


    Size degreeSize = radMap.GetLatitudeLongitudeSize(center, width, height);

    Location location = new Location(center.Latitude + degreeSize.Height / 2d,

        center.Longitude - degreeSize.Width / 2d);

    MapLayer.SetLocation(ellipse, location);


    return ellipse;

} 

Also you can use any framework element such as Ellipse or Path with BaseZoomLevel property that is set to proper value. The BaseZoomLevel property specifies zoom level where framework element has ScaleTransform with scale = 1. When current zoom level of the map is lesser than BaseZoomLevel then a size of the framework element will be decreased. The sample code is below.

Ellipse ellipse = new Ellipse()

{

    Width = 10,

    Height = 10,

    Fill = new SolidColorBrush(Colors.Brown)

};


MapLayer.SetBaseZoomLevel(ellipse, 5);


MapLayer.SetLocation(ellipse, new Location(0, 0));


HotSpot hotSpot = new HotSpot()

{

    X = 0.5,

    Y = 0.5

};

MapLayer.SetHotSpot(ellipse, hotSpot);


this.informationLayer.Items.Add(ellipse);

The example above uses the HotSpot feature.  You can see more details about it in our RadMap demo and in the Hot Spot documentation topic:
http://demos.telerik.com/silverlight/#Map/HotSpot
http://www.telerik.com/help/silverlight/map-item-hot-spot.html

2. Or would you like the points on the map have CONSTANT size regardless of the zoom level?
     If so, then you can simply use any framework element.

Best wishes,
Andrey Murzov
the Telerik team

[Nick]

To make sure your overlay element appears to be pinned by it's center, you need to offset your element.

You can do this as followed:

public partial class CountryOverlay : UserControl
{
    public CountryOverlay()
    {
        InitializeComponent();
        this.SizeChanged += new SizeChangedEventHandler(CountryOverlay_SizeChanged);
    }
    void CountryOverlay_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        // Overlays are pinned by their top-left corner; we'd like to center the overlay.
        this.Margin = new Thickness((this.ActualWidth / 2) * -1, (this.ActualHeight / 2) * -1, 0, 0);
        // this is only required once (if you don't remove the event handler, an infinite loop will trigger.
        this.SizeChanged -= new SizeChangedEventHandler(CountryOverlay_SizeChanged);
    }
}

Good Luck!

[Andrey]

Hello Nick,

When zooming your element will have a wrong position. To make sure your overlay element is pinned to the proper position inside or outside the element you should use MapLayer.Hotspot attachable property (see example at http://demos.telerik.com/silverlight/#Map/HotSpot).

For example, to make sure your overlay element is pinned by its center you have to use hotspot with X and Y set to 0.5:

public partial class CountryOverlay : UserControl
{
    public CountryOverlay()
    {
        InitializeComponent();

        HotSpot hotspot = new HotSpot()
        {
            X = 0.5,
            Y = 0.5
        };

        MapLayer.SetHotSpot(this, hotspot);
    }
}

Kind regards,
Andrey Murzov
the Telerik team