1 files changed, 59 insertions, 27 deletions

diff --git a/examples/location/planespotter/Plane.qml b/examples/location/planespotter/Plane.qml
index 65403e1b..af229a06 100644
--- a/examples/location/planespotter/Plane.qml
+++ b/examples/location/planespotter/Plane.qml
@@ -3,6 +3,8 @@
 
 import QtQuick
 import QtLocation
+import QtQuick.Shapes
+
 
 //! [PlaneMapQuick1]
 // Plane.qml
@@ -14,54 +16,84 @@ MapQuickItem {
     anchorPoint.x: image.width/2
     anchorPoint.y: image.height/2
 
-    sourceItem: Grid {
+    sourceItem: Item {
         //...
 //! [PlaneMapQuick1]
-        columns: 1
-        Grid {
-            horizontalItemAlignment: Grid.AlignHCenter
-            Image {
-                id: image
-                rotation: bearing
-                source: "airplane.png"
-            }
-            Rectangle {
-                id: bubble
-                color: "lightblue"
-                border.width: 1
-                width: text.width * 1.3
-                height: text.height * 1.3
-                radius: 5
-                Text {
-                    id: text
-                    anchors.centerIn: parent
-                    text: pilotName
+        width: childrenRect.width
+        height: childrenRect.height
+        Image {
+            id: image
+            rotation: bearing
+            source: "airplane.svg"
+        }
+        Shape {
+            id: bubble
+            anchors.bottom: image.top
+            anchors.margins: 3
+            opacity: 0.8
+            preferredRendererType: Shape.CurveRenderer
+            ShapePath {
+                strokeWidth: 0
+                strokeColor: "#00414A"
+                fillGradient: LinearGradient {
+                    x1: 0; y1: 0
+                    x2: 10 + text.width; y2: 10 + text.height
+                    GradientStop { position: 0; color: "#00414A" }
+                    GradientStop { position: 1; color: "#0C1C1F" }
                 }
+                startX: 5; startY: 0
+                PathLine { x: 5 + text.width + 6; y: 0 }
+                PathArc { x: 10 + text.width + 6; y: 5; radiusX: 5; radiusY: 5}
+                PathLine { x: 10 + text.width + 6; y: 5 + text.height + 6 }
+                PathArc { x: 5 + text.width + 6; y: 10 + text.height + 6 ; radiusX: 5; radiusY: 5}
+                // arrow down
+                PathLine { x: 10 + text.width / 2 + 3; y: 10 + text.height + 6 }
+                PathLine { x: 5 + text.width / 2 + 3; y: 15 + text.height + 6 }
+                PathLine { x: 0 + text.width / 2 + 3; y: 10 + text.height + 6 }
+                // end arrow down
+                PathLine { x: 5; y: 10 + text.height + 6 }
+                PathArc { x: 0; y: 5 + text.height + 6 ; radiusX: 5; radiusY: 5}
+                PathLine { x: 0; y: 5 }
+                PathArc { x: 5; y: 0 ; radiusX: 5; radiusY: 5}
+            }
+            Text {
+                id: text
+                color: "white"
+                anchors.top: parent.top
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.margins: 8
+                text: pilotName
+                font.bold: true
             }
         }
 
         Rectangle {
             id: message
-            color: "lightblue"
-            border.width: 1
-            width: banner.width * 1.3
-            height: banner.height * 1.3
+            anchors.left: image.right
+            anchors.margins: 3
+            opacity: 0.0
             radius: 5
-            opacity: 0
+            border.width: 0
+            color: "#E6E6E6"
+            width: banner.width + 30
+            height: banner.height + 20
             Text {
                 id: banner
+                color: "#00414A"
                 anchors.centerIn: parent
+                font.bold: true
             }
+
             SequentialAnimation {
                 id: playMessage
                 running: false
                 NumberAnimation { target: message;
                     property: "opacity";
-                    to: 1.0;
+                    to: 1;
                     duration: 200
                     easing.type: Easing.InOutQuad
                 }
-                PauseAnimation  { duration: 1000 }
+                PauseAnimation  { duration: 3000 }
                 NumberAnimation { target: message;
                     property: "opacity";
                     to: 0.0;