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>
