1

I just wanted to know if there was a way in xamarin to translate changing a map pins positions and possibly rotating a custom map pin to match the direction of movement. I'd like to avoid custom renderers IF possible but I'm open to the idea.

Any help is greatly appreciated

Kaizer69
  • 353
  • 3
  • 14

3 Answers3

1

I suggest you use Xamarin.Forms.GoogleMaps.

About Postion

You can clear first and add them again on the map to refresh the position

Refer to here.

About Direction

You can use BEARING to achieve the effect.

Refer to here.

Community
  • 1
  • 1
ColeX - MSFT
  • 9,076
  • 4
  • 28
  • 192
  • Hi thanks for your answer How different is xamarin forms maps vs xamarin forms google maps? I've got some progress with polyline and wanted to know how much work I need to repeat – Kaizer69 Apr 10 '18 at 13:24
  • I started reading about it and it doesn't seem to be too much work to redo my project with this control, guessing I might need to change my custom map. – Kaizer69 Apr 10 '18 at 13:42
  • @Kaizer69 Hi , what's problem did you meet with ? – ColeX - MSFT Apr 23 '18 at 01:41
  • Hi Cole, I initially marked this as an answer since it using googlemaps package instead of maps fixed a whole lot of issues but I could not see anything in their documentation about translating, animating movement from one position to another, map pins which was the first part of my question. I was already able to change positions but the pins just magically move instead of smoothly transitioning. – Kaizer69 Apr 23 '18 at 03:04
1

You can use a custom animation to animate the movement of a pin on a Xamrin Forms Map like this:

    var animation = new Animation(a => pin.Position = new Position(pin.Position.Latitude + 0.0001, pin.Position.Longitude), 1, 2);
    animation.Commit(this, "PinAnimation", 100, 10000, Easing.SinInOut , null, () => false);

More details on Xamarin Custom Animations on docs.microsoft.com

Hope this helps.

Andy Sinclair
  • 1,843
  • 14
  • 17
1

@Andy Sinclair's answer is a good starting point (as are the docs), but if you want to animate a map pin (with lat, long, and possibly bearing), you'll need to animate each scalar value separately, like so:

var position = yourTargetPinPosition;
new Animation {
    // Animate the change in latitude
    { 0, 1, new Animation(lat => pin.Position = new Position(lat, pin.Position.Longitude), pin.Position.Latitude, position.Latitude) },
    // Animate the change in longitude
    { 0, 1, new Animation(lng => pin.Position = new Position(pin.Position.Latitude, lng), pin.Position.Longitude, position.Longitude) }
// Play the animation over 2000ms with a new frame every 16ms
}.Commit(map, "PinAnimation", 16, 2000, Easing.SinInOut, (v, c) => {
    // If the animation is cancelled for any reason, update the pin position to the target value
    if (c) {
        pin.Position = position;
    }

    // Optionally, pan the map to the new position after the animation is complete
    var mapSpan = new MapSpan(position, 0.01, 0.01);
    map.MoveToRegion(mapSpan);
}, () => false);
Extragorey
  • 1,276
  • 10
  • 26