Show mouse coordinates and allow panning

[AnjoletteSpradling]

I got the Mouse coordinates sample from the QML Sample App to work in my app but panning doesn't work anymore. I looked at Disable panning but couldn't figure out a way to switch between having panning enabled and getting mouse position changed or click events. Can someone with more expertise help out this QML newbie?

Thanks,

Anjolette

[LucasDanzinger]

Hi Anjolette,

Can you provide a few more details? Are you making an app that will run on desktops, mobile devices, or both? Also, are you looking to display the screen coordinates of the mouse with just hovering and not clicking? We have several MouseEvent signals on the map that will let you know when the mouse is clicked, released, etc ArcGIS Runtime SDK for Qt QML API: Map Class Reference ​.  We also have a mousePositionChanged signal that will let you know the screen coordinates of the mouse. The only caveat is that if you are using a desktop that has a mouse (as opposed to a touch mobile device), you need to actually press and hold the mouse to get the coordinates. On a touch screen, there isn't really a concept of hovering, so this isn't an issue here.

As far as using the MouseArea over top of a Map, this is currently a known issue. Putting a mouse area over the map stops all mouse events from propagating to the map. Please see this in the release notes:

Release notes for ArcGIS Runtime SDK 10.2.6 for Qt—ArcGIS Runtime SDK for Qt | ArcGIS for Developers

Thanks,

Luke

[AnjoletteSpradling]

It will be run on laptops with touch screens. Mouse coordinates with hovering would be preferred. Sounds like MouseArea and mousePositionChanged are out then. I'll see what I can come up with other MouseEvent signals.

[LucasDanzinger]

Ok. If detecting mouse position without hovering, then you should be fine to just use mousePositionChanged. Take the following example and touch the screen and move around the map. It should pan and display screen coordinates.

import QtQuick 2.3
import QtQuick.Controls 1.2
import ArcGIS.Runtime 10.26


ApplicationWindow {
    id: appWindow
    width: 800
    height: 600


    property bool mouseAreaEnabled: true


    Map {
        id: map
        anchors.fill: parent


        focus: true


        ArcGISTiledMapServiceLayer {
            url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
        }


        onMousePositionChanged: {
            console.log("changed (from map signal)", mouse.x, mouse.y)
        }
    }
}

If you need to have hovering built in, then the MouseArea limitation is a known limit at this time. You could probably hack something together like the below example that will basically change the anchors of the mouse area so that some of the time you use the mouse area to get screen coordinates, but other times you remove the mouse area and use the map signals.

import QtQuick 2.3
import QtQuick.Controls 1.2
import ArcGIS.Runtime 10.26


ApplicationWindow {
    id: appWindow
    width: 800
    height: 600


    property bool mouseAreaEnabled: true


    Map {
        id: map
        anchors.fill: parent


        focus: true


        ArcGISTiledMapServiceLayer {
            url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
        }


        onMousePositionChanged: {
            console.log("changed (from map signal)")
        }
    }


    Rectangle {
        id: myRect
        color: "transparent"


        states: [
            State {
                name: "Map"


                AnchorChanges {
                    target: myRect
                    anchors.top: top
                    anchors.left: undefined
                    anchors.right: undefined
                    anchors.bottom: undefined
                }
                PropertyChanges {
                    target: myRect
                    height: .1
                }
            },
            State {
                name: "MouseArea"
                AnchorChanges {
                    target: myRect
                    anchors.top: map.top
                anchors.left: map.left
                    anchors.right: map.right
                    anchors.bottom: map.bottom
                }
            }
        ]


        MouseArea {
            id: mouseArea
            anchors.fill: parent
            hoverEnabled: true
            onMouseXChanged: {
                console.log("changed (from mouse area)");
            }
        }
    }


    Button {
        property bool mouseAreaEnabled: true
        anchors {
            left: parent.left
            top: parent.top
            margins: 15
        }
        text: "toggle"
        onClicked: {
            if (!mouseAreaEnabled) {
                myRect.state = "Map";
                mouseAreaEnabled = true;
            } else if (mouseAreaEnabled) {
                myRect.state = "MouseArea";
                mouseAreaEnabled = false;
            }
        }
    }
}

[AnjoletteSpradling]

I like the first one except I decided to use onMouseClicked. Seems easy enough that I should've figured it out but I think I was missing the mouseAreaEnabled property. Thanks Luke!

[LucasDanzinger · Accepted solution]

Here is probably the best way to do it. Basically place the mouse area over top of the map, but don't accept any of the mouse events so that they actually get propagated to the map. What happens right now is the mouse area intercepts all of the mouse signals, and accepts them, which results in them not going through to the map. It's a few lines of code, but if you actually just create signal handlers for each mouse signal on the MouseArea, then don't accept the mouse, it looks like it will actually get sent down to the map.

If this works for you, please mark this as the correct answer as it is more straight forward than the previous suggestion. Thanks!

import QtQuick 2.3
import QtQuick.Controls 1.2
import ArcGIS.Runtime 10.26


ApplicationWindow {
    id: appWindow
    width: 800
    height: 600


    property bool mouseAreaEnabled: true


    Map {
        id: map
        anchors.fill: parent


        focus: true


        ArcGISTiledMapServiceLayer {
            url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
        }        


        MouseArea {
            id: ma
            anchors.fill: parent
            hoverEnabled: true


            onClicked: {
                mouse.accepted = false;
            }


            onDoubleClicked: {
                mouse.accepted = false;
            }


            onPositionChanged: {
                console.log("mouse position changed", mouse.x)
                mouse.accepted = false;
            }


            onPressAndHold: {
                mouse.accepted = false;
            }


            onPressed: {
                mouse.accepted = false;
            }


            onReleased: {
                mouse.accepted = false;
            }
        }
    }    
}

[AnjoletteSpradling]

Works! Longer than the first suggested idea but more straight forward than the second, I guess. Now on to projecting the coordinates!