mapwidget.qml: implement some map animation

When calling centerOnCoordinates() the map will now animate over a
period of 3 seconds the zoom level and over 2 seconds the center
of the map.

Can be tweaked and improved later on.

Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>

1 files changed, 23 insertions, 2 deletions

diff --git a/mobile-widgets/qml/MapWidget.qml b/mobile-widgets/qml/MapWidget.qml
index 06280bbbf..362c0c3af 100644
--- a/mobile-widgets/qml/MapWidget.qml
+++ b/mobile-widgets/qml/MapWidget.qml
@@ -23,13 +23,34 @@ Item {
 		plugin: mapPlugin
 		zoomLevel: 1
 
+		property var newCenter: QtPositioning.coordinate(0, 0);
+
 		Component.onCompleted: {
 			map.activeMapType = map.supportedMapTypes[esriMapTypeIndexes.SATELLITE];
 		}
 
+		ParallelAnimation {
+			id: mapAnimation
+
+			CoordinateAnimation {
+				target: map
+				property: "center"
+				to: map.newCenter
+				duration: 2000
+			}
+			NumberAnimation {
+				target: map
+				property: "zoomLevel"
+				to: 17
+				duration: 3000
+				easing.type: Easing.InCubic
+			}
+		}
+
 		function centerOnCoordinates(latitude, longitude) {
-			map.center = QtPositioning.coordinate(latitude, longitude);
-			map.zoomLevel = map.maximumZoomLevel * 0.9;
+			map.newCenter = QtPositioning.coordinate(latitude, longitude);
+			map.zoomLevel = 2;
+			mapAnimation.restart();
 		}
 	}
 }