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>
This commit is contained in:
Lubomir I. Ivanov 2017-07-25 18:55:36 +03:00 committed by Dirk Hohndel
parent f94aa61009
commit 8c7d1a1163
4 changed files with 54 additions and 0 deletions

View file

@ -114,6 +114,8 @@ Item {
function doubleClickHandler(coord) { function doubleClickHandler(coord) {
newCenter = coord newCenter = coord
newZoom = zoomLevel + zoomStep newZoom = zoomLevel + zoomStep
if (newZoom > maximumZoomLevel)
newZoom = maximumZoomLevel
mapAnimationClick.restart() 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) { function openLocationInGoogleMaps(latitude, longitude) {
var loc = latitude + " " + longitude var loc = latitude + " " + longitude
var url = "https://www.google.com/maps/place/" + loc + "/@" + loc + ",5000m/data=!3m1!1e3!4m2!3m1!1s0x0:0x0" var url = "https://www.google.com/maps/place/" + loc + "/@" + loc + ",5000m/data=!3m1!1e3!4m2!3m1!1s0x0:0x0"

Binary file not shown.

After

Width:  |  Height:  |  Size: 256 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 242 B

View file

@ -7,6 +7,8 @@
<file alias="mapwidget-toggle-satellite">mobile-widgets/qml/icons/mapwidget-toggle-satellite.png</file> <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-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-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="star">icons/star.svg</file>
<file alias="subsurface-icon">icons/subsurface-icon.png</file> <file alias="subsurface-icon">icons/subsurface-icon.png</file>
<file alias="subsurface-mobile-icon">icons/subsurface-mobile-icon.png</file> <file alias="subsurface-mobile-icon">icons/subsurface-mobile-icon.png</file>