# Rotate Point Images

2 posts, 1 answers
1. ##### Esther
13 posts
Member since:
Jun 2010

Posted 21 Feb 2011 Link to this post

Hello everybody,
I have a map with several Pinpoints on it. I want to rotate each pinpoint image acording to a variable value.
If I do a rotate tranform this way:
Me.pinPoint.RenderTransform = New RotateTransform(degrees,0,0)
the image is correctly rotated but I loose the position on the map. When I do zoom the center of the point is different for each level of zoom.
I´ve tried asociating a hotSpot but the problem persists.
Do you know a way to solve that??
Thank you very much,
Esther
##### Andrey
1681 posts

Posted 24 Feb 2011 Link to this post

Hello Esther,

You can use RotateTransform, but you must perform some additional calculation to change hotspot correspondently to the rotation angle. Since X and Y axis of the rotated pushpin will be rotated as well, then using of the Fraction type of the hotspot will give wrong results. You should use Pixel type and calculate pixel shift depends on the rotation angle. For default pushpin template the calculations could looks like the following:

`Partial ``Public` `Class` `MainPage `
`    ``Inherits` `UserControl `
` `
`    ``Public` `Sub` `New``() `
`        ``InitializeComponent() `
` `
`        ``Dim` `pinHeight ``As` `Double` `= 40 `
`        ``Dim` `pinWidth ``As` `Double` `= 25 `
`        ``Dim` `angle ``As` `Double` `= 45 `
` `
`        ``Dim` `pin1 ``As` `Pushpin = ``New` `Pushpin() `
`        ``MapLayer.SetLocation(pin1, ``New` `Location(42.5, -99)) `
`        ``Me``.informationLayer.Items.Add(pin1) `
` `
`        ``Dim` `pin2 ``As` `Pushpin = ``New` `Pushpin() `
`        ``Dim` `rotate ``As` `RotateTransform = ``New` `RotateTransform() `
`        ``rotate.Angle = angle `
`        ``pin2.RenderTransform = rotate `
`        ``Dim` `hotspot ``As` `HotSpot = ``Me``.CalculatePushpinHotspot(pinHeight, pinWidth, angle) `
`        ``MapLayer.SetHotSpot(pin2, hotspot) `
`        ``MapLayer.SetLocation(pin2, ``New` `Location(42.5, -99)) `
`        ``Me``.informationLayer.Items.Add(pin2) `
` `
`    ``End` `Sub`
` `
` `
`    ``''' <summary> `
`    ``''' Calculate hotspot for rotated pushpint. `
`    ``''' </summary> `
`    ``''' <param name="pinHeight">Height of the pushpint.</param> `
`    ``''' <param name="pinWidth">Width of the pushpin.</param> `
`    ``''' <param name="angle">Rotation angle in degrees.</param> `
`    ``''' <returns>New hotspot.</returns> `
`    ``Private` `Function` `CalculatePushpinHotspot(``ByVal` `pinHeight ``As` `Double``, ``ByVal` `pinWidth ``As` `Double``, ``ByVal` `angle ``As` `Double``) ``As` `HotSpot `
`        ``Dim` `angleRad ``As` `Double` `= angle * Math.PI / 180D `
`        ``Dim` `halfWidth ``As` `Double` `= pinWidth / 2D `
`        ``Dim` `shiftX ``As` `Double` `= pinHeight * Math.Sin(angleRad) - halfWidth * Math.Cos(angleRad) `
`        ``Dim` `shiftY ``As` `Double` `= -(pinHeight * Math.Cos(angleRad) + halfWidth * Math.Sin(angleRad)) `
` `
`        ``Dim` `hotspot ``As` `HotSpot = ``New` `HotSpot() `
`        ``With` `hotspot `
`            ``.X = shiftX `
`            ``.XUnits = HotSpotUnit.Pixels `
`            ``.Y = shiftY `
`            ``.YUnits = HotSpotUnit.Pixels `
`        ``End` `With`
` `
`        ``Return` `hotspot `
`    ``End` `Function`
`End` `Class`

All the best,
Andrey Murzov
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!