Edit this page

Pin Points

The MapPinPoint class is designed to represent Point objects from KML files. However, it can be also used outside the KML context in order to mark points of interest (POIs) or something else.

This topic will focus on the following:

Adding a MapPinPoint

To insert a pin point on your map you have to add a MapPinPoint object to your InformationLayer.

To learn more about the Information Layer read here.

Here is an example:

<telerik:RadMap x:Name="radMap"
                Width="600"
                Height="480">
    <telerik:InformationLayer>
        <telerik:MapPinPoint>
        </telerik:MapPinPoint>
    </telerik:InformationLayer>
</telerik:RadMap>

Configuring the MapPinPoint

In order to configure the position of the MapPinPoint you have to set the Location attached property of the MapLayer class. Here is an example:

<telerik:RadMap x:Name="radMap"
                Width="600"
                Height="480">
    <telerik:InformationLayer>
        <telerik:MapPinPoint telerik:MapLayer.Location="42.6957539183824, 23.3327663758679">
        </telerik:MapPinPoint>
    </telerik:InformationLayer>
</telerik:RadMap>

In order to position the pin point more precisely you can use the MapLayer.HotSpot attached property. Here is an example.

To learn more about the HotSpot functionality read here.

<telerik:RadMap x:Name="radMap"
                Width="600"
                Height="480">
    <telerik:InformationLayer>
        <telerik:MapPinPoint telerik:MapLayer.Location="42.6957539183824, 23.3327663758679">
            <telerik:MapPinPoint.HotSpot>
                <telerik:HotSpot X="0.5"
                                    Y="1" />
            </telerik:MapPinPoint.HotSpot>
        </telerik:MapPinPoint>
    </telerik:InformationLayer>
</telerik:RadMap>

With these values defined, the MapPinPoint will be placed above the location and will be centered towards it.

Setting MapPinPoint's Content

By default the MapPinPoint exposes two properties that allow you to set its content. The Text property allows you to specify a string for the MapPinPoint and the ImageSource allows you to specify an image to display.

Here is an example:

<telerik:RadMap x:Name="radMap"
                Width="600"
                Height="480">
    <telerik:InformationLayer>
        <telerik:MapPinPoint telerik:MapLayer.Location="42.6957539183824, 23.3327663758679"
                                Text="Sofia"
                                ImageSource="/Resources/Images/flag_bg.png">
            <telerik:MapPinPoint.HotSpot>
                <telerik:HotSpot X="0.5"
                                    Y="0" />
            </telerik:MapPinPoint.HotSpot>
        </telerik:MapPinPoint>
    </telerik:InformationLayer>
</telerik:RadMap>

Here is a snapshot of the result:

Modifying the MapPinPoint's appearance

As you can see in the previous section the MapPinPoint doesn't look very good. In order to boost its appearance you can use the standard properties:

  • Background

  • Foreground

  • BorderBrush

  • BorderThickness

Here is an example:

<telerik:RadMap x:Name="radMap"
                Width="600"
                Height="480">
    <telerik:InformationLayer>
        <telerik:MapPinPoint telerik:MapLayer.Location="42.6957539183824, 23.3327663758679"
                                Background="#80808080"
                                Foreground="White"
                                BorderBrush="Black"
                                BorderThickness="1"
                                Text="Sofia"
                                ImageSource="/Resources/Images/flag_bg.png">
            <telerik:MapPinPoint.HotSpot>
                <telerik:HotSpot X="0.5"
                                    Y="1" />
            </telerik:MapPinPoint.HotSpot>
        </telerik:MapPinPoint>
    </telerik:InformationLayer>
</telerik:RadMap>

Here is a snapshot of the final result:

See Also

Was this article helpful? Yes No

Give article feedback

Tell us how we can improve this article

Dummy