After looking for a while, I finally came across these two functions: mapToItem and mapFromItem.
So, I first need to map the current item point to the map item coordinate system. Then, I must check the point is inside the map viewport. If not, I have to adjust the coordinate, and after that, I map the point back to the current item coordinate system. Popup width and height seem to decrease when approaching bottom and right borders, so I had to use contentHeight, contentWidth and padding properties to get the real popup size.
And I had to initialize the popup x and y to a value different of zero to allow mouse event to pass on the blue dot.
Here is the working code, for those who may need it.
import QtQuick 2.11 import QtQuick.Controls 2.4 import QtLocation 5.11 import QtPositioning 5.11 import QtQuick.Window 2.11 Window { id: root; width: 800; height: 600; Plugin { id: mapPlugin; name: "osm"; } ListModel { id: myModel ListElement { latitude: 48.2351164; longitude: 6.8986936; name: "The point on the center"; } ListElement { latitude: 48.235111272600186; longitude: 6.9007217756551995; name: "The point on the right"; } ListElement { latitude: 48.23512783507458; longitude: 6.896574932520792; name: "The point on the left"; } ListElement { latitude: 48.23614708436043; longitude: 6.898623901851295; name: "The point on the top"; } ListElement { latitude: 48.23417574713512; longitude: 6.898641104398024; name: "The point on the bottom"; } } Map { id: map anchors.fill: parent plugin: mapPlugin center: QtPositioning.coordinate(48.2351164, 6.8986936) zoomLevel: 19 MapItemView { model: myModel delegate: MapQuickItem { anchorPoint.x: myRect.width / 2 anchorPoint.y: myRect.height / 2 width: myRect.width height: myRect.height coordinate: QtPositioning.coordinate(model.latitude, model.longitude) sourceItem: Rectangle { id: myRect readonly property int radius: 10 width: radius * 2 height: radius * 2 color: "transparent" Canvas { id: myCanvas anchors.fill: parent property alias textVisible: myPopup.visible onPaint: { var width = myRect.width; var height = myRect.height; var centreX = width / 2; var centreY = height / 2; var ctx = getContext("2d"); ctx.reset(); ctx.fillStyle = "blue"; ctx.globalAlpha = 1; ctx.beginPath(); ctx.moveTo(centreX, centreY); ctx.arc(centreX, centreY, myRect.radius, 0, Math.PI * 2, false); ctx.closePath(); ctx.fill(); } MouseArea { x: 0; y: 0; width: myRect.radius * 2 height: myRect.radius * 2 acceptedButtons: Qt.LeftButton hoverEnabled: true onPositionChanged: { myCanvas.textVisible = true; // absolute position in map coordinate system var absPos = mapToItem(map, mouse.x, mouse.y); // margin between mouse pointer and the popup var cursorMargin = 10; // extra margin for right and bottom side var bottomRightSideExtraMargin = 10; // add the cursor margin to the position var absPopupX = absPos.x + cursorMargin; var absPopupY = absPos.y + cursorMargin; // adjust if the popup is out of view on the bottom or right sides if (absPos.x + myPopup.contentWidth + myPopup.leftPadding + myRect.radius * 2 + bottomRightSideExtraMargin > root.width) { absPopupX = root.width - (myPopup.contentWidth + myPopup.leftPadding + cursorMargin + bottomRightSideExtraMargin); } if (absPos.y + myPopup.contentHeight + myPopup.topPadding + myRect.radius * 2 + bottomRightSideExtraMargin > root.height) { absPopupY = root.height - (myPopup.contentHeight + myPopup.topPadding + cursorMargin + bottomRightSideExtraMargin); } // convert back to the current item coordinate system var popupPos = mapFromItem(map, absPopupX, absPopupY); myPopup.x = popupPos.x; myPopup.y = popupPos.y; } onExited: { myCanvas.textVisible = false; } } } Popup { id: myPopup // original offset to allow mouse hover x: 20; y: 20; visible: false Label { text: model.name; horizontalAlignment: Text.AlignHCenter; } } } } } } }
