topic Re: Which manage the map.graphics layer? in ArcGIS Web AppBuilder Questions

Which manage the map.graphics layer?

AlfonsoYañez_Morillo — Tue, 14 Nov 2017 17:14:07 GMT

Hi everybody,

I populated the map's graphics layer with several graphics. Then I navigate on the map and by clicking on each graphic I can highlight the graphic and popup its infotemplate associated. However, when I click where there is no graphic there is no change, the last graphic remains highlighted and the popup is not closed. I would like to change that behavior, so when you click in en empty space selections and popups are removed.

I wonder if this is the default behavior of the WAB's map or it was defined when I created and added the graphics. In case it is managed by the app, which library manages clicks and selections on the map outside any widget?

Thanks,

Alfonso

Re: Which manage the map.graphics layer?

RobertScheitlin__GISP — Tue, 14 Nov 2017 18:44:43 GMT

Alfonso,

Do you see any errors in your browsers web console when you click where a graphic is not present?

Re: Which manage the map.graphics layer?

AlfonsoYañez_Morillo — Tue, 14 Nov 2017 19:06:02 GMT

Hi Robert,

No, there is no error or change in the console neither when I click on a graphic or when I don’t.

Re: Which manage the map.graphics layer?

RobertScheitlin__GISP — Tue, 14 Nov 2017 19:22:09 GMT

Alfonso,

Strange I have not seen this behavior, but I never use the maps.graphics I always create a separate GraphicsLayer.

Re: Which manage the map.graphics layer?

AlfonsoYañez_Morillo — Tue, 14 Nov 2017 20:28:14 GMT

Robert,

I’ve stored the graphics in a different GraphicsLayer but it still shows the same behavior. I have this message now in the console:

Loading mixed (insecure) display content “http://js.arcgis.com/3.15/esri/dijit/images/popup.png” on a secure page[Learn More] init.js:185:304

GET http://js.arcgis.com/3.15/esri/dijit/images/popup.png

Thanks

Re: Which manage the map.graphics layer?

RobertScheitlin__GISP — Tue, 14 Nov 2017 20:35:02 GMT

Alfonso,

Well the mixed content should not be causing the issue. Can you post some code?

Re: Which manage the map.graphics layer?

AlfonsoYañez_Morillo — Tue, 14 Nov 2017 21:35:07 GMT

Robert,

This is the part of one of the widgets that add graphics selected to the map. In this case the widget ask for IDs that are stored in a list. Clicking on the search button triggers an event to run this code.

The widget queries to a Feature Service, so the no FeatureLayer was created and added to the map. The query returns geometry that is added to a GraphicsLayer (map’s or different).

The widget works fine. It perfectly retrieves the features and are shown in the map. Once the widget is close, and clicking on a feature, you can see the polygon highlighted and the popup with the info. You can click over different polygons and see how highlight and info change. However, in order to remove the popup and the selection I have to click on the clear link into the popup. I’d like to be able to remove highlights and popups by clicking on an empty area.

search: function(){

console.log('SearchById::search');

var IDs = this.getIDs();

this.queryParcels(IDs);

getIDs: function(){

console.log('SearchById::getIDs');

var IDs = [];

query("#list .id").forEach(function(item){

IDs.push(item.getAttribute("id"));

}).remove();

// filter IDs. remove repetitions

var uIDs = IDs.filter(function(item, pos) {

return IDs.indexOf(item) == pos;

});

return uIDs;

queryParcels: function(IDs){

console.log('SearchById::queryParcels');

// Make the Query and TaskQuery

var queryTask = new QueryTask(urlParcels);

var theQuery = new Query();

//Prepare the Query, if text needs to add quotations

if (this.type == 'nvarchar'){

var sequence = "";

array.forEach(IDs, function(id){

sequence += "'" + id + "', ";

});

sequence = sequence.slice(0, -2);

} else {

sequence = IDs.toString();

}

theQuery.where = "ID IN " + "(" + sequence + ")";

theQuery.returnGeometry = true;

theQuery.outFields = ["ID", "FIELD_A", "FIELD_B", "FIELD_C"];

// Execute the TaskQuery

queryTask.execute(theQuery, lang.hitch(this, "showParcels"));

showParcels: function(parcels){

console.log('SearchById::showParcels');

var graphicsLayer = new GraphicsLayer({id: “parcels”});

array.forEach(parcels.features, lang.hitch(this, function(graphic) {

var infoTemplate = new InfoTemplate("${ID}", "field A: ${FIELD_A}<br />field B: ${FIELD_B}<br />field C: ${FIELD_C}");

graphic.setSymbol(this.symbol);

graphic.setInfoTemplate(infoTemplate);

graphicsLayer.add(graphic);

//this.map.graphics.add(graphic);

}));

var newExtent = graphicsUtils.graphicsExtent(graphicsLayer.graphics);

this.map.setExtent(newExtent, true);

this.map.addLayer(graphicsLayer);

PanelManager.getInstance().closePanel(this.id + '_panel');

}

Thanks

Re: Which manage the map.graphics layer?

RobertScheitlin__GISP — Tue, 14 Nov 2017 22:23:46 GMT

Alfonso,

I don't see anything in the code you provided that would cause the issue you are seeing.