Identify, Select, Highlight

[jaykapalczynski]

I am trying to get the attached to work. 

1. Open the app
2. Click on the icon in the top header
3. click on a bird in the map
4. the selected attributes are shown to the right.

1. Now zoom out a bit to where the birds are overlapping.
2. Click the birds image again where they are overlapping.
3. Notice now on the right that there are Next and Previous buttons to scroll through the results.

Everything works great to this point.  BUT I want the feature in the map to either Highlight or replaced with another image.

I cannot figure out how to do this.  I was in contact with ESRI and their tech could not answer this as well....

As the user scrolls through the multiple return results I want the feature to show up in the map that corresponds with the active result on the right

Code is attached in a single HTML file.....

I am trying to create a new Graphic with the below...but not working...

Can I create a graphic or Highlight the selected graphic????   If so how????

    function displayPopupContent(feature){

       if(feature){

           var content = feature.getContent();

           registry.byId("leftPane").set("content", content);

            var pt = feature.geometry;

            var sms = new SimpleMarkerSymbol().setStyle(

            SimpleMarkerSymbol.STYLE_SQUARE).setColor(

            new Color([255,0,0,0.5]));

            var graphic1 = new Graphic(pt, sms);

            app.map.graphics.add(graphic1);

       }

    }

[KenBuja]

I wasn't able to get your script working, but take a look at this post over in GIS StackExchange. In it, I have the code where I flash a polygon that is selected in a dGrid. The application also shows how I add highlight graphics for selected features.

[jaykapalczynski]

In my Identify function I am grabbing the result.feature and returning the information on this features including Geometry etc...

Then trying to create a graphic and NOTHING.

Very confused here......tried it two ways and cannot get a Graphic nor the feature in question to highlight?

function executeIdentifyTask (event) {

   // CALL initializeSidebar

   action1 = initializeSidebar(app.map);

          identifyTask = new IdentifyTask(DGIFDataurl);

          identifyParams = new IdentifyParameters();

          identifyParams.tolerance = 10;

          identifyParams.returnGeometry = true;

          identifyParams.layerIds = [0];

          //identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;

          identifyParams.width = app.map.width;

          identifyParams.height = app.map.height;

          identifyParams.geometry = event.mapPoint;

          identifyParams.mapExtent = app.map.extent;

          var deferred = identifyTask

            .execute(identifyParams)

            .addCallback(function (response) {

              // response is an array of identify result objects

              // Lets return an array of features.

              return arrayUtils.map(response, function (result) {

                var feature = result.feature;

                var layerName = result.layerName;

//-----------------------------------------------------------------------------------------------------------

     var resultFeatures = result.feature;

   alert(print_r(resultFeatures));  //call it like this

  for (var i = 0, il = resultFeatures.length; i < il; i++) {

          //Get the current feature from the featureSet.

          //Feature is a graphic

          var graphic = resultFeatures;

          // allow different symbols

          markerSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 28,

               new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,

               new dojo.Color([255, 255, 255]), 2),

               new dojo.Color([255, 0, 0, 0.85]));

          lineSymbol = new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID,

               new dojo.Color([0, 255, 255]), 10, esri.symbol.CartographicLineSymbol.CAP_ROUND,

               esri.symbol.CartographicLineSymbol.JOIN_MITER, 5);

          fillSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,

               new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,

               new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.85]));

          // figure out which symbol to use

          if (graphic.geometry.type === "point" || graphic.geometry.type === "multipoint") {

              symbol = markerSymbol;

          } else if (graphic.geometry.type === "line" || graphic.geometry.type === "polyline") {

              symbol = lineSymbol;

          } else {

              symbol = fillSymbol;

          }

          graphic.setSymbol(symbol);

          //Add graphic to the map graphics layer.

          app.map.graphics.add(graphic);

      }

//-----------------------------------------------------------------------------------------------------------

                feature.attributes.layerName = layerName;

                if (layerName === 'DGIF_GIS.DBO.Warblers') {

                  var BirdingTrailSites = new InfoTemplate("",

   "<table style='width:100%'><tr><td style='width:100%; text-align:center; font-size:14px'>${Species}</td></tr></table>" +

   "<table style='width:100%'><tr><td style='width:30%'><b>Species</b></td><td style='width:70%'>${Species}</td></tr></table>"

                    );

                  feature.setInfoTemplate(BirdingTrailSites);

                }

                return feature;

              });

            });

          app.map.infoWindow.setFeatures([deferred]);

   app.map.infoWindow.show(event.mapPoint);

}  // END OF executeIdentifyTask

[jaykapalczynski]

This html file should work....saw why it would not open for you....

Any other thoughts???

Click button in tool bar

zoom out and select a feature and hopefully selecting multiple features ( I want them to highlight as you scroll through the list in the side bar with the next and previous )

Note you have to have multiple features selected for the Next and Previous to appear

I am attempting to create a graphic at lines 404 and 516 , although a Highlight would is much more desired...

• I dont think I can create at line 404 because all the features are present at this poitn if multiple are selected...
• Thats why I was attempting at lines 516

Just dont know where to go next.... any thoughts would be appreciated.

[jaykapalczynski · Accepted solution]

YOU WILL have to zoom out to see the features to click...

CHEERS TO BRADLEY for his Help....very appreciated.

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples

      on iOS devices-->

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>Identify with Popup</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.10/js/esri/css/esri.css">

    <style>

    html,

    body {

        height: 100%;

        width: 100%;

        margin: 0;

        padding: 0;

        margin: 0;

        font-family: "Open Sans";

    }

    #leftPane {

        width: 20%;

        margin: 0;

        border: none;

    }

    #map {

        padding: 0;

    }

    .nav {

        padding: 5px 10px;

        background: #4479BA;

        color: #FFF;

        border-radius: 5px;

        border: solid 1px #20538D;

        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);

        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);

        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);

        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);

    }

    #header {

        text-align: left;

        height: 100px;

        border-bottom: solid 1px #ccc;

        margin: 10;

    }

    </style>

    <script src="https://js.arcgis.com/3.10/"></script>

    <script>

    var map;

    require([

        "esri/map",

        "esri/InfoTemplate",

        "esri/layers/ArcGISDynamicMapServiceLayer",

        "esri/symbols/SimpleFillSymbol",

        "esri/symbols/SimpleMarkerSymbol",

        "esri/tasks/IdentifyTask",

        "esri/tasks/IdentifyParameters",

        "esri/dijit/Popup",

        "dojo/_base/array",

        "esri/Color",

        "dojo/dom-construct",

        "dojo/on",

        "dojo/_base/connect",

        "dojo/dom",

        "dijit/registry",

        "dojo/parser",

        "esri/arcgis/utils",

        "esri/domUtils",

        "esri/InfoTemplate",

        "dojo/query",

        "esri/layers/ImageParameters",

        "dijit/layout/BorderContainer",

        "dijit/layout/ContentPane",

        "dojo/domReady!"

    ], function(

        Map,

        InfoTemplate,

        ArcGISDynamicMapServiceLayer,

        SimpleFillSymbol,

        SimpleMarkerSymbol,

        IdentifyTask,

        IdentifyParameters,

        Popup,

        arrayUtils,

        Color,

        domConstruct,

        on,

        connect,

        dom,

        registry,

        parser,

        arcgisUtils,

        domUtils,

        InfoTemplate,

        query,

        ImageParameters

    ) {

        parser.parse();

        //setup event handlers for the next/previous buttons

        on(dom.byId("previous"), "click", selectPrevious);

        on(dom.byId("next"), "click", selectNext);

        var identifyTask, identifyParams;

        var popup = new Popup({

            markerSymbol: new SimpleMarkerSymbol("circle", 32, null,

                new Color([0, 255, 0, 0.5])),

            marginLeft: "20",

            marginTop: "20"

        }, domConstruct.create("div"));

        map = new Map("map", {

            basemap: "satellite",

            center: [-83.275, 42.573],

            zoom: 18,

            infoWindow: popup

        });

        map.on("load", mapReady);

        var parcelsURL = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/SF311/MapServer/";

        dynLayer = new ArcGISDynamicMapServiceLayer(parcelsURL, {

            opacity: .55

        })

        map.addLayer(dynLayer);

        function mapReady() {

            map.on("click", executeIdentifyTask);

            //create identify tasks and setup parameters

            identifyTask = new IdentifyTask(parcelsURL);

            identifyParams = new IdentifyParameters();

            identifyParams.tolerance = 3;

            identifyParams.returnGeometry = true;

            identifyParams.layerIds = [0];

            identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;

            identifyParams.width = map.width;

            identifyParams.height = map.height;

        }

        function executeIdentifyTask(event) {

            identifyParams.geometry = event.mapPoint;

            identifyParams.mapExtent = map.extent;

            //SET THE TOLERANCE FOR THE MOUSE CLICK

            identifyParams.tolerance = 8;

            var deferred = identifyTask

                .execute(identifyParams)

                .addCallback(function(response) {

                    // response is an array of identify result objects

                    // Let's return an array of features.

                    return arrayUtils.map(response, function(result) {

                        var feature = result.feature;

                        var layerName = result.layerName;

                        feature.attributes.layerName = layerName;

                        if (layerName === 'Incidents') {

                            var taxParcelTemplate = new InfoTemplate("",

                                "${req_id} <br/> address: ${address}");

                            feature.setInfoTemplate(taxParcelTemplate);

                        } else if (layerName === 'Building Footprints') {

                            var buildingFootprintTemplate = new InfoTemplate("",

                                "Parcel ID: ${PARCELID}");

                            feature.setInfoTemplate(buildingFootprintTemplate);

                        }

                        return feature;

                    });

                });

            // InfoWindow expects an array of features from each deferred

            // object that you pass. If the response from the task execution

            // above is not an array of features, then you need to add a callback

            // like the one above to post-process the response and return an

            // array of features.

            map.infoWindow.setFeatures([deferred]);

            map.infoWindow.set("popupWindow", false);

            initializeSidebar(map);

        }

        function initializeSidebar(map) {

            var popup = map.infoWindow;

            //when the selection changes update the side panel to display the popup info for the

            //currently selected feature.

            connect.connect(popup, "onSelectionChange", function() {

                displayPopupContent(popup.getSelectedFeature());

            });

            //when the selection is cleared remove the popup content from the side panel.

            connect.connect(popup, "onClearFeatures", function() {

                //dom.byId replaces dojo.byId

                dom.byId("featureCount").innerHTML = "Click to select feature(s)";

                //registry.byId replaces dijit.byId

                registry.byId("leftPane").set("content", "");

                domUtils.hide(dom.byId("pager"));

            });

            //When features are associated with the  map's info window update the sidebar with the new content.

            connect.connect(popup, "onSetFeatures", function() {

                displayPopupContent(popup.getSelectedFeature());

                dom.byId("featureCount").innerHTML = popup.features.length + " feature(s) selected";

                //enable navigation if more than one feature is selected

                popup.features.length > 1 ? domUtils.show(dom.byId("pager")) : domUtils.hide(dom.byId("pager"));

            });

        }

        function displayPopupContent(feature) {

            if (feature) {

                console.log(feature);

                var content = feature.getContent();

                registry.byId("leftPane").set("content", content);

            }

        }

        function selectPrevious() {

            map.infoWindow.selectPrevious();

        }

        function selectNext() {

            map.infoWindow.selectNext();

        }

        //Use the ImageParameters to set the visibleLayerIds layers in the map service during ArcGISDynamicMapServiceLayer construction.

        var imageParameters = new ImageParameters();

        imageParameters.layerIds = [0, 1, 2];

        imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW;

        //can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE

        map.on("load", function() {

            document.getElementById("layer0CheckBox").checked = true;

        });

        on(dom.byId("layer0CheckBox"), "change", updateLayerVisibility);

        function updateLayerVisibility() {

            var inputs = query(".list_item");

            var inputCount = inputs.length;

            //in this application layer 2 is always on.

            visibleLayerIds = [];

            for (var i = 0; i < inputCount; i++) {

                if (inputs.checked) {

                    visibleLayerIds.push(inputs.value);

                }

            }

            if (visibleLayerIds.length === 0) {

                visibleLayerIds.push(-1);

            }

            dynLayer.setVisibleLayers(visibleLayerIds);

        }

    });

    </script>

</head>

<body>

    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">

        <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:false" region="left" style="width: 20%;height:100%;">

            <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>

            <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">

                <div id="checkBoxes">

                    Layer List :

                    <br />

                    <span id="layer_list">

                        <input type='checkbox' class='list_item' id='layer0CheckBox' value=0 />Incident

                        <br />

                    </span>

                    <br />

                    <br />

                </div>

                <br />

                <br />

                <br />

                <br />

                <br />

                <br />

                <br />

                <br />

                <div id="featureCount" style="margin-bottom:5px;">Click to select feature(s)

                </div>

                <div id="pager" style="display:none;">

                    <a href='javascript:void(0);' id="previous" class='nav' style="text-decoration: none;">

                    &lt; Prev

                </a>

                    <a href='javascript:void(0);' id="next" class='nav' style="text-decoration: none;">

                    Next &gt;

                </a>

                </div>

            </div>

        </div>

        <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>

    </div>

</body>

</html>