How to ensure Popup is visible inside a QML Map

You can check if (popup width+popup x) goes outside screen width then change x,y to adjust popup position. You can look into following modified code for Popup component. adjust X and Y as per your marker position.

          Popup {
                    id: myPopup
                    x: {
                        if((mapItem.x+myPopup.width) >= root.width)
                           return -(myRect.width/2)-(width)
                        else if((mapItem.x-myPopup.width) < 0)
                           return (myRect.width)
                        else
                          return myRect.width / 2 - width / 2
                     }
                    y: {
                        if((mapItem.y+myPopup.height) >= root.height)
                            return  -(myRect.height/2)-(height)
                        else if((mapItem.y-myPopup.height) < 0)
                            return (height)
                        else
                            return myRect.height / 2 - height / 2
                     }
                    visible: false
                    Label { text: model.name;anchors.centerIn: parent;horizontalAlignment: Text.AlignHCenter; }
                }

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; }
                    }
                }
            }
        }
    }
}