Feature Layers added with Selection mode at runtime doesn’t work if map is created using “arcgisutils.createmap”

AshishChoure — Sat, 11 Dec 2021 12:46:19 GMT

When a map is created with arcgisutils “createmap” function and when we add a feature layer dynamically with SELECTION MODE, the features returned by “selectFeatures” method disappears as we click anywhere in map.

Steps:

1) Create map using arcgisutils.createmap function
2) Add layer in SELECTION mode once map is created
3) Now using drawtool select area on map
4) You will see the selected features on map now.
5) Now click anywhere on map and you will notice that the features disappeared from the map.

The same scenario works when map is created with ARCGIS esri/map class.

Edit fiddle - JSFiddle

<!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>Create web map from id</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
    <style>
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }


        body {
            background-color: #FFF;
            overflow: hidden;
            font-family: "Helvetica";
        }


        #header {
            border: solid 1px #A8A8A8;
            overflow: hidden;
            background-color: #999;
            background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#C0C0C0));
            background: -moz-linear-gradient(top, #fff, #C0C0C0);
            height: 65px;
            margin: 5px 5px;
        }


        .roundedCorners {
            -o-border-radius: 4px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
        }


        .shadow {
            -webkit-box-shadow: 4px 4px 8px #adadad;
            -moz-box-shadow: 4px 4px 8px #adadad;
            -o-box-shadow: 4px 4px 8px #adadad;
            box-shadow: 4px 4px 8px #adadad;
        }


        #title {
            padding-top: 2px;
            padding-left: 10px;
            color: #000;
            font-size: 18pt;
            text-align: left;
            text-shadow: 0px 1px 0px #e5e5ee;
            font-weight: 700;
        }


        #subtitle {
            font-size: small;
            padding-left: 40px;
            text-shadow: 0px 1px 0px #e5e5ee;
            color: #000;
        }


        #rightPane {
            background-color: #E8E8E8;
            border: solid 2px #B8B8B8;
            margin: 5px;
            width: 20%;
        }


        #map {
            background-color: #FFF;
            border: solid 2px #B8B8B8;
            margin: 5px;
            padding: 0;
        }


        .esriLegendServiceLabel {
            display: none;
        }
    </style>


    <script src="http://js.arcgis.com/3.14/"></script>
    <script>
        require([
          "dojo/parser",
          "dojo/ready",
          "dijit/layout/BorderContainer",
          "dijit/layout/ContentPane",
          "esri/tasks/query",
          "esri/toolbars/draw",
          "dojo/on",
          "dojo/dom",
          "esri/map",
          "esri/urlUtils",
          "esri/arcgis/utils",
          "esri/dijit/Legend",
          "esri/dijit/Scalebar",
           "esri/layers/FeatureLayer",
          "dojo/domReady!"
        ], function (
          parser,
          ready,
          BorderContainer,
          ContentPane,
          Query,
          Draw,
          on,
          dom,
          Map,
          urlUtils,
          arcgisUtils,
          Legend,
          Scalebar,
          FeatureLayer
        ) {
            ready(function () {
                parser.parse();
                //if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL
                arcgisUtils.createMap("ec94c4940d79495bb700b520823e50b6", "map").then(function (response) {
                    //update the app
                    dom.byId("title").innerHTML = "Layer With Selection Mode";
                    dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;
                    var map = response.map, selectionToolbar, featureLayer;
                    map._layers.Citizen_Requests_Form_Item_7070.hide();
                    featureLayer = new FeatureLayer("http://services1.arcgis.com/DlnuvLGpDczjeSgG/arcgis/rest/services/Citizen_Requests_Form_Item/FeatureServer/0",
                             {
                                 mode: FeatureLayer.MODE_SELECTION,
                                 outFields: ["*"]
                             });
                    map.addLayer(featureLayer);


                    //add the scalebar
                    var scalebar = new Scalebar({
                        map: map,
                        scalebarUnit: "english"
                    });


                    //add the legend. Note that we use the utility method getLegendLayers to get
                    //the layers to display in the legend from the createMap response.
                    var legendLayers = arcgisUtils.getLegendLayers(response);
                    var legendDijit = new Legend({
                        map: map,
                        layerInfos: legendLayers
                    }, "legend");
                    legendDijit.startup();


                    on(dom.byId("selectFieldsButton"), "click", function () {
                        initSelectToolbar();
                        selectionToolbar.activate(Draw.EXTENT);
                    });


                    on(dom.byId("clearSelectionButton"), "click", function () {
                        featureLayer.clearSelection();
                    });


                    function initSelectToolbar() {
                        selectionToolbar = new Draw(map);
                        var selectQuery = new Query();


                        on(selectionToolbar, "DrawEnd", function (geometry) {
                            selectionToolbar.deactivate();
                            selectQuery.geometry = geometry;
                            featureLayer.selectFeatures(selectQuery,
                              FeatureLayer.SELECTION_NEW);
                        });
                    }
                });
            });
        });
    </script>
</head>


<body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
        <div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
            <div id="title"></div>
            <div id="subtitle"></div>
        </div>
        <div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
            <button id="selectFieldsButton" data-dojo-type="dijit/form/Button">Select Features</button>
            <button id="clearSelectionButton" data-dojo-type="dijit/form/Button">Clear Selection</button><br>


        </div>
        <div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
            <div id="legend"></div>
        </div>
    </div>
</body>
</html>

Re: Feature Layers added with Selection mode at runtime doesn’t work if map is created using “arcgisutils.createmap”

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:46:22 GMT

Ashish,

The issue is that when you click on the map it is attempting to find and show a popup for the layers in your webmap and thus clearing the selection.

You can see that the featureLayer is receiving a selection-clear event by adding this on event:

          featureLayer.on('selection-clear', function(evt){
            console.info(evt);
          });

You can change this by adding the ignorePopups option to the createMap function:

arcgisUtils.createMap("ec94c4940d79495bb700b520823e50b6", "map", {ignorePopups: true}).then(function (response) {

Re: Feature Layers added with Selection mode at runtime doesn’t work if map is created using “arcgisutils.createmap”

AshishChoure — Wed, 22 Jul 2015 15:26:17 GMT

Thanks Robert.

I am using getContent() and getTitle() methods of feature, if i set ignorePopus to true then both methods will not work as they depend on infoTemplate.

Can i change the value of ignorePopups after web map and layer is loaded? So once a layer is loaded with ignorePopups : false my layer will have infoTemplate set and then i will change ignorePopups to true. But i am not able to find the ignorePopups property in map json(i want to change it dynamically).

Can you help me on this?

Re: Feature Layers added with Selection mode at runtime doesn’t work if map is created using “arcgisutils.createmap”

RobertScheitlin__GISP — Thu, 23 Jul 2015 02:04:11 GMT

Ashish,

I am afraid not. As the ignore popups is a property of the createMap function.

Re: Feature Layers added with Selection mode at runtime doesn’t work if map is created using “arcgisutils.createmap”

KellyHutchins — Tue, 28 Jul 2015 16:43:00 GMT

Ashish Choure you can enable/disable popups using the map's setInfoWindowOnClick method. So in your test app I think it should work if you disable popups when the select fields button is pressed then you could re-enable popups when drawing is finished (draw end).

topic Re: Feature Layers added with Selection mode at runtime doesn’t work if map is created using “arcgisutils.createmap” in ArcGIS JavaScript Maps SDK Questions

Feature Layers added with Selection mode at runtime doesn’t work if map is created using “arcgisutils.createmap”

Re: Feature Layers added with Selection mode at runtime doesn’t work if map is created using “arcgisutils.createmap”

Re: Feature Layers added with Selection mode at runtime doesn’t work if map is created using “arcgisutils.createmap”

Re: Feature Layers added with Selection mode at runtime doesn’t work if map is created using “arcgisutils.createmap”

Re: Feature Layers added with Selection mode at runtime doesn’t work if map is created using “arcgisutils.createmap”