Popup Panel Widget Customization

[NatashaManzuiga]

Hi all,

I'm trying to set a different behavior of the Popup Panel Widget on map click for each layer.

For a particular layer, I need to retrieve data from a webservice passing a field value as parameter.

Is it right what I'm trying to do or you think I have to move this code somewhere else?
at the moment the line 10 gave me an error:
TypeError: this.own is not a function

startup: function () {
    this.inherited(arguments);        
    var map = this.map;          
    LayerInfos.getInstance(map, map.itemInfo).then(lang.hitch(function(operLayerInfos) {  
    operLayerInfos.getLayerInfoArray().forEach(function(layerInfo) {  
            if (layerInfo.title == 'Map') {  
                var layerId = layerInfo.id;  
                console.log('layer ID = ', layerId);
                var layer = map.getLayer(layerId);
                this.own(on(layer, "click", lang.hitch(this, this.onMapClick)));                
                }
            }    
            );  
        }    
        ));  
    this.displayPopupContent(this.popup.getSelectedFeature());
},

onMapClick: function(event) { 
//I want to disable the normal behavior of the click (retrieve data and populate the Popup Panel widget with my customized content)
  var queryTask = new QueryTask('*Service URL*'); 
  var query = new Query(); 
  query.returnGeometry = true; 
  query.outFields = ['*'];  
  query.geometry = event.mapPoint; 
  queryTask.execute(query, lang.hitch(this, this.showResults)); 

  }, 
showResults: function(results) { 
  var resultItems = []; 
  var resultCount = results.features.length; 
  for (var i = 0; i < resultCount; i++) { 
      var featureAttributes = results.features.attributes; 
      var URL = "theWebServiceUrl" + featureAttributes.NAME; 
    //and I want to pass this URL to call it with through esri/request and retrieve data and then populate the PopUp Panel
      } 
  }

Thanks,

Naty

[RobertScheitlin__GISP]

Naty,

  That is because line 10 is inside a function that is not scoped:

See line 6 and 13

startup: function () {
    this.inherited(arguments);
     //I don't understand why people add a local var for map when they have access to the map using this.map...
    //var map = this.map; 
    LayerInfos.getInstance(this.map, this.map.itemInfo).then(lang.hitch(function(operLayerInfos) {
    operLayerInfos.getLayerInfoArray().forEach(lang.hitch(this, function(layerInfo) {
            if (layerInfo.title == 'Map') {
                var layerId = layerInfo.id;
                console.log('layer ID = ', layerId);
                var layer = map.getLayer(layerId);
                this.own(on(layer, "click", lang.hitch(this, this.onMapClick)));
                }
            }));    
        }
        ));
    this.displayPopupContent(this.popup.getSelectedFeature());
},

[NatashaManzuiga]

Robert, I made changes and I removed local var "map"

  
startup: function () {
    
this.inherited(arguments);    
   
 var layer;
   
 LayerInfos.getInstance(this.map, this.map.itemInfo).then(lang.hitch(function(operLayerInfos) {  
   
 operLayerInfos.getLayerInfoArray().forEach(lang.hitch(this, function(layerInfo) {  
        
if (layerInfo.title == 'Map') {  
            
var layerId = layerInfo.id;  
            
console.log('layer ID = ', layerId);  
            
layer = this.map.getLayer(layerId);  
           
 
            
}  
        
})); 
 
    
}  
   
 
    
));  
   
 this.own(on(layer, "click", lang.hitch(this, this.onMapClick)));  
   
 this.displayPopupContent(this.popup.getSelectedFeature());  
      },

It runs without error but onMapClick doesnt run when I click on the map..
I tried to log something:
console.log("onMapClick runs");

but nothing happened...

Naty

[RobertScheitlin__GISP]

Naty,

  Have you tried a console.info(layer); to be sure that you sound the layer?

[NatashaManzuiga]

Robert, I tried with this code:

     startup: function () {

        this.inherited(arguments);   

        var layer,layerId;

        LayerInfos.getInstance(this.map, this.map.itemInfo).then(lang.hitch(function(operLayerInfos) {

        operLayerInfos.getLayerInfoArray().forEach(lang.hitch(this, function(layerInfo) {

        if (layerInfo.title == 'Map') {

            layerId = layerInfo.id;

            console.log('layer ID = ', layerId); 

        }

        }));     

            } 

            )); 

        layer = this.map.getLayer(layerId); 

        console.info(layer);

        this.own(on(layer, "click", lang.hitch(this, this.onMapClick))); 

        this.displayPopupContent(this.popup.getSelectedFeature()); 

      },

console write all the info of the layer...but...nothing happens on onMapClick event...

Thanks,

Naty

[RobertScheitlin__GISP]

Naty,

  Well I should have asked if that layer is a sublayer of a dynamic map service or is it an actual featurelayer?

[NatashaManzuiga]

i has sublayers and i need to use this popup in one of them.

thanks,

Naty

[RobertScheitlin__GISP]

Naty,

  Then I was wrong you do need to switch back to the map on click instead of the layer as then is nothing to fire a click event for when using a dynamic map service.

[NatashaManzuiga]

Robert thanks for your patience with me..

So, what can I do? I can change my Services, too...

Thanks,

Naty

[RobertScheitlin__GISP]

Naty,

Re-evaluating what your goal is this is actually much simpler than you road we started down. Update this portion of the Widget.js:

this.own(on(this.popup, "selection-change", lang.hitch(this, function () {
          var gra = this.popup.getSelectedFeature();
          var layer = gra.getLayer();
          console.info(layer.name);
          if(layer.name === "map"){
            var URL = "theWebServiceUrl" + gra.attributes.NAME;
            //this will prevent it from going to the function that displays the popup info
            return;
          }
          this.displayPopupContent(this.popup.getSelectedFeature());
        })));