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