nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Clicking/Hovering on marker

HaikalSyed

Hi,

I would like to add clicking and hovering functionalities on a marker.

I am currently using a SimpleMarkerSymbol to display a marker. At the moment, I can click on it and it works.

However what I would like is to have a left click that would have a different function to a right click, as well as hovering. I don't think I have seen any examples regarding this.

How I am doing it at the moment is to use onMouseClicked with identifyGraphicsOverlay function in it and later onIdentifyGraphicsOverlayStatusChanged.

Thanks!

Trouver plus de publications taguées avec

Accepted answers

All comments

LucasDanzinger

The MouseEvent has some additional properties on it that will let you check whether it is a left or right button click - MouseEvent QML Type | Qt Quick 5.13.2

Here is some code for you to enable hovering:

<SPAN class="keyword token">import</SPAN> QtQuick <SPAN class="number token">2.6</SPAN>
<SPAN class="keyword token">import</SPAN> QtQuick<SPAN class="punctuation token">.</SPAN>Controls <SPAN class="number token">2.2</SPAN>
<SPAN class="keyword token">import</SPAN> Esri<SPAN class="punctuation token">.</SPAN>ArcGISRuntime <SPAN class="number token">100.6</SPAN>

ApplicationWindow <SPAN class="punctuation token">{</SPAN>
    id<SPAN class="punctuation token">:</SPAN> appWindow
    width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">800</SPAN>
    height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">600</SPAN>
    title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"HoverTest"</SPAN>

    <SPAN class="comment token">// add a mapView component</SPAN>
    MapView <SPAN class="punctuation token">{</SPAN>
        anchors<SPAN class="punctuation token">.</SPAN>fill<SPAN class="punctuation token">:</SPAN> parent
        <SPAN class="comment token">// set focus to enable keyboard navigation</SPAN>
        focus<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>

        <SPAN class="comment token">// add a map to the mapview</SPAN>
        Map <SPAN class="punctuation token">{</SPAN>
            <SPAN class="comment token">// add the BasemapTopographic basemap to the map</SPAN>
            BasemapTopographic <SPAN class="punctuation token">{</SPAN><SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        MouseArea <SPAN class="punctuation token">{</SPAN>
            anchors<SPAN class="punctuation token">.</SPAN>fill<SPAN class="punctuation token">:</SPAN> parent
            hoverEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>

            onPositionChanged<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="comment token">// get mouse coordinates</SPAN>
                console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>mouse<SPAN class="punctuation token">.</SPAN>x<SPAN class="punctuation token">,</SPAN> mouse<SPAN class="punctuation token">.</SPAN>y<SPAN class="punctuation token">,</SPAN> mouse<SPAN class="punctuation token">.</SPAN>button<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                <SPAN class="comment token">// reject mouse event so events go through to mapview</SPAN>
                mouse<SPAN class="punctuation token">.</SPAN>accepted <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>

            onClicked<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                mouse<SPAN class="punctuation token">.</SPAN>accepted <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>

            onDoubleClicked<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                mouse<SPAN class="punctuation token">.</SPAN>accepted <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>

            onPressAndHold<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                mouse<SPAN class="punctuation token">.</SPAN>accepted <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>

            onPressed<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                mouse<SPAN class="punctuation token">.</SPAN>accepted <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>

            onReleased<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                mouse<SPAN class="punctuation token">.</SPAN>accepted <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN>
    <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

HaikalSyed

Hi. Thanks for reply.

It seems that the code works for the map since the parent is the MapView.

However, not for the marker (SimpleMarkerSymbol).

I tried putting a MouseArea inside GraphicsOverlay and nothing happens.

LucasDanzinger

MouseArea will only work if nested under a MapView or SceneView. If you are trying to identify an individual graphic on a mouse movement, you could try calling MapView.identifyGraphicsOverlay() on one of the mouse move signals

HaikalSyed

In MapView.identifyGraphicsOverlay(), is there anyway to detect left or right click or hovering?

LucasDanzinger

Hover implies no clicking - just hovering. If you want to perform identify after a click, use the mouseClicked signal - MapQuickView Class | ArcGIS for Developers

MouseClicked will pass through a QMouseEvent object through as a parameter, and that object contains a method to determine if it was left, right, or middle button click - QMouseEvent Class | Qt GUI 5.14.0

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.