Hello everyone,
I seems to be running into some bugs, that I cannot seems to get it resolved. Whenever I switch over to a new layer using the radio button. Then click on the feature of that layer, I expect it to only show the graphic of the new feature that was just switched over. But the feature from the old layer still persist/show, seems like it is not clearing out properly. i.e. from county feature layer to state feature layer, expect the result to show only state graphic when clicked but instead county layer feature is showing, and vice versa with state to county. Any help or suggestion would be appreciated on the below code. TIA!
<!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>Toggle Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.28/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
<script src="https://js.arcgis.com/3.28/"></script>
<script>
var map, layer;
require([
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ImageParameters",
"esri/layers/FeatureLayer",
"esri/tasks/QueryTask",
"esri/tasks/query",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"dojo/dom",
"dojo/on",
"dojo/query",
"dojo/domReady!"
],
function (Map, ArcGISDynamicMapServiceLayer, ImageParameters,FeatureLayer, Qt, Query, SimpleFillSymbol, SimpleLineSymbol, dom, on, query)
{
layer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",{
});
map = new Map("mapDiv", {
basemap: "topo",
center: [-86.718, 36.545],
zoom: 6
});
layer.setVisibleLayers([]);
map.addLayer(layer);
var stateLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3", {
outFields:["*"]
});
var countyLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2", {
outFields:["*"]
});
on(dom.byId("layer0CheckBox"), "change", layer1);
on(dom.byId("layer1CheckBox"), "change", layer2);
function layer1()
{
layer.setVisibleLayers([3]);
map.graphics.clear();
map.removeLayer(countyLayer);
map.addLayer(stateLayer);
on(stateLayer, 'click', function(e)
{
document.getElementById("infoName").innerHTML = "Name: "+ e.graphic.attributes.STATE_NAME;
map.on('click',executeClickQuery);
var queryTask1 = new Qt("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3");
var mySymbol = new SimpleFillSymbol("none",
new SimpleLineSymbol("solid", new dojo.Color([255,0,0]), 2), new dojo.Color([0,0,0,0.25])
);
var query = new Query();
query.returnGeometry = true;
function executeClickQuery(evt)
{
query.geometry = evt.mapPoint;
queryTask1.execute(query, showResults);
}
function showResults(featureSet)
{
map.graphics.clear();
dojo.forEach(featureSet.features, function(feature){
var graphic = feature;
graphic.setSymbol(mySymbol);
map.graphics.add(graphic);
});
}
});
}
function layer2()
{
layer.setVisibleLayers([2]);
map.removeLayer(stateLayer);
map.graphics.clear();
map.addLayer(countyLayer);
on(countyLayer, 'click', function(e)
{
document.getElementById("infoName").innerHTML = "Name: "+ e.graphic.attributes.NAME;
map.on('click',executeClickQuery);
var queryTask1 = new Qt("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2");
var mySymbol = new SimpleFillSymbol("none",
new SimpleLineSymbol("solid", new dojo.Color([255,0,0]), 2), new dojo.Color([0,0,0,0.25])
);
var query = new Query();
query.returnGeometry = true;
function executeClickQuery(evt)
{
query.geometry = evt.mapPoint;
queryTask1.execute(query, showResults);
}
function showResults(featureSet)
{
map.graphics.clear();
dojo.forEach(featureSet.features, function(feature){
var graphic = feature;
graphic.setSymbol(mySymbol);
map.graphics.add(graphic);
});
}
});
}
});
</script>
</head>
<body>
<span id="layer_list">
<input type='radio' class='list_item' id='layer0CheckBox' value=0 name = "option1" />State
<input type='radio' class='list_item' id='layer1CheckBox' value=1 name = "option1" />County
</span>
<br/>
<br />
<div id="mapDiv" class="claro" style="width:1000px; height:600px; border:1px solid #000;"></div>
<span id="infoName" style ="font-weight: bold">Name: </span>
</body>
</html>