Try to design map items

app/qmlV2/component/MMMapButton.qml

@@ -0,0 +1,67 @@
+/***************************************************************************
+ *                                                                         *
+ *   This program is free software; you can redistribute it and/or modify  *
+ *   it under the terms of the GNU General Public License as published by  *
+ *   the Free Software Foundation; either version 2 of the License, or     *
+ *   (at your option) any later version.                                   *
+ *                                                                         *
+ ***************************************************************************/
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+import Qt5Compat.GraphicalEffects
+import "../Style.js" as Style
+import "."
+
+Item {
+  id: control
+
+  width: 50
+  height: 50
+
+  Rectangle {
+    id: border
+
+    width: control.width + 3
+    height: control.height + 3
+    radius: width / 2
+    color: "transparent"
+
+    RadialGradient {
+      id: light
+      anchors.centerIn: parent
+
+      width: control.width * 1.2
+      height: control.height * 1.2
+
+      gradient: Gradient {
+        GradientStop { position: 0.3; color: "#80000000" }
+        GradientStop { position: 0.5; color: "transparent" }
+      }
+
+      layer.enabled: true
+      layer.effect: OpacityMask {
+        id: mask
+        maskSource: Rectangle {
+          height: light.height
+          width: light.width
+          radius: width / 2
+        }
+      }
+    }
+  }
+
+  Rectangle {
+    id: rectangle
+
+    width: parent.width
+    height: parent.height
+    radius: 25
+    color: Style.white
+
+    MouseArea {
+      anchors.fill: parent
+    }
+  }
+}

gallery/qml.qrc

@@ -24,5 +24,7 @@
         <file>qml/pages/ChecksPage.qml</file>
         <file>../app/qmlV2/component/MMComponent_reachedDataLimit.qml</file>
         <file>../app/qmlV2/component/MMProgressBar.qml</file>
+        <file>qml/pages/MapPage.qml</file>
+        <file>../app/qmlV2/component/MMMapButton.qml</file>
     </qresource>
 </RCC>

gallery/qml/Main.qml

@@ -128,6 +128,10 @@ ApplicationWindow {
           title: "Drawers"
           source: "DrawerPage.qml"
         }
+        ListElement {
+          title: "Map"
+          source: "MapPage.qml"
+        }
       }
 
       ScrollIndicator.vertical: ScrollIndicator {}

gallery/qml/pages/MapPage.qml

@@ -0,0 +1,89 @@
+/***************************************************************************
+ *                                                                         *
+ *   This program is free software; you can redistribute it and/or modify  *
+ *   it under the terms of the GNU General Public License as published by  *
+ *   the Free Software Foundation; either version 2 of the License, or     *
+ *   (at your option) any later version.                                   *
+ *                                                                         *
+ ***************************************************************************/
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+import QtLocation
+import QtPositioning
+
+import "../../app/qmlV2/component"
+import "../../app/qmlV2/Style.js" as Style
+
+Page {
+  id: pane
+
+  Plugin {
+    id: mapPlugin
+    name: "osm"
+  }
+
+  Map {
+    id: map
+
+    anchors.fill: parent
+    plugin: mapPlugin
+    center: QtPositioning.coordinate(48.72, 21.25) // KE
+    zoomLevel: 12
+    property geoCoordinate startCentroid
+
+    PinchHandler {
+      id: pinch
+
+      target: null
+      onActiveChanged: if (active) {
+                         map.startCentroid = map.toCoordinate(pinch.centroid.position, false)
+                       }
+      onScaleChanged: (delta) => {
+                        map.zoomLevel += Math.log2(delta)
+                        map.alignCoordinateToPoint(map.startCentroid, pinch.centroid.position)
+                      }
+      onRotationChanged: (delta) => {
+                           map.bearing -= delta
+                           map.alignCoordinateToPoint(map.startCentroid, pinch.centroid.position)
+                         }
+      grabPermissions: PointerHandler.TakeOverForbidden
+    }
+
+    WheelHandler {
+      acceptedDevices: Qt.platform.pluginName === "cocoa" || Qt.platform.pluginName === "wayland"
+                       ? PointerDevice.Mouse | PointerDevice.TouchPad
+                       : PointerDevice.Mouse
+      rotationScale: 1/120
+      property: "zoomLevel"
+    }
+
+    DragHandler {
+      target: null
+      onTranslationChanged: (delta) => map.pan(-delta.x, -delta.y)
+    }
+  }
+
+  Rectangle {
+    anchors {
+      bottom: parent.bottom
+      left: parent.left
+      right: parent.right
+    }
+    height: 30
+    color: "white"
+
+    Text {
+      anchors.centerIn: parent
+      text: map.center + "\tzoom: " + map.zoomLevel.toFixed(2)
+    }
+  }
+
+  MMMapButton {
+    anchors.right: parent.right
+    anchors.bottom: parent.bottom
+    anchors.rightMargin: 20
+    anchors.bottomMargin: 50
+  }
+}