mapviewer example: QML revamp

- Modifications as per c252ae7abf81a07649c05cafc76324179ea8a18e

Task-number: PYSIDE-2206
Change-Id: I6580e7ae44ee17dd3526059f0963a0f45fcb344f
Reviewed-by: Friedemann Kleint <Friedemann.Kleint@qt.io>
(cherry picked from commit 9c7f990f8d2d71650b11c6913c4d7c4118eccad6)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>

1 files changed, 64 insertions, 0 deletions

diff --git a/examples/location/mapviewer/MapViewer/map/Marker.qml b/examples/location/mapviewer/MapViewer/map/Marker.qml
new file mode 100644
index 000000000..c7494cf57
--- /dev/null
+++ b/examples/location/mapviewer/MapViewer/map/Marker.qml
@@ -0,0 +1,64 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtLocation
+
+//! [mqi-top]
+MapQuickItem {
+    id: marker
+//! [mqi-top]
+
+//! [mqi-anchor]
+    anchorPoint.x: image.width/4
+    anchorPoint.y: image.height
+
+    HoverHandler {
+        id: hoverHandler
+    }
+    TapHandler {
+        id: tapHandler
+        acceptedButtons: Qt.RightButton
+        gesturePolicy: TapHandler.WithinBounds
+        onTapped: {
+            mapview.currentMarker = -1
+            for (var i = 0; i< mapview.markers.length; i++){
+                if (marker == mapview.markers[i]){
+                    mapview.currentMarker = i
+                    break
+                }
+            }
+            mapview.showMarkerMenu(marker.coordinate)
+        }
+    }
+    DragHandler {
+        id: dragHandler
+        grabPermissions: PointerHandler.CanTakeOverFromItems | PointerHandler.CanTakeOverFromHandlersOfDifferentType
+    }
+
+    sourceItem: Image {
+        id: image
+//! [mqi-anchor]
+        source: "../resources/marker.png"
+        opacity: hoverHandler.hovered ? 0.6 : 1.0
+
+        Text{
+            id: number
+            y: image.height/10
+            width: image.width
+            color: "white"
+            font.bold: true
+            font.pixelSize: 14
+            horizontalAlignment: Text.AlignHCenter
+            Component.onCompleted: {
+                text = mapview.markerCounter
+            }
+        }
+
+//! [mqi-closeimage]
+    }
+//! [mqi-closeimage]
+
+//! [mqi-close]
+}
+//! [mqi-close]