topic Re: Clearing Graphics on Toggled Layer in ArcGIS JavaScript Maps SDK Questions

Clearing Graphics on Toggled Layer

TateM — Sat, 11 Dec 2021 09:16:58 GMT

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);
				//state
				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);
							});
						}
						
					});	
				}
				//County
				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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Clearing Graphics on Toggled Layer

RobertScheitlin__GISP — Sat, 11 Dec 2021 09:17:01 GMT

Tate,

You had a lot of duplication of effort in your code, that I cleaned up. Here is a working sample:

<!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",
        "dojo/_base/array",
        "esri/tasks/QueryTask",
        "esri/tasks/query",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "dojo/dom",
        "dojo/on",
        "dojo/domReady!"
      ],
      function (Map, ArcGISDynamicMapServiceLayer, array, Qt, Query, SimpleFillSymbol,
        SimpleLineSymbol, dom, on) {

        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 mySymbol = new SimpleFillSymbol("none",
          new SimpleLineSymbol("solid", new dojo.Color([255, 0, 0]), 2), new dojo.Color([0, 0, 0, 0.25])
        );
        on(dom.byId("layer0CheckBox"), "change", stateSel);
        on(dom.byId("layer1CheckBox"), "change", countySel);
        var mapClickEvent;

        //state
        function stateSel() {
          map.graphics.clear();
          layer.setVisibleLayers([3]);
          if(mapClickEvent){
            mapClickEvent.remove();
          }
          mapClickEvent = map.on('click', executeClickQuery);
        }

        //County
        function countySel() {
          map.graphics.clear();
          layer.setVisibleLayers([2]);
          if(mapClickEvent){
            mapClickEvent.remove();
          }
          mapClickEvent = map.on('click', executeClickQuery);
        }

        function executeClickQuery(evt) {
          var query = new Query();
          query.returnGeometry = true;
          query.geometry = evt.mapPoint;
          var queryTask;
          if(layer0CheckBox.checked){
            queryTask = new Qt("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3");
          }else{
            queryTask = new Qt("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2");
          }
          queryTask.execute(query, function(featureSet){
            map.graphics.clear();
            array.map(featureSet.features, function(feature){
              if (layer0CheckBox.checked) {
                document.getElementById("infoName").innerHTML = "Name:  " + feature.attributes.STATE_NAME;
              } else {
                document.getElementById("infoName").innerHTML = "Name:  " + feature.attributes.NAME;
              }
              feature.setSymbol(mySymbol);
              map.graphics.add(feature);
            });
          });
        }
      });
  </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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Clearing Graphics on Toggled Layer

TateM — Sat, 11 Dec 2021 09:17:04 GMT

Hello Robert, Thanks for the help, and it works fine.

But I'm also looking at implementing a click event on the active layer to pull the attribute (i.e. state name or county name) and pass that out to a global variable. So then I can use that global variable in other application.

I tried to do something like this in the code below and still not getting the expected result.

        function executeClickQuery(evt) {
			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:["*"]
			});
          var query = new Query();
          query.returnGeometry = true;
          query.geometry = evt.mapPoint;
          var queryTask;
          if(layer0CheckBox.checked)
		  {
            queryTask = new Qt("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/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;
			})
          }else
		  {
            queryTask = new Qt("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2");
			map.graphics.clear();
			map.removeLayer(stateLayer);
			map.addLayer(countyLayer);
			on(countyLayer, 'click', function(e){
				document.getElementById("infoName").innerHTML = "Name:  "+ e.graphic.attributes.NAME;
			})
          }
          queryTask.execute(query, function(featureSet){
            map.graphics.clear();
            array.map(featureSet.features, function(feature){
                var graphic = feature;
                graphic.setSymbol(mySymbol);
                map.graphics.add(graphic);
            });
          });
        }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Clearing Graphics on Toggled Layer

RobertScheitlin__GISP — Thu, 09 May 2019 12:44:09 GMT

Tate,

My code above have now been updated to handle that. Still no need to use FeatureLayers.

Re: Clearing Graphics on Toggled Layer

TateM — Fri, 10 May 2019 03:51:32 GMT

Thanks Robert.