Which manage the map.graphics layer?

1124
7
11-14-2017 09:14 AM
AlfonsoYañez_Morillo
New Contributor III

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

Tags (1)
0 Kudos
7 Replies
RobertScheitlin__GISP
MVP Emeritus

Alfonso,

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

0 Kudos
AlfonsoYañez_Morillo
New Contributor III

Hi Robert,

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Alfonso,

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

0 Kudos
AlfonsoYañez_Morillo
New Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Alfonso,

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

0 Kudos
AlfonsoYañez_Morillo
New Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Alfonso,

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

0 Kudos