[qt] Added QQuickMapboxGL{Layout,Paint}StyleProperty

2 files changed, 62 insertions, 11 deletions

diff --git a/platform/qt/qmlapp/main.cpp b/platform/qt/qmlapp/main.cpp
index 1b07c699cc..0a376c6bdd 100644
--- a/platform/qt/qmlapp/main.cpp
+++ b/platform/qt/qmlapp/main.cpp
@@ -4,6 +4,7 @@
 #include <qqml.h>
 
 #include <QQuickMapboxGL>
+#include <QQuickMapboxGLStyleProperty>
 
 int main(int argc, char *argv[])
 {
@@ -13,7 +14,9 @@ int main(int argc, char *argv[])
     app.setWindowIcon(QIcon(":icon.png"));
 #endif
 
-    qmlRegisterType<QQuickMapboxGL>("QQuickMapboxGL", 1, 0, "QQuickMapboxGL");
+    qmlRegisterType<QQuickMapboxGL>("QQuickMapboxGL", 1, 0, "MapboxMap");
+    qmlRegisterType<QQuickMapboxGLLayoutStyleProperty>("QQuickMapboxGL", 1, 0, "MapboxLayoutStyleProperty");
+    qmlRegisterType<QQuickMapboxGLPaintStyleProperty>("QQuickMapboxGL", 1, 0, "MapboxPaintStyleProperty");
 
     QQmlApplicationEngine engine;
     engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
diff --git a/platform/qt/qmlapp/main.qml b/platform/qt/qmlapp/main.qml
index a5e51e9801..6edfd7490e 100644
--- a/platform/qt/qmlapp/main.qml
+++ b/platform/qt/qmlapp/main.qml
@@ -14,10 +14,36 @@ ApplicationWindow {
     visible: true
 
     ColorDialog {
-        id: colorDialog
-        title: "Background color"
-        visible: false
-        color: "black"
+        id: landColorDialog
+        title: "Land color"
+        onCurrentColorChanged: { mapStreets.color = currentColor }
+    }
+
+    ColorDialog {
+        id: waterColorDialog
+        title: "Water color"
+        onCurrentColorChanged: { waterColor.value = currentColor }
+    }
+
+    MapboxLayoutStyleProperty {
+        parent: mapStreets
+        layer: "road-label-large"
+        property: "visibility"
+        value: roadLabel.checked ? "visible" : "none"
+    }
+
+    MapboxLayoutStyleProperty {
+        parent: mapStreets
+        layer: "road-label-medium"
+        property: "visibility"
+        value: roadLabel.checked ? "visible" : "none"
+    }
+
+    MapboxLayoutStyleProperty {
+        parent: mapStreets
+        layer: "road-label-small"
+        property: "visibility"
+        value: roadLabel.checked ? "visible" : "none"
     }
 
     RowLayout {
@@ -43,7 +69,7 @@ ApplicationWindow {
             front: Rectangle {
                 anchors.fill: parent
 
-                QQuickMapboxGL {
+                MapboxMap {
                     id: mapStreets
 
                     anchors.fill: parent
@@ -59,9 +85,15 @@ ApplicationWindow {
                     bearing: bearingSlider.value
                     pitch: pitchSlider.value
 
-                    color: colorDialog.currentColor
+                    color: landColorDialog.color
                     copyrightsVisible: true
 
+                    MapboxPaintStyleProperty {
+                        id: waterColor
+                        layer: "water"
+                        property: "fill-color"
+                    }
+
                     Image {
                         id: logo
 
@@ -121,7 +153,7 @@ ApplicationWindow {
             back: Rectangle {
                 anchors.fill: parent
 
-                QQuickMapboxGL {
+                MapboxMap {
                     id: mapSatellite
 
                     anchors.fill: parent
@@ -232,9 +264,25 @@ ApplicationWindow {
             }
 
             Button {
-                id: colorChangeButton
-                text: "Change background color"
-                onClicked: colorDialog.open()
+                anchors.left: parent.left
+                anchors.right: parent.right
+                text: "Select land color"
+                onClicked: landColorDialog.open()
+            }
+
+            Button {
+                anchors.left: parent.left
+                anchors.right: parent.right
+                text: "Select water color"
+                onClicked: waterColorDialog.open()
+            }
+
+            CheckBox {
+                id: roadLabel
+                anchors.left: parent.left
+                anchors.right: parent.right
+                text: "Toggle road label"
+                checked: true
             }
         }
     }