mapwidget.qml: add zoom-in and zoom-out buttons

The buttons are positioned bellow the "toggle map type" button
and increment / decrement the zoom by "zoomStep" (2 for now).

Also clamp the zoom-in level to "map.maximumZoomLevel".

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

4 files changed, 54 insertions, 0 deletions

diff --git a/mobile-widgets/qml/MapWidget.qml b/mobile-widgets/qml/MapWidget.qml
index b07858c3a..4794533be 100644
--- a/mobile-widgets/qml/MapWidget.qml
+++ b/mobile-widgets/qml/MapWidget.qml
@@ -114,6 +114,8 @@ Item {
 		function doubleClickHandler(coord) {
 			newCenter = coord
 			newZoom = zoomLevel + zoomStep
+			if (newZoom > maximumZoomLevel)
+				newZoom = maximumZoomLevel
 			mapAnimationClick.restart()
 		}
 
@@ -167,6 +169,56 @@ Item {
 		}
 	}
 
+	Image {
+		id: imageZoomIn
+		x: 10 + (toggleImage.width - imageZoomIn.width) * 0.5; y: toggleImage.y + toggleImage.height + 10
+		source: "qrc:///mapwidget-zoom-in"
+		SequentialAnimation {
+			id: imageZoomInAnimation
+			PropertyAnimation {
+				target: imageZoomIn; property: "scale"; from: 1.0; to: 0.8; duration: 120
+			}
+			PropertyAnimation {
+				target: imageZoomIn; property: "scale"; from: 0.8; to: 1.0; duration: 80
+			}
+		}
+		MouseArea {
+			anchors.fill: parent
+			onClicked: {
+				map.newCenter = map.center
+				map.newZoom = map.zoomLevel + map.zoomStep
+				if (map.newZoom > map.maximumZoomLevel)
+					map.newZoom = map.maximumZoomLevel
+				mapAnimationClick.restart()
+				imageZoomInAnimation.restart()
+			}
+		}
+	}
+
+	Image {
+		id: imageZoomOut
+		x: imageZoomIn.x; y: imageZoomIn.y + imageZoomIn.height + 10
+		source: "qrc:///mapwidget-zoom-out"
+		SequentialAnimation {
+			id: imageZoomOutAnimation
+			PropertyAnimation {
+				target: imageZoomOut; property: "scale"; from: 1.0; to: 0.8; duration: 120
+			}
+			PropertyAnimation {
+				target: imageZoomOut; property: "scale"; from: 0.8; to: 1.0; duration: 80
+			}
+		}
+		MouseArea {
+			anchors.fill: parent
+			onClicked: {
+				map.newCenter = map.center
+				map.newZoom = map.zoomLevel - map.zoomStep
+				mapAnimationClick.restart()
+				imageZoomOutAnimation.restart()
+			}
+		}
+	}
+
 	function openLocationInGoogleMaps(latitude, longitude) {
 		var loc = latitude + " " + longitude
 		var url = "https://www.google.com/maps/place/" + loc + "/@" + loc + ",5000m/data=!3m1!1e3!4m2!3m1!1s0x0:0x0"
diff --git a/mobile-widgets/qml/icons/mapwidget-zoom-in.png b/mobile-widgets/qml/icons/mapwidget-zoom-in.png
new file mode 100644
index 000000000..8c2521c3e
--- /dev/null
+++ b/mobile-widgets/qml/icons/mapwidget-zoom-in.png
diff --git a/mobile-widgets/qml/icons/mapwidget-zoom-out.png b/mobile-widgets/qml/icons/mapwidget-zoom-out.png
new file mode 100644
index 000000000..bd372f17d
--- /dev/null
+++ b/mobile-widgets/qml/icons/mapwidget-zoom-out.png
diff --git a/subsurface.qrc b/subsurface.qrc
index 017451c3c..55c5e2c02 100644
--- a/subsurface.qrc
+++ b/subsurface.qrc
@@ -7,6 +7,8 @@
         <file alias="mapwidget-toggle-satellite">mobile-widgets/qml/icons/mapwidget-toggle-satellite.png</file>
         <file alias="mapwidget-toggle-street">mobile-widgets/qml/icons/mapwidget-toggle-street.png</file>
         <file alias="mapwidget-context-menu">mobile-widgets/qml/icons/mapwidget-context-menu.png</file>
+        <file alias="mapwidget-zoom-in">mobile-widgets/qml/icons/mapwidget-zoom-in.png</file>
+        <file alias="mapwidget-zoom-out">mobile-widgets/qml/icons/mapwidget-zoom-out.png</file>
         <file alias="star">icons/star.svg</file>
         <file alias="subsurface-icon">icons/subsurface-icon.png</file>
         <file alias="subsurface-mobile-icon">icons/subsurface-mobile-icon.png</file>