AnsweredAssumed Answered

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

Question asked by ashish_choure231989 on Jul 21, 2015
Latest reply on Jul 28, 2015 by khutchins-esristaff

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. 1) Create map using arcgisutils.createmap function
  2. 2) Add layer in SELECTION mode once map is created
  3. 3) Now using drawtool select area on map
  4. 4) You will see the selected features on map now.
  5. 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>

Outcomes