2

I asked this over on the ESRI forum but it didn't get any traction. I have an app that I'm designing specifically for mobile. At one point in its usage, a user needs to pan and zoom to a location and select a point and get back the evt.mapPoint.x/y. While developing on a desktop/laptop, the double-click event is available. One mobile, it's not. ESRI does support a double-tap/click to zoom the map, but this event doesn't look like I can use it to select a location. I've tried using Dojo Gestures for a tap.hold event, but the ESRI API doesn't honor this event. Right now, this is how I'm implementing it.

pickLocation: function() {
          menus.closePointPicker();
          menus.showTapAndHoldDialog();
          map.disableDoubleClickZoom();
          var pick = on(map, 'dbl-click', function(evt) {
            Event.stop(evt);
            var latLng = webMercatorUtils.xyToLngLat(evt.mapPoint.x, evt.mapPoint.y);
            var location = {};
            coords = {
              latitude: latLng[1],
              longitude: latLng[0],
              accuracy:null,
              heading:null
            };
            var locationInfo = {
              coords:coords,
              point: evt.mapPoint
            };
            pick.remove();
            topic.publish('location-picked', locationInfo);
            menus.hideTapAndHoldDialog();
          });

Any ideas on how to either get a double-tap or tap and hold event to connect?

2

I was going to suggest using the dojo gesture library, grabbing the screen coordinates,converting them using esri/geometry/screenUtils, but it appears that dojox/gesture/tap does not contain the pageX or pageY details in the returned event. open ticket.

If this did work, you could capture the double tap like this fiddle.

Using Hammer.js I got very close in this fiddle.

Relevant code to capture the double tap event.

var hammertime = Hammer(dom.byId("mapDiv"));
hammertime.on("doubletap", function (e) {
    // convert screen coords to map coords
    var x, y, point, mapPoint, sms, graphic;
    x = e.gesture.center.pageX;
    y = e.gesture.center.pageY;
    point = new Point(x, y);
    mapPoint = screenUtils.toMapPoint(
        map.extent,
        map.width,
        map.height,
        point
    );
    sms = new SimpleMarkerSymbol().setStyle(
                SimpleMarkerSymbol.STYLE_SQUARE)
                  .setColor(new Color([255, 0, 0, 0.5])
              );

    graphic = new Graphic(mapPoint, sms);
    map.graphics.add(graphic);
});

There is a slight offset of where the graphic is placed versus where the map was actually double-tapped, but I think this has to do with the frames. You may have some luck going down this route and doing some additional math for margins/padding if required. The Hammer gestures may work better for you on mobile than the Dojo ones will,

Hope that helps.

  • Thanks Rene. This looks like a pretty workable solution. I'll play with it a bit. I'm thinking every time they mention 'mobile' at the dev summit, perhaps I should sneeze out "double-click" ala Top Gun. – Jim Wharton Jan 14 '14 at 17:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.