Wiring a popup identify to a button? Button to initiate tool.

IanPeebles · ‎09-20-2013

I have a popup identify working well within the application. What I am wanting to do is create a button that initiates the popup identify instead of simply left clicking on the feature and the popup comes up. Here is my planned workflow:

1. Click on a popup button from the main toolbar (to initiate tool)
2. Click on the feature to identify attributes.
3. Click on the popup button again if I want to identify another feature.

I am wanting to do this so I am not always left clicking and a popup comes up. Also, the click is competing with other tools within the application.

Has anyone been able to get this to work? Any suggestions will be greatly appreciated.

JasonZou · ‎09-20-2013

Define a variable which is a reference to the map.onClick event handler. Define the event handler when the button is clicked, and detach the event handler when the identify operation is complete. So the user has to click the popup button every time to start an identify operation.

var evtOnMapClick;
function btnPopup_onClick() {
    evtOnMapClick = map.on("click", onMapClick);
}

function onMapClick(e) {
    // identify the features and display the popup
    
   // at the end
   if (evtOnMapClick) {
      evtOnMapClick.remove();
      evtOnMapClick = null;
   }
}

Hope it helps.

IanPeebles · ‎09-20-2013

Define a variable which is a reference to the map.onClick event handler. Define the event handler when the button is clicked, and detach the event handler when the identify operation is complete. So the user has to click the popup button every time to start an identify operation.
var evtOnMapClick;
function btnPopup_onClick() {
    evtOnMapClick = map.on("click", onMapClick);
}

function onMapClick(e) {
    // identify the features and display the popup
    
   // at the end
   if (evtOnMapClick) {
      evtOnMapClick.remove();
      evtOnMapClick = null;
   }
}
Hope it helps.

Thanks. That looks promising. How would I incorporate this code block into this sample?

<!DOCTYPE html>
<html>  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <!--The viewport meta tag is used to improve the presentation and behavior of the
    samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>
      San Francisco
    </title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .esriScalebar{
      padding: 20px 20px; } #map{ padding:0;}
    </style>

    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.dijit.Popup");

      var map;

      function init() {
        esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
         
        //define custom popup options
        var popupOptions = {
          markerSymbol: new esri.symbol.SimpleMarkerSymbol("circle", 32, null, new dojo.Color([0, 0, 0, 0.25])),
          marginLeft: "20", 
          marginTop: "20"
        };
        //create a popup to replace the map's info window
        var popup = new esri.dijit.Popup(popupOptions, dojo.create("div"));
        
        map = new esri.Map("map", {
          basemap: "topo",
          center: [-122.448, 37.788],
          zoom: 17,
          infoWindow: popup
        });
        
        //define a popup template
        var popupTemplate = new esri.dijit.PopupTemplate({
          title: "{address}",
          fieldInfos: [
          {fieldName: "req_type", visible: true, label:"Type"},
          {fieldName: "req_date", visible:true, label:"Date" ,format:{dateFormat:'shortDateShortTime'}}
          ],
          showAttachments:true
        });
  
        //create a feature layer based on the feature collection
        var featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/MapServer/0", {
          mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
          infoTemplate: popupTemplate,
          outFields: ["req_date", "address"]
        });
        featureLayer.setDefinitionExpression("address != ''");
        

        
        map.addLayer(featureLayer);
      }

      dojo.ready(init);
    </script>
  </head>
  <body class="claro">
    <button id="identify" data-dojo-type="dijit.form.Button">Identify</button>
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"
    style="width: 100%; height: 100%; margin: 0;">
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"
      style="border:1px solid #000;padding:0;">
      </div>
    </div>
  </body>

</html>

JasonZou · ‎09-20-2013

Here it is. Here is the esri identify sample.

      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.dijit.Popup");
      dojo.require("dijit.form.Button");

      var map;
      var evtOnMapClick;

      function init() {
         ...
         dojo.connect(dijit.byId("identify"), "onClick", btnIdentify_onClick);
      }

function btnIdentify_onClick() {
    evtOnMapClick = map.on("click", onMapClick);
}

function onMapClick(e) {
    // identify the features and display the popup. Refer to esri identify sample
    
   // at the end
   if (evtOnMapClick) {
      evtOnMapClick.remove();
      evtOnMapClick = null;
   }
}