Add PanTo functionality to my custom widget

[DouglasLecker]

Hello all,
   I am trying to add the panTo functionality to an icon on my custom widget, but it keeps triggering the popup window to open up. How can I just have it pan to the selected feature in my tool without triggering the popup panel?
here is the code block I am trying to implement it in.

    var panButton = dj.create("input", {text:"", value:"", panButton:"",

                    onclick:function(evt){
                        var q = new Query();
                        q.where = "OBJECTID=" + evt.target.parentNode.parentNode.attributes["oid"].value;
                        q.returnGeometry = true;
                        q.outFields = ["*"];
                        q.outSpatialReference = map.spatialReference;
                        var qt = new QueryTask(evt.target.parentNode.parentNode.attributes["uri"].value);

                        var res = qt.execute(q, function(featureSet){
                            map.PanTo(featureSet.features[0]);
                        }
                    );
                    },

Thanks for your help,
Douglas

[RobertScheitlin__GISP]

Douglas,

   There is nothing in that code that should cause a popup to open. So do you have other code that would cause the popup to open that you are not showing here?

[DouglasLecker]

Hello Robert,

   I have disabled the popup from showing up by taking out the 'jimu/dijit/PopupMenu' out of my definition. My panTo function is still not triggering from my custom widget with my on click event.  Am I missing something in the variables? Is there some documentation out there that explains how to incorporate the panTo function?

Thanks for your help,

    Douglas

[RobertScheitlin__GISP]

Douglas,

   I would be a lot easier to help if you provided your widget code for review. Right now I have no idea what you are actually trying to add this button to?

[DouglasLecker]

Sure. Here is the code I am working on to populate my FoldablePanel.

function populateTreeView(features, tvNode, mm, dd7t)
{
    require(['dojo/dom-construct',"dojo/Deferred", "dijit/registry","dijit/Dialog",'dojo/query',
            'esri/symbols/SimpleFillSymbol', "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleMarkerSymbol","esri/renderers/SimpleRenderer",
            "esri/graphic", "esri/Color", "esri/tasks/query","esri/tasks/QueryTask", "esri/layers/GraphicsLayer", "jimu/MapManager", "jimu/WidgetManager"],
            function( dj,Deferred, registry, Dialog, query,SimpleFillSymbol, SimpleLineSymbol,SimpleMarkerSymbol, SimpleRenderer,
            Graphic, Color, Query, QueryTask, GraphicsLayer, MapManager, WidgetManager)
    {

         var map =mm.layerInfosObj.map;
        var featureClassColl = [];
        var feature, fc, field;
        var atts;
        var name, value;
        var tvDiv = document.createElement("div");
        var layerDiv;
        var featureUl, fieldLi, fcUl,fcLi, featureLi, fieldUl;
        var featureLabel, fieldLabel, fcLabel;
        var fcCb, featureCb;
        var def = new Deferred();
        var fieldLabel, fieldValue;
        var visibleFields ;

        for(var f in features)
        {
            feature = features;
            var con = feature.getContent();
            var idx = featureClassColl[feature._layer.name];

            if(!idx)
            {
                featureClassColl[feature._layer.name] = [];
            }
            featureClassColl[feature._layer.name].push(feature);
            // alert(feature.attributes["OBJECTID"]);
        }

        if(document.getElementById("tv"))
        {tvNode.innerHTML = "" ;}

        layerDiv = dj.create("div", {class:"idtvDiv", id:"tv"}, tvNode);
        var featureUl;
        var featureTitle ;
        var oid ;

        // FOREACH FEATURECLASS THAT HAS BEEN CLICKED
        for(var key in featureClassColl)
        {
            fc = featureClassColl[key];
            // CREATE THE LIST FOR THE FEATURE CLASS AND USE A LABEL TO NOTATE
            fcUl = dj.create("ul", {className: ""}, layerDiv);
            fcLi = dj.create("li","", fcUl);
            fcCb = dj.create("input", {class:"idtvFc",
                                       type:"checkbox",
                                          id:key},
                                       fcLi);
            fcLabel = dj.create("label", {innerHTML:key,
                                          for:key}, fcLi);
            // FOREACH FEATURE THAT WAS SELECTED IN THIS FEATURE CLASS
            for(var i in fc)
            {
                feature = fc;

                amalgTitle = createFeatureTitleForTV(feature);

                oid = feature.attributes["OBJECTID"];

                featureUl = dj.create("ul", {}, fcLi);
                featureLi = dj.create("li",{onclick:function(evt)
                                              {

                                              }},featureUl);
                featureCb = dj.create("input", {class:"idtvFeature",
                                               type:"checkbox",
                                               id:key+oid, checked:true},
                                               featureLi);
                featureLabel = dj.create("label", {innerHTML:  amalgTitle,
                                                   for:key+oid}, featureLi );

                // PAN AND ZOOM TO THE FEATURE THAT IS S,ELECTED IN THE TREEVIEW

                    var panButton = dj.create("input", {text:"", value:"", panButton:"",

                    onclick:function(evt){
                        var q = new Query();
                        q.where = "OBJECTID=" + evt.target.parentNode.parentNode.attributes["oid"].value;
                        q.returnGeometry = true;
                        q.outFields = ["*"];
                        q.outSpatialReference = map.spatialReference;
                        var qt = new QueryTask(evt.target.parentNode.parentNode.attributes["uri"].value);

                        var res = qt.execute(q, function(featureSet){
                            map.panTo(featureSet.features[0].panTo());
                        }
                    );
                    },

                    type:"submit"}, featureLi);

                var zoomButton = dj.create("input", {text:"", value:"", zoomButton:"",

                    onclick:function(evt){
                        var q = new Query();
                        q.where = "OBJECTID=" + evt.target.parentNode.parentNode.attributes["oid"].value;
                        q.returnGeometry = true;
                        q.outFields = ["*"];
                        q.outSpatialReference = map.spatialReference;
                        var qt = new QueryTask(evt.target.parentNode.parentNode.attributes["uri"].value);

                        var res = qt.execute(q, function(featureSet){

                            map.setExtent(featureSet.features[0].geometry.getExtent(),true);});
                        },

                    type:"submit"}, featureLi);

[RobertScheitlin__GISP]

Douglas,

   Have you tried adding a console.info(evt.target.parentNode.parentNode.attributes["oid"].value) in the onclick function to see if you are getting there?

[DouglasLecker]

the console error says that map.PanTo is not a function. I know I am missing something when I call the function. That is why I was wondering if there was any documentation on how to use the various functions in WAB.

[RobertScheitlin__GISP]

Douglas,

  the issue is most likely that the map object is null because of the different scope that the 

var res = qt.execute(q, function(featureSet){
    map.panTo(featureSet.features[0].panTo());
}‍‍‍
);‍‍‍‍

is in. That is why you would use lang.hitch to keep your function in the current scope so that it knows what map is:

var res = qt.execute(q, lang.hitch(this, function(featureSet){
    map.panTo(featureSet.features[0].panTo());
}‍‍‍));‍‍‍

[DouglasLecker]

Robert,

   That change caused the popup window to appear when I select a feature on the map. I had that happening before, and could not figure out how to make it bypass the call to make the popup window open. Does that make sense?

[RobertScheitlin__GISP]

Douglas,

   OK the map class does not have a panTo method so where is the panTo method coming from? I think what you are looking for is centerAt method

Map | API Reference | ArcGIS API for JavaScript 3.18 | centerAt 

So you will need to get the features center (if it is not a Point feature geometry) and then use that point in the map.centerAt(yourFeaturesPoint);