MapEllipse or MapEllipseView on VisualizationLayer

[Yarema]

I want to put a circle of a certain radius on a map, that can be selected and I can move it around with a mouse.

SelectionChanged event is only available on VisualizationLayer, however I cannot put MapEllipse or MapEllipseView on the layer - I see nothing. With MapEllipse, for example - when I put it onto the InformationLayer it is displayed properly. But I cannot do anything with selection on that layer... I could use EllipseData, but that doesn't have HotSpot property, and I would like to set the hotspot to the center of the shape rather than left upper corner as it is by default.

Do you have any tips how I can reach my goal?

[Yarema]

       <Telerik:VisualizationLayer x:Name="layer" >
                <Telerik:MapEllipse  x:Name="circle" />
            </Telerik:VisualizationLayer >

 

The properties are set from codebehind, as soon as I change the layer to Information, the shape is visualized

[Dinko | Tech Support Engineer]

Hello Yarema,

Let me start with that the HotSpot feature is not supported in the VisualizationLayer. In your case you can try using an Ellipse framework element. As you mentioned in your post the location of the element on the map coincides with its top left corner, not with its center. To change the position of the element towards the location ( in the VisuazliationLayer)  you can use the HorizontalAlignment and the VerticalAlignment of the Ellipse shape. You can set both properties to Center. Keep in mind that Ellipse Width / Height is in pixels but you need to set up its scaling with telerik:MapLayer attached properties.

<telerik:RadMap x:Name="radMap"
                ZoomLevel="8"
                Center="42.6957539183824, 23.3327663758679">
    <telerik:RadMap.Provider>
        <telerik:OpenStreetMapProvider />
    </telerik:RadMap.Provider>
    <telerik:VisualizationLayer x:Name="visualizationLayer">
        <Ellipse x:Name="Ellipse"
           telerik:MapLayer.Location="42.6957539183824, 23.3327663758679"
                 telerik:MapLayer.BaseZoomLevel="8"
                 telerik:MapLayer.ZoomRange="5,12"
                 telerik:MapLayer.MaxScale="8"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center"
                 Width="20"
                 Height="20"
                 Stroke="Red"
                 StrokeThickness="3"
                 Fill="Transparent" />
    </telerik:VisualizationLayer>
</telerik:RadMap>

Another approach that you can try is using the EllipseData but you should calculate the Location property considering the Width, Height and the center of the ellipse. In the Map Shape Data article is described that the EllipseData object's Width and Height are in spatial reference units which are degrees by default.

Other way to achieve the desired result is to create a PathData object with proper EllipseGeometryData and add it to the Visualization layer later.

As for the selection and dragging behavior which you are trying to achieve in your application we recommend you to take a look at the following article:
- Items Selection 
- Resize Map Shapes With Mouse Dragging - at the end of this article you can find a link to a blog post where you can download a sample project demonstrating the approach.
- Select Map Shapes

Hope this information is helpful. If you have any other questions, please don't hesitate to contact us again.

Regards,
Dinko
Telerik

[Dinko | Tech Support Engineer]

Hello Yarema,

I have misled you in my first reply. More exactly in the first sentence. What I mean to say is that the HotSpot feature is not supported from the map shape objects in the VisualizationLayer which are specified in the Map Shape Data article. In order to change the position of the elements towards the location in the VisualizationLayer you can use framework elements ( for example Ellipse) and set their HorizontalAlignment or VerticalAlignment properties to Center.

Regards,
Dinko
Telerik

[Yarema]

Hi, I used EllipseGeometryData in the end, and implemented dragging around as in the sample. However, I notice some artefacts when my circle is big enough and around the edges of the map - it gets distorted a lot along one of the axis. This is my move code:

    var mouseLocation = Location.GetCoordinates(this.PART_Map, e.GetPosition(this.PART_Map));

    this.PART_SearchCircle.Center = mouseLocation;

     var sizeInKm = new Size(radiusInKm, radiusInKm);
     var sizeInDegress = this.PART_Map.SpatialReference.GetSizeInReferenceUnits(mouseLocation, sizeInKm);
     this.PART_SearchCircle.RadiusX = sizeInDegress.Width;
     this.PART_SearchCircle.RadiusY = sizeInDegress.Height;

 

[Dinko | Tech Support Engineer]

Hello Yarema,

The described behavior is expected. The MapShapeData objects are measured in spatial units and as you may notice their size depends on the zoom level and their location. Basically, the distance is represented differently on the different coordinates in the Mercator projection. The Mercator projection distorts the size of objects as the latitude increases from the Equator to the poles. For example, lets have a shape which covers 10 km on the map. On the equator, this shape will have 100px width while on the North pole the width will be 30px. That is why the map shape is distorted when move on another location. 

 
To prevent the size changes you can recalculate the size of the EllipseGeometryData every time when it's moved. Or you can consider using FrameworkElements instead of MapShapeData. Keep in mind that the FrameworkElements will not change their size when they are moved or when the map is zoomed.

Regards,
Dinko
Telerik