topic Re: Add PanTo functionality to my custom widget in Web AppBuilder Custom Widgets Questions

Add PanTo functionality to my custom widget

DouglasLecker — Tue, 11 Oct 2016 18:59:46 GMT

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

Re: Add PanTo functionality to my custom widget

RobertScheitlin__GISP — Tue, 11 Oct 2016 19:53:59 GMT

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?

Re: Add PanTo functionality to my custom widget

DouglasLecker — Wed, 12 Oct 2016 13:13:10 GMT

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

Re: Add PanTo functionality to my custom widget

RobertScheitlin__GISP — Wed, 12 Oct 2016 13:26:09 GMT

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?

Re: Add PanTo functionality to my custom widget

DouglasLecker — Wed, 12 Oct 2016 13:58:16 GMT

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);

Re: Add PanTo functionality to my custom widget

RobertScheitlin__GISP — Wed, 12 Oct 2016 14:07:53 GMT

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?

Re: Add PanTo functionality to my custom widget

DouglasLecker — Wed, 12 Oct 2016 14:54:45 GMT

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.

Re: Add PanTo functionality to my custom widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:25:10 GMT

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());
}‍‍‍));‍‍‍

Re: Add PanTo functionality to my custom widget

DouglasLecker — Wed, 12 Oct 2016 15:13:54 GMT

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?

Re: Add PanTo functionality to my custom widget

RobertScheitlin__GISP — Wed, 12 Oct 2016 15:24:09 GMT

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);