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
Solved! Go to Solution.
Naty,
The search Widget adds the search result to the maps graphics layer and thus does not have a layer property.
Here is what I think you should do:
this.own(on(this.popup, "selection-change", lang.hitch(this, function () { var gra = this.popup.getSelectedFeature(); if(gra){ console.info(gra); var layer = gra.getLayer(); if(layer && layer.name === "map"){ console.info(layer.name); var URL = "theWebServiceUrl" + gra.attributes.NAME; console.info(URL); //this will prevent it from going to the function that displays the popup info return; }else if(gra.attributes.hasOwnProperty("yourspecificfieldname")){ var URL2 = "theWebServiceUrl" + gra.attributes.NAME; console.info(URL2); //this will prevent it from going to the function that displays the popup info return; } } this.displayPopupContent(this.popup.getSelectedFeature()); })));
On line 12 you will have to determine if this is a search result graphic and if so is it one you are interested in. The problem is you are using such a common field name "NAME" so many graphics beside your specific layer use that field name.
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()); },
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
Naty,
Have you tried a console.info(layer); to be sure that you sound the layer?
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
Naty,
Well I should have asked if that layer is a sublayer of a dynamic map service or is it an actual featurelayer?
i has sublayers and i need to use this popup in one of them.
thanks,
Naty
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.
Robert thanks for your patience with me..
So, what can I do? I can change my Services, too...
Thanks,
Naty
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()); })));