ArcGIS-JSAPI: Clicking on a webmap without clicking on a webmap

ArcGIS-JSAPI-MapClickByQueryHack.md

Clicking on a map without clicking on a map

An ArcGIS JavaScript API hack

Purpose: I have a map application with a list of results from a query. When I click on one of the items in the result list, I wanted the map to zoom to the associated feature, and trigger a click that shows the result in a popup.

Library: ArcGIS JavaScript API

Version: tested on versions 3.9-3.13.

require([ ... ,
  "esri/arcgis/utils",
  "dojo/on",
  ...
], function ( ... , arcgisUtils, dojoOn, ...) {
  ... // do stuff
  
  var listNode = document.getElementById("resultlist");
  
  var mapApp = arcgisUtils.createMap("webmapid", "map", {
    ...
  }).then(createMapCallback, createMapError);
  
  function createMapCallback (response) {
    var map = response.map,
      clickEventListener = response.clickEventListener,
      something;
      
    // do something that triggers 
    
    dojoOn(something, "did-something-cool-and-now-i-have-a-graphic-result", function (graphic) {
      var centerPoint, maxZoom def;
      
      // get the center of the graphic.
      switch(graphic.geometry.type) {
        case "point":
          centerPoint = graphic.geometry;
          maxZoom = map.getMaxZoom();
          if (maxZoom < 0) {
            maxZoom = 2;
          }
          def = map.centerAndZoom(centerPoint, maxZoom);
          break;
        case "extent":
          centerPoint = graphic.getCenter();
          def = map.setExtent(graphic);
          break;
        default:
          // shortcut instead of getting the label point from the geometry service
          centerPoint = graphic.getExtent().getCenter();
          def = map.setExtent(graphic.getExtent());
      }
      
      // after map has zoomed in...
      def.then(function () {
        var centerScreen = map.toScreen(centerPoint);
        
        if (clickEventListener && typeof clickEventListener === "function") {
          // trigger the map click event from the webmap's click event listener.
          clickEventListener.call(map, {
            graphic: graphic,
            mapPoint: centerPoint,
            screenPoint: centerScreen
          });
        } else {
          // clickEventListener will be undefined if webmap created with the {usePopupManager: true} property.
          // undocumented map click event trigger
          map.onClick({
            graphic: graphic,
            mapPoint: centerPoint,
            screenPoint: centerScreen
          });
          
        }
        
      });
      
    });
    
  }
  
  function createMapError(err) {
    console.error(err);
  }
  
});