Community

Clearing Graphics on Toggled Layer

635
4
Jump to solution
05-06-2019 10:10 PM
TateM
by
New Contributor III
‎05-06-2019 10:10 PM

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎05-07-2019 06:18 AM

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

4 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎05-07-2019 06:18 AM

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
TateM
by
New Contributor III
‎05-08-2019 09:42 PM

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);
            });
          });
        }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎05-09-2019 05:44 AM

Tate, 

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

0 Kudos
TateM
by
New Contributor III
‎05-09-2019 08:51 PM

Thanks Robert.

0 Kudos