QtLocation mapviewer example MiniMap improvement

The mapviewer example currently uses the minimap to show a red
MapRectangle sized 10 degrees in latitude and 10 degrees in longitude.
This patch makes the minimap visualize the actual displayed area in
the main map as a red rectangle in the minimap.
The minimap zoom level is also now gently bound to the main map zoom
level.
There's one bug left, though, but not related to this qml component, which
causes the border of the red MapRectangle of the minimap to often be drawn
on the left of the rectangle.

Change-Id: I6ba332bf72f0489f5ada765c85f6890a09ca1a98
Reviewed-by: Alex Blasche <alexander.blasche@qt.io>

1 files changed, 47 insertions, 11 deletions

diff --git a/examples/location/mapviewer/map/MiniMap.qml b/examples/location/mapviewer/map/MiniMap.qml
index 821879f2..78d2b01e 100644
--- a/examples/location/mapviewer/map/MiniMap.qml
+++ b/examples/location/mapviewer/map/MiniMap.qml
@@ -49,12 +49,33 @@
 ****************************************************************************/
 
 import QtQuick 2.5
+import QtPositioning 5.3
 import QtLocation 5.6
 
 Rectangle{
+
+    function clamp(num, min, max)
+    {
+      return num < min ? min : num > max ? max : num;
+    }
+
+    function minimumScaleFactor()
+    {
+        var hscalefactor = (400.0 / Math.max(Math.min(map.width, 1000), 400)) * 0.5
+        var vscalefactor = (400.0 / Math.max(Math.min(map.height, 1000), 400)) * 0.5
+        return Math.min(hscalefactor,vscalefactor)
+    }
+
+    function avgScaleFactor()
+    {
+        var hscalefactor = (400.0 / Math.max(Math.min(map.width, 1000), 400)) * 0.5
+        var vscalefactor = (400.0 / Math.max(Math.min(map.height, 1000), 400)) * 0.5
+        return (hscalefactor+vscalefactor) * 0.5
+    }
+
     id: miniMapRect
-    width: 152
-    height: 152
+    width: Math.floor(map.width * avgScaleFactor()) + 2
+    height: Math.floor(map.height * avgScaleFactor()) + 2
     anchors.right: (parent) ? parent.right : undefined
     anchors.rightMargin: 10
     anchors.top: (parent) ? parent.top : undefined
@@ -66,25 +87,40 @@ Rectangle{
         anchors.topMargin: 1
         anchors.left: parent.left
         anchors.leftMargin: 1
-        width: 150
-        height: 150
-        zoomLevel: (map.zoomLevel > minimumZoomLevel + 3) ? minimumZoomLevel + 3 : 2.5
+        width: Math.floor(map.width * avgScaleFactor())
+        height: Math.floor(map.height * avgScaleFactor())
+        zoomLevel: clamp(map.zoomLevel - 4.5, 2.0, 5.0) //(map.zoomLevel > minimumZoomLevel + 3) ? minimumZoomLevel + 3 : 1.5
         center: map.center
         plugin: map.plugin
         gesture.enabled: false
         copyrightsVisible: false
+        property double mapZoomLevel : map.zoomLevel
+
+        // cannot use property bindings on map.visibleRegion in MapRectangle because it's non-NOTIFYable
+        onCenterChanged: miniMapRectangle.updateCoordinates()
+        onMapZoomLevelChanged: miniMapRectangle.updateCoordinates()
+        onWidthChanged: miniMapRectangle.updateCoordinates()
+        onHeightChanged: miniMapRectangle.updateCoordinates()
 
         MapRectangle {
+            id: miniMapRectangle
             color: "#44ff0000"
             border.width: 1
             border.color: "red"
-            topLeft {
-                latitude: miniMap.center.latitude + 5
-                longitude: miniMap.center.longitude - 5
+
+            function getMapVisibleRegion()
+            {
+                return QtPositioning.shapeToRectangle(map.visibleRegion)
             }
-            bottomRight {
-                latitude: miniMap.center.latitude - 5
-                longitude: miniMap.center.longitude + 5
+
+            function updateCoordinates()
+            {
+                topLeft.latitude =  getMapVisibleRegion().topLeft.latitude
+                topLeft.longitude=  getMapVisibleRegion().topLeft.longitude
+                bottomRight.latitude =  getMapVisibleRegion().bottomRight.latitude
+                bottomRight.longitude=  getMapVisibleRegion().bottomRight.longitude
+                console.log("TopLeft: " + topLeft)
+                console.log("BotRigh: " + bottomRight)
             }
         }
     }