map.graphics.add not working in FeatureLayer's click event but work in mouse-over event

3191
6
05-08-2016 09:44 PM
LinhNguyen2
New Contributor

I tried to add  a graphic with new symbol

such as

var symbol  = new SimpleFillSymbol(....

var g = new Graphic(evt.graphic.geometry, symbol  );

map.graphics.add(g);

it works in feature's mouse-over  (hover) but not click event?..

i.e.. work in layer.on('mouse-over', function (evt) { ...

but not in layer.on('click', function (evt) { ...

Am I missing something?

Thanks

0 Kudos
6 Replies
PanagiotisPapadopoulos
Esri Regular Contributor

Try to create a graphic layer and push the graphics on it.

then add the click event on the graphic layer

  var layer = app.map.getLayer("Geodesic");

      layer.on('click', function (evt) {

      alert("asdasd");

       

      });

see an example here Edit fiddle - JSFiddle

on line 98 to 102 you will find the click event.

this sample creates buffers around a line (click on the map to be created) and after that the red line (Geodesic graphic layer) has the click event. When you click on the red line the alert box arise.

Capture.PNG

LinhNguyen2
New Contributor

the click did fired, it just didn't draw any graphic on it..

I tried the example too.. same thing.. it works in layer's mouse-over, but not layer's click

0 Kudos
LinhNguyen2
New Contributor

I think I have figured out..

the map's click event work, but the featurelayer's click event won't work.

both of them fire, however only the map version draws the graphic.

Could be bug?

0 Kudos
JohnFell
Occasional Contributor III

I am having a similar problem, however; my click event fires but the graphic is not added to the map. Does anyone know what I might be doing wrong?

See line 121 below:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Select with feature layer</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding: 0;
        margin: 0;
        height: 100%;
      }
      #messages{
        background-color: #fff;
        box-shadow: 0 0 5px #888;
        font-size: 1.1em;
        max-width: 15em;
        padding: 0.5em;
        position: absolute;
        right: 20px;
        top: 20px;
        z-index: 40;
      }
    </style>
    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
      var map;
      require([
        "esri/map", "esri/layers/FeatureLayer",
        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/tasks/QueryTask",
        "esri/tasks/query",
        "esri/graphic", "esri/InfoTemplate",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
        "esri/config", "esri/Color", "dojo/dom", "dojo/domReady!"
      ], function(
        Map, FeatureLayer,
        ArcGISTiledMapServiceLayer,
        QueryTask,
        Query,
        Graphic, InfoTemplate,
        SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
        esriConfig, Color, dom
      ) {

        map = new Map("mapDiv", { 
          center: [-96.8, 32.781],
          basemap: "streets",
          zoom: 14,
          slider: true
        });

        //add the tax parcel feature layer
        var taxParcels = new FeatureLayer("https://maps.dcad.org/prdwa/rest/services/Property/ParcelQuery/MapServer/4",{
          mode: FeatureLayer.MODE_SELECTION,
          infoTemplate: new InfoTemplate("Parcel ID: ${PARCELID}", "${*}"),
          outFields: ["PARCELID","LOWPARCELID","SITEADDRESS", "OWNERNME1", "MAPGRID"]
        });
        
        //add feature layer for blocks
         var blocks = new FeatureLayer("https://maps.dcad.org/prdwa/rest/services/Property/ParcelQuery/MapServer/0", {
          mode: FeatureLayer.MODE_ONDEMAND
        });
        
        // define block selection symbol
        var selectedBlockSymbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([255,255,255,0.35]),
            1
          ),
          new Color([125,125,125,0.35])
        );

        // add block layer
        map.addLayer(blocks);


        //make unselected features invisible
        var nullSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL);
        taxParcels.setRenderer(new SimpleRenderer(nullSymbol));
                                            
        // add tax parcels layer
        map.addLayer(taxParcels);
        
        
        //when the map is clicked select the block
        blocks.on("click", function(evt){
          console.log("Click event fired!");
          var query = new Query();
          var selectedBlock;
          query.geometry = evt.mapPoint;
          query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
          query.outSpatialReference = map.spatialReference; 

          //execute query 
          var queryTask = new QueryTask(blocks.url);
          queryTask.execute(query,showResults);
        });


        function showResults(featureSet) {
          //remove all graphics on the maps graphics layer
          map.graphics.clear();
          
          //Performance enhancer - assign featureSet array to a single variable.
          var resultFeatures = featureSet.features;
          
          //Loop through each feature returned 
          console.log("There is " + resultFeatures.length.toString() + " block(s) here.");
          for (var i=0, il=resultFeatures.length; i<il; i++) {
            //Get the current feature from the featureSet.
            //Feature is a graphic
            var graphic = new Graphic(resultFeatures[i].geometry,selectedBlockSymbol);

            //Add graphic to the map graphics layer.
            map.graphics.add(graphic);
           }
        }
      });
    </script>
  </head>

  <body>
    <span id="messages">Click on the map to select tax parcels within a block.</span>
    <div id="mapDiv"></div>
  </body>
</html>
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

John,

   You forgot to set the:

query.returnGeometry = true;

JohnFell
Occasional Contributor III

Thanks Robert! That worked!

0 Kudos