[Qt] Update QML runtime style example

9 files changed, 112 insertions, 275 deletions

diff --git a/platform/qt/qmlapp/main.qml b/platform/qt/qmlapp/main.qml
index c0882ffa03..37db2bb41d 100644
--- a/platform/qt/qmlapp/main.qml
+++ b/platform/qt/qmlapp/main.qml
@@ -61,51 +61,122 @@ ApplicationWindow {
                             property var url: "mapbox://styles/mapbox/streets-v9"
                         },
                         MapParameter {
+                            id: waterPaint
+                            property var type: "paint"
+                            property var layer: "water"
+                            property var fillColor: waterColorDialog.color
+                        },
+                        MapParameter {
                             property var type: "source"
-                            property var id: "testSource"
+                            property var name: "routeSource"
                             property var sourceType: "geojson"
                             property var data: ":source.geojson"
                         },
                         MapParameter {
                             property var type: "layer"
-                            property var id: "testLayer"
-                            property var layerType: "fill"
-                            property var source: "testSource"
+                            property var name: "routeCase"
+                            property var layerType: "line"
+                            property var source: "routeSource"
                         },
                         MapParameter {
                             property var type: "paint"
-                            property var layer: "testLayer"
-                            property var fillColor: Qt.rgba(0, 0, 1, 1)
+                            property var layer: "routeCase"
+                            property var lineColor: "white"
+                            property var lineWidth: 20.0
+                        },
+                        MapParameter {
+                            property var type: "layout"
+                            property var layer: "routeCase"
+                            property var lineJoin: "round"
+                            property var lineCap: lineJoin
+                            property var visibility: toggleRoute.checked ? "visible" : "none"
+                        },
+                        MapParameter {
+                            property var type: "layer"
+                            property var name: "route"
+                            property var layerType: "line"
+                            property var source: "routeSource"
                         },
                         MapParameter {
                             property var type: "paint"
-                            property var layer: "water"
-                            property var fillColor: waterColorDialog.color
+                            property var layer: "route"
+                            property var lineColor: "blue"
+                            property var lineWidth: 8.0
                         },
                         MapParameter {
                             property var type: "layout"
-                            property var layer: "road-label-large"
-                            property var visibility: roadLabel.checked ? "visible" : "none"
+                            property var layer: "route"
+                            property var lineJoin: "round"
+                            property var lineCap: "round"
+                            property var visibility: toggleRoute.checked ? "visible" : "none"
+                        },
+                        MapParameter {
+                            property var type: "image"
+                            property var name: "label-arrow"
+                            property var sprite: ":label-arrow.svg"
+                        },
+                        MapParameter {
+                            property var type: "image"
+                            property var name: "label-background"
+                            property var sprite: ":label-background.svg"
+                        },
+                        MapParameter {
+                            property var type: "layer"
+                            property var name: "markerArrow"
+                            property var layerType: "symbol"
+                            property var source: "routeSource"
                         },
                         MapParameter {
                             property var type: "layout"
-                            property var layer: "road-label-medium"
-                            property var visibility: roadLabel.checked ? "visible" : "none"
+                            property var layer: "markerArrow"
+                            property var iconImage: "label-arrow"
+                            property var iconSize: 0.5
+                            property var iconIgnorePlacement: true
+                            property var iconOffset: [ 0.0, -15.0 ]
+                            property var visibility: toggleRoute.checked ? "visible" : "none"
+                        },
+                        MapParameter {
+                            property var type: "layer"
+                            property var name: "markerBackground"
+                            property var layerType: "symbol"
+                            property var source: "routeSource"
                         },
                         MapParameter {
                             property var type: "layout"
-                            property var layer: "road-label-small"
-                            property var visibility: roadLabel.checked ? "visible" : "none"
+                            property var layer: "markerBackground"
+                            property var iconImage: "label-background"
+                            property var textField: "{name}"
+                            property var iconTextFit: "both"
+                            property var iconIgnorePlacement: true
+                            property var textIgnorePlacement: true
+                            property var textAnchor: "left"
+                            property var textSize: 16.0
+                            property var textPadding: 0.0
+                            property var textLineHeight: 1.0
+                            property var textMaxWidth: 8.0
+                            property var iconTextFitPadding: [ 15.0, 10.0, 15.0, 10.0 ]
+                            property var textOffset: [ -0.5, -1.5 ]
+                            property var visibility: toggleRoute.checked ? "visible" : "none"
+                        },
+                        MapParameter {
+                            property var type: "paint"
+                            property var layer: "markerBackground"
+                            property var textColor: "white"
                         },
                         MapParameter {
                             property var type: "filter"
-                            property var layer: "road-label-small"
+                            property var layer: "markerArrow"
+                            property var filter: [ "==", "$type", "Point" ]
+                        },
+                        MapParameter {
+                            property var type: "filter"
+                            property var layer: "markerBackground"
                             property var filter: [ "==", "$type", "Point" ]
                         }
                     ]
 
                     center: QtPositioning.coordinate(60.170448, 24.942046) // Helsinki
-                    zoomLevel: 14
+                    zoomLevel: 12.25
                     minimumZoomLevel: 0
                     maximumZoomLevel: 20
 
@@ -306,22 +377,41 @@ ApplicationWindow {
             Button {
                 anchors.left: parent.left
                 anchors.right: parent.right
+                text: "Streets style"
+                onClicked: {
+                    styleStreets.url = "mapbox://styles/mapbox/streets-v9"
+                    landColorDialog.color = "#e0ded8"
+                    waterColorDialog.color = "#63c5ee"
+                }
+            }
+
+            Button {
+                anchors.left: parent.left
+                anchors.right: parent.right
                 text: "Light style"
-                onClicked: { styleStreets.url = "mapbox://styles/mapbox/light-v9" }
+                onClicked: {
+                    styleStreets.url = "mapbox://styles/mapbox/light-v9"
+                    landColorDialog.color = "#f6f6f4"
+                    waterColorDialog.color = "#cad2d3"
+                }
             }
 
             Button {
                 anchors.left: parent.left
                 anchors.right: parent.right
                 text: "Dark style"
-                onClicked: { styleStreets.url = "mapbox://styles/mapbox/dark-v9" }
+                onClicked: {
+                    styleStreets.url = "mapbox://styles/mapbox/dark-v9"
+                    landColorDialog.color = "#343332"
+                    waterColorDialog.color = "#191a1a"
+                }
             }
 
             CheckBox {
-                id: roadLabel
+                id: toggleRoute
                 anchors.left: parent.left
                 anchors.right: parent.right
-                text: "Toggle road label"
+                text: "Toggle route"
                 checked: true
             }
         }
diff --git a/platform/qt/qmlapp/qml.qrc b/platform/qt/qmlapp/qml.qrc
index a0b2f0f5ad..5f6483ac33 100644
--- a/platform/qt/qmlapp/qml.qrc
+++ b/platform/qt/qmlapp/qml.qrc
@@ -1,6 +1,5 @@
 <RCC>
     <qresource prefix="/">
         <file>main.qml</file>
-        <file>source.geojson</file>
     </qresource>
 </RCC>
diff --git a/platform/qt/qmlapp/source.geojson b/platform/qt/qmlapp/source.geojson
deleted file mode 100644
index f639c1913e..0000000000
--- a/platform/qt/qmlapp/source.geojson
+++ /dev/null
@@ -1,253 +0,0 @@
-{
-  "type": "FeatureCollection",
-  "features": [
-    {
-      "type": "Feature",
-      "properties": {},
-      "geometry": {
-        "type": "Polygon",
-        "coordinates": [
-          [
-            [
-              69.2578125,
-              -40.17887331434695
-            ],
-            [
-              69.2578125,
-              -10.141931686131018
-            ],
-            [
-              110.74218749999999,
-              -10.141931686131018
-            ],
-            [
-              110.74218749999999,
-              -40.17887331434695
-            ],
-            [
-              69.2578125,
-              -40.17887331434695
-            ]
-          ]
-        ]
-      }
-    },
-    {
-      "type": "Feature",
-      "properties": {},
-      "geometry": {
-        "type": "Polygon",
-        "coordinates": [
-          [
-            [
-              -71.71875,
-              -33.43144133557529
-            ],
-            [
-              -71.71875,
-              20.3034175184893
-            ],
-            [
-              -0.703125,
-              20.3034175184893
-            ],
-            [
-              -0.703125,
-              -33.43144133557529
-            ],
-            [
-              -71.71875,
-              -33.43144133557529
-            ]
-          ]
-        ]
-      }
-    },
-    {
-      "type": "Feature",
-      "properties": {},
-      "geometry": {
-        "type": "Polygon",
-        "coordinates": [
-          [
-            [
-              97.3828125,
-              38.548165423046584
-            ],
-            [
-              97.3828125,
-              65.2198939361321
-            ],
-            [
-              155.0390625,
-              65.2198939361321
-            ],
-            [
-              155.0390625,
-              38.548165423046584
-            ],
-            [
-              97.3828125,
-              38.548165423046584
-            ]
-          ]
-        ]
-      }
-    },
-    {
-      "type": "Feature",
-      "properties": {},
-      "geometry": {
-        "type": "Polygon",
-        "coordinates": [
-          [
-            [
-              24.93617534637451,
-              60.17058143435276
-            ],
-            [
-              24.93617534637451,
-              60.17149933938796
-            ],
-            [
-              24.93808507919311,
-              60.17149933938796
-            ],
-            [
-              24.93808507919311,
-              60.17058143435276
-            ],
-            [
-              24.93617534637451,
-              60.17058143435276
-            ]
-          ]
-        ]
-      }
-    },
-    {
-      "type": "Feature",
-      "properties": {},
-      "geometry": {
-        "type": "Polygon",
-        "coordinates": [
-          [
-            [
-              24.94398593902588,
-              60.170346617317186
-            ],
-            [
-              24.94398593902588,
-              60.171456646699184
-            ],
-            [
-              24.947032928466797,
-              60.171456646699184
-            ],
-            [
-              24.947032928466797,
-              60.170346617317186
-            ],
-            [
-              24.94398593902588,
-              60.170346617317186
-            ]
-          ]
-        ]
-      }
-    },
-    {
-      "type": "Feature",
-      "properties": {},
-      "geometry": {
-        "type": "Polygon",
-        "coordinates": [
-          [
-            [
-              24.938321113586426,
-              60.16800902895082
-            ],
-            [
-              24.938321113586426,
-              60.169204528711674
-            ],
-            [
-              24.941797256469727,
-              60.169204528711674
-            ],
-            [
-              24.941797256469727,
-              60.16800902895082
-            ],
-            [
-              24.938321113586426,
-              60.16800902895082
-            ]
-          ]
-        ]
-      }
-    },
-    {
-      "type": "Feature",
-      "properties": {},
-      "geometry": {
-        "type": "Polygon",
-        "coordinates": [
-          [
-            [
-              24.939115047454834,
-              60.17280143974311
-            ],
-            [
-              24.939115047454834,
-              60.17387936902026
-            ],
-            [
-              24.94175434112549,
-              60.17387936902026
-            ],
-            [
-              24.94175434112549,
-              60.17280143974311
-            ],
-            [
-              24.939115047454834,
-              60.17280143974311
-            ]
-          ]
-        ]
-      }
-    },
-    {
-      "type": "Feature",
-      "properties": {},
-      "geometry": {
-        "type": "Polygon",
-        "coordinates": [
-          [
-            [
-              24.944372177124023,
-              60.16034398818875
-            ],
-            [
-              24.944372177124023,
-              60.16837195311943
-            ],
-            [
-              24.963769912719727,
-              60.16837195311943
-            ],
-            [
-              24.963769912719727,
-              60.16034398818875
-            ],
-            [
-              24.944372177124023,
-              60.16034398818875
-            ]
-          ]
-        ]
-      }
-    }
-  ]
-}
\ No newline at end of file
diff --git a/platform/qt/qt.cmake b/platform/qt/qt.cmake
index cf7ae9caa6..bee8e3e27b 100644
--- a/platform/qt/qt.cmake
+++ b/platform/qt/qt.cmake
@@ -57,10 +57,10 @@ include_directories(
 
 # C++ app
 add_executable(mbgl-qt
-    platform/qt/app/app.qrc
     platform/qt/app/main.cpp
     platform/qt/app/mapwindow.cpp
     platform/qt/app/mapwindow.hpp
+    platform/qt/resources/common.qrc
 )
 
 if(WITH_QT_4)
diff --git a/platform/qt/qt5.cmake b/platform/qt/qt5.cmake
index 3223398a94..45b82e0311 100644
--- a/platform/qt/qt5.cmake
+++ b/platform/qt/qt5.cmake
@@ -43,6 +43,7 @@ target_link_libraries(mbgl-qt
 add_executable(mbgl-qt-qml
     platform/qt/qmlapp/main.cpp
     platform/qt/qmlapp/qml.qrc
+    platform/qt/resources/common.qrc
 )
 
 target_link_libraries(mbgl-qt-qml
diff --git a/platform/qt/app/app.qrc b/platform/qt/resources/common.qrc
index e9fd46cfa7..e9fd46cfa7 100644
--- a/platform/qt/app/app.qrc
+++ b/platform/qt/resources/common.qrc
diff --git a/platform/qt/app/label-arrow.svg b/platform/qt/resources/label-arrow.svg
index c1c9d2b77d..c1c9d2b77d 100644
--- a/platform/qt/app/label-arrow.svg
+++ b/platform/qt/resources/label-arrow.svg
diff --git a/platform/qt/app/label-background.svg b/platform/qt/resources/label-background.svg
index af3e471230..af3e471230 100644
--- a/platform/qt/app/label-background.svg
+++ b/platform/qt/resources/label-background.svg
diff --git a/platform/qt/app/source.geojson b/platform/qt/resources/source.geojson
index 1d270ba189..1d270ba189 100644
--- a/platform/qt/app/source.geojson
+++ b/platform/qt/resources/source.geojson