Added MMMapLabel for labels on map

app/qmlV2/Style.js

@@ -83,6 +83,7 @@ const shadowColor = "#66777777"
 
 // Spacing
 const commonSpacing = 20 * __dp
+const commonItemHeight = 50 * __dp
 
 function dynamicText() {
   return "Dynamic text"

app/qmlV2/component/MMMapLabel.qml

@@ -0,0 +1,55 @@
+/***************************************************************************
+ *                                                                         *
+ *   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: text.width
+  height: Style.commonItemHeight
+  visible: control.text.length > 0
+
+  signal clicked
+
+  required property string text
+  property color bgColor: Style.positive
+  property color textColor: Style.forest
+
+  Rectangle {
+    width: parent.width
+    height: parent.height
+    radius: control.height / 2
+    color: control.bgColor
+
+    layer.enabled: true
+    layer.effect: MMShadow {}
+
+    Text {
+      id: text
+
+      anchors.centerIn: parent
+      color: control.textColor
+      text: control.text
+      font: Qt.font(Style.t3)
+      leftPadding: Style.commonSpacing
+      rightPadding: Style.commonSpacing
+    }
+
+    MouseArea {
+      anchors.fill: parent
+      onClicked: control.clicked()
+    }
+  }
+}

gallery/qml.qrc

@@ -27,5 +27,6 @@
         <file>qml/pages/MapPage.qml</file>
         <file>../app/qmlV2/component/MMMapButton.qml</file>
         <file>../app/qmlV2/component/MMShadow.qml</file>
+        <file>../app/qmlV2/component/MMMapLabel.qml</file>
     </qresource>
 </RCC>

gallery/qml/pages/MapPage.qml

@@ -93,4 +93,13 @@ Page {
     MMMapButton {
     }
   }
+
+  MMMapLabel {
+    anchors.left: parent.left
+    anchors.bottom: parent.bottom
+    anchors.leftMargin: 20
+    anchors.bottomMargin: 50
+
+    text: "20.0 m"
+  }
 }