[GIS] ESRI JS API Can I attach other events to to the map object

arcgis-javascript-apiarcgis-mobileeventsjavascriptmobile

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?

Best Answer

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.

Related Question