Combined geometry in telerik maps

[Massimo]

What's the easyest way to draw someting like a combined geometry in a map? http://www.blackwasp.co.uk/WPFCombinedGeometry.aspx

I have a series of ellipse with a trasparency, but, when 2 or more ellipse are overlapped the opacity are reduced and I can't see the map below.

I just want to combile all the geometry and have a unique item..

[Martin Ivanov]

Hi Massimo,

RadMap can work with FrameworkElements so you can use native Path element and draw the combined geometry which you want.  Basically, you can define a VisualizationLayer and add the Path there.

<telerik:RadMap Center="24,40" ZoomLevel="4">
    <telerik:RadMap.Provider>
        <telerik:OpenStreetMapProvider />
    </telerik:RadMap.Provider>
    <telerik:VisualizationLayer>
        <Path Stroke="Black" StrokeThickness="5" Fill="HotPink" telerik:MapLayer.Location="40,40">
            <Path.Data>
                <CombinedGeometry>
                    <CombinedGeometry.Geometry1>
                        <EllipseGeometry Center="70,70" RadiusX="60" RadiusY="56" />
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <RectangleGeometry Rect="70,70 150,80" />
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>
    </telerik:VisualizationLayer>
</telerik:RadMap>

If you want your shape to respect the map zoom level you can use Map Shape Data objects and more specifically the PathData object. Its size are in the map's reference units (degrees). Note that the PathData works with custom map geometry objects.

<telerik:RadMap Center="24,40" ZoomLevel="4">
    <telerik:RadMap.Provider>
        <telerik:OpenStreetMapProvider />
    </telerik:RadMap.Provider>
    <telerik:VisualizationLayer>
        <telerik:PathData Location="40,40">
            <telerik:PathData.ShapeFill>
                <telerik:MapShapeFill Fill="HotPink" Stroke="Black" StrokeThickness="5" />
            </telerik:PathData.ShapeFill>
            <telerik:PathData.Data>
                <telerik:GeometryGroupData>
                    <telerik:GeometryGroupData.Children>
                        <telerik:EllipseGeometryData Center="40,70" RadiusX="6.5" RadiusY="5" />
                        <telerik:RectangleGeometryData Rect="40,70, 1300,800"  />
                    </telerik:GeometryGroupData.Children>
                </telerik:GeometryGroupData>
            </telerik:PathData.Data>
        </telerik:PathData>
    </telerik:VisualizationLayer>
</telerik:RadMap>

Regards,
Martin
Telerik by Progress

[Massimo]

Thank you for the reply,

the "Map Shape Data" is almost what I needed, but the result is a XOR of the shapes (first attach), It would be nice an union of the shapes, something like the second attach..

[Martin Ivanov]

Hello Massimo,

The map geometry data objects mimics the behavior of the native WPF geometries, but they allow you to work with map reference units. The map's GeometryGroupData is the equivalent of the native GeometryGroup and it exposes a FillRule property which you can use to partially achieve what you are looking for. However, the group geometry in general allows you to merge only the filled part of the shapes. The stroke lines won't be remove where the shapes intersect. Also, the property is not respected in some cases. I tested the geometry generated by the GeometryGroupData with a native GeometryGroup and I was not able to make the FillRule property to work with the geometry from the example in my last reply. You can test it with the geometries which you are going to use and see if it works for you.

If this doesn't work in your case, you can try the PathGeometryData and construct a single custom geometry instead of merging geometries. Or you can use a native Path element with a CombinedGeometry and re-calculate its boundaries on zoom in/out of the map.

Regards,
Martin
Telerik by Progress