Change slider orientation in mapviewer example.

Set zoom slider to be vertical and move map scale information to right
bottom corner. Now it is easier to read map copyrights and scale.

Change-Id: I5d76fabe2e7b3fc08a4274a3efb25435ebd1dc0d
Reviewed-by: Alex Blasche <alexander.blasche@theqtcompany.com>

1 files changed, 43 insertions, 49 deletions

diff --git a/examples/location/mapviewer/map/MapComponent.qml b/examples/location/mapviewer/map/MapComponent.qml
index c6855864..e3a0f323 100644
--- a/examples/location/mapviewer/map/MapComponent.qml
+++ b/examples/location/mapviewer/map/MapComponent.qml
@@ -356,12 +356,11 @@ Map {
         z: map.z + 3
         minimumValue: map.minimumZoomLevel;
         maximumValue: map.maximumZoomLevel;
-        anchors.bottom: parent.bottom
-        anchors.left: parent.left
+        anchors.margins: 10
+        anchors.bottom: scale.top
+        anchors.top: parent.top
         anchors.right: parent.right
-        anchors.bottomMargin: 15
-        anchors.rightMargin: 10
-        anchors.leftMargin: 90
+        orientation : Qt.Vertical
         value: map.zoomLevel
         onValueChanged: {
             map.zoomLevel = value
@@ -369,6 +368,45 @@ Map {
         }
     }
 
+    Item {
+        id: scale
+        z: map.z + 3
+        visible: scaleText.text != "0 m"
+        anchors.bottom: parent.bottom;
+        anchors.right: parent.right
+        anchors.margins: 20
+        height: scaleText.height * 2
+        width: scaleImage.width
+
+        Image {
+            id: scaleImageLeft
+            source: "../resources/scale_end.png"
+            anchors.bottom: parent.bottom
+            anchors.right: scaleImage.left
+        }
+        Image {
+            id: scaleImage
+            source: "../resources/scale.png"
+            anchors.bottom: parent.bottom
+            anchors.right: scaleImageRight.left
+        }
+        Image {
+            id: scaleImageRight
+            source: "../resources/scale_end.png"
+            anchors.bottom: parent.bottom
+            anchors.right: parent.right
+        }
+        Label {
+            id: scaleText
+            color: "#004EAE"
+            anchors.centerIn: parent
+            text: "0 m"
+        }
+        Component.onCompleted: {
+            map.calculateScale();
+        }
+    }
+
     Component {
         id: routeDelegate
 
@@ -482,50 +520,6 @@ Map {
     }
     //! [geocodeview]
 
-    Item {//scale
-        id: scale
-        parent: zoomSlider.parent
-        visible: scaleText.text != "0 m"
-        z: map.z + 2
-        opacity: 0.6
-        anchors {
-            bottom: zoomSlider.top;
-            bottomMargin: 8;
-            left: zoomSlider.left
-        }
-        Image {
-            id: scaleImageLeft
-            source: "../resources/scale_end.png"
-            anchors.bottom: parent.bottom
-            anchors.left: parent.left
-        }
-        Image {
-            id: scaleImage
-            source: "../resources/scale.png"
-            anchors.bottom: parent.bottom
-            anchors.left: scaleImageLeft.right
-        }
-        Image {
-            id: scaleImageRight
-            source: "../resources/scale_end.png"
-            anchors.bottom: parent.bottom
-            anchors.left: scaleImage.right
-        }
-        Text {
-            id: scaleText
-            color: "#004EAE"
-            horizontalAlignment: Text.AlignHCenter
-            anchors.bottom: parent.bottom
-            anchors.left: parent.left
-            anchors.bottomMargin: 3
-            text: "0 m"
-            font.pixelSize: 14
-        }
-        Component.onCompleted: {
-            map.calculateScale();
-        }
-    }
-
     Timer {
         id: scaleTimer
         interval: 100