Clicking markers on iPad

[RexBradford]

I'm testing a map on the iPad, and almost everything works.  This is developed using regular javascript framework, not the IOS one.

I can pan and zoom the map with my finger, and double-click to zoom in.

But it's very hard to click on a marker to bring up an infowindow.  The first click acts like a hover, bringing up the tooltip.  Then if you click again on the same marker, you get the real "click" event that fires the infowindow.  But if the second click lands on some other marker, you get the hover/tooltip on that instead.  In a crowded area, it becomes almost impossible to get an infowindow to appear.

I understand that a touchscreen has to somehow deal with the fact that hover and click and intertwingled.  But I wanted to know if the above is "as designed and expected", or whether it should be behaving in some better way.

// Code looks something like this (the layer is a Graphics layer):
    layer.dojoLinkonMouseOver = dojo.connect(layer, "onMouseOver", layerUI.tooltipShow);
    layer.dojoLinkonMouseMove = dojo.connect(layer, "onMouseMove", layerUI.tooltipUpdate);
    layer.dojoLinkonMouseOut = dojo.connect(layer, "onMouseOut", layerUI.tooltipClose);
// On iPad, very hard to get the onClick to fire in a crowded area
    layer.dojoLinkonClick = dojo.connect(layer, "onClick", function(evt) {
        layerUI.handleClick(evt);       
    });

Thanks,

Rex Bradford
Direct Relief International

[derekswingley1]

Hi Rex,

My thoughts are that when developing for a touch based app you shouldn't be depending on hover events as those do not exist/are unreliable. Are you able to use onClick in your app instead?

[RexBradford]

Hi Rex,

My thoughts are that when developing for a touch based app you shouldn't be depending on hover events as those do not exist/are unreliable. Are you able to use onClick in your app instead?

Thanks for quick reply.

I am using onClick to bring up the info window.  The problem is that the onClick only fires if I touch a marker twice in succession.  It seems touch 1 activates hover, and touch 2 activates onclick.  And if the second touch hits another marker (easy if crowded), then I get two hovers.

Are you saying I should detect iPad and turn off the hovers and respond to onClick?  Would turning off hover handlers cause onClick to fire on first touch?

Rex Bradford
Direct Relief International

[derekswingley1]

I'm curious about your popup. What does your popup consist of?

[RexBradford]

I'm curious about your popup. What does your popup consist of?

It really doesn't matter.  It's a standard ESRI InfoWindow with text in it.  It works fine, the problem is the fact that the code which creates it doesn't get called, because onClick doesn't get generated.

In earlier email you implied that if I turned off hover handlers, then maybe a tap would be interpreted as onClick rather than onMouseOver.  Is this true?

Rex

[derekswingley1]

I'm surprised hover handlers are firing at all�?? that's why I asked about your popup.

Can you post a repro case that shows this?

[RexBradford]

I'm surprised hover handlers are firing at all�?? that's why I asked about your popup.

Can you post a repro case that shows this?

You were right about not wanting hover handlers.  Not installing mouseover handlers on iPad made onClick start working:

    // Detect iPad
    app.isiPad = navigator.userAgent.match(/iPad/i) != null;

    // Mouseovers for tooltips, unless iPad
    if (!app.isiPad) {
        layer.dojoLinkonMouseOver = dojo.connect(layer, "onMouseOver", layerUI.tooltipShow);
        layer.dojoLinkonMouseMove = dojo.connect(layer, "onMouseMove", layerUI.tooltipUpdate);
        layer.dojoLinkonMouseOut = dojo.connect(layer, "onMouseOut", layerUI.tooltipClose);
    }

    // Connect the click handler too.  Now in iPad this fires, where it didn't before when mouseover handlers were on.
    layer.dojoLinkonClick = dojo.connect(layer, "onClick", function(evt) {
        layerUI.handleClick(evt);        
    });