https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/setting-visible-property-to-false-not-hiding/m-p/1238767#M79593 <P>Hello,&nbsp;</P><P>I am currently using ESRI 4.24. In my map, I am attempting to display or hide certain features based upon a user selection. While attempting to do this, I have failed to successfully hide any graphics when setting the visible property equal to false. I will attach some code to give a better example of my problem (this is just an example, not my code with the user selection). As you can see, I have hard coded two graphics and added them to the array "features" and created the layer using "source: features". I have set the visible property to false in two locations, but the graphic2 object still displays on the map anyway. Here is the code:&nbsp;</P><P>require([<BR />"esri/Map",<BR />"esri/views/MapView",<BR />"esri/symbols/SimpleMarkerSymbol",<BR />"esri/symbols/PictureMarkerSymbol",<BR />"esri/Graphic",<BR />"esri/intl",<BR />"esri/layers/FeatureLayer",<BR />"esri/layers/support/FeatureFilter",<BR />"esri/geometry/Point",<BR />"esri/request"],<BR />function(Map,MapView,SimpleMarkerSymbol,PictureMarkerSymbol,Graphic,intl,FeatureLayer,FeatureFilter,Point,esriRequest) {<BR /><BR />document.getElementById("nomap").innerHTML = '';<BR /><BR /><BR />console.log(getCookie('maptype'));<BR />let currentCookie = getCookie('maptype');<BR />if (currentCookie === false){<BR />currentCookie = 'oceans';<BR />}<BR />//setCookie('maptype',currentCookie,2592000);<BR />document.getElementById('basemap-selected').value = currentCookie;</P><P><BR />let bmList = {<BR />'oceans': 'oceans',<BR />'satellite': 'hybrid',<BR />'streets': 'streets-vector',<BR />'topo': 'topo-vector'<BR />};<BR /><BR />let map = new Map({<BR />basemap: currentCookie<BR />});<BR /><BR /><BR />const view = new MapView({<BR />container: "ndbcmap",<BR />map: map,<BR />center: [-104,38],<BR />zoom: 3,<BR />sliderStyle: "small",<BR />popup: {<BR />dockEnabled: false,<BR />autoOpenEnabled: false,<BR />visibleElements: {<BR />closeButton: false,<BR />featureNavigation: false<BR />},<BR />dockOptions: {<BR />// Disables the dock button from the popup<BR />buttonEnabled: false,<BR />// Ignore the default sizes that trigger responsive docking<BR />breakpoint: false<BR />}<BR />},<BR />highlightOptions: {<BR />color: [255, 0, 0, 255],<BR />haloOpacity: 1,<BR />fillOpacity: 1<BR />}<BR />});<BR /><BR />let basemapSelected = document.getElementById('basemap-selected');<BR />basemapSelected.addEventListener('change',function(evt){<BR />let newBasemap = evt.target.options[evt.target.selectedIndex].value;<BR />if (newBasemap === "none" || newBasemap == null) {<BR />map.basemap = "oceans";<BR />} else {<BR />// Find the selected basemap in the array above and use the map name to set the basemap<BR />for (let x in bmList) {<BR />if (x === newBasemap) {<BR />map.basemap = newBasemap;<BR />setCookie('maptype',x,2592000);<BR />break;<BR />}<BR />}<BR />}<BR />});<BR /><BR /><BR />let features = [];<BR />//let stationsLayerView;<BR /><BR />var attr = {};<BR />attr['layerid'] = 'stationsLayer';<BR />attr['owner'] = 'Michael Testing';<BR />attr["id"] = 1;<BR />attr["name"] = 'Michael Testing';<BR /><BR />lon = -90;<BR />lat = 30;<BR /><BR /><BR />let geometryPoint = new Point(lon, lat);<BR />let graphic = new Graphic({<BR />geometry: geometryPoint,<BR />attributes: attr,<BR />});<BR /><BR />features.push(graphic);<BR /><BR /><BR />lon2 = -38;<BR />lat2 = 8;<BR /><BR /><BR />let geometryPoint2 = new Point(lon2, lat2);<BR />let graphic2 = new Graphic({<BR />geometry: geometryPoint2,<BR />attributes: attr,<BR />visible: false,<BR />});<BR />graphic2.visible = false;<BR />features.push(graphic2);<BR />console.log(graphic2);<BR /><BR />let stationsRenderer = {<BR />type: "simple",<BR />symbol: {<BR />type: "simple-marker",<BR />style: "diamond",<BR />color: [ 255, 255, 0, 255 ],<BR />size: 11,<BR />outline: {<BR />color: [30,30,30,255],<BR />width: 1,<BR />style: "solid"<BR />}<BR />}<BR />};<BR />console.log(features);<BR /><BR /><BR />stationsLayer = new FeatureLayer({<BR />source: features, // autocast as an array of esri/Graphic<BR />// create an instance of esri/layers/support/Field for each field object<BR />objectIdField: "ObjectID",<BR />outFields: ["*"],<BR />//popupTemplate: template,<BR />renderer: stationsRenderer,<BR />"fields": [{<BR />"name": "id",<BR />"alias": "id",<BR />"type": "integer"<BR />}, {<BR />"name": "owner",<BR />"alias": "owner",<BR />"type": "string"<BR />}, {<BR />"name": "name",<BR />"alias": "name",<BR />"type": "string"<BR />}, {<BR />"name": "layerid",<BR />"alias": "layerid",<BR />"type": "string"<BR />}<BR />],<BR />});<BR /><BR />map.add(stationsLayer);<BR /><BR />});</P> Wed, 07 Dec 2022 18:03:10 GMT Michael0345 2022-12-07T18:03:10Z https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/setting-visible-property-to-false-not-hiding/m-p/1238767#M79593 <P>Hello,&nbsp;</P><P>I am currently using ESRI 4.24. In my map, I am attempting to display or hide certain features based upon a user selection. While attempting to do this, I have failed to successfully hide any graphics when setting the visible property equal to false. I will attach some code to give a better example of my problem (this is just an example, not my code with the user selection). As you can see, I have hard coded two graphics and added them to the array "features" and created the layer using "source: features". I have set the visible property to false in two locations, but the graphic2 object still displays on the map anyway. Here is the code:&nbsp;</P><P>require([<BR />"esri/Map",<BR />"esri/views/MapView",<BR />"esri/symbols/SimpleMarkerSymbol",<BR />"esri/symbols/PictureMarkerSymbol",<BR />"esri/Graphic",<BR />"esri/intl",<BR />"esri/layers/FeatureLayer",<BR />"esri/layers/support/FeatureFilter",<BR />"esri/geometry/Point",<BR />"esri/request"],<BR />function(Map,MapView,SimpleMarkerSymbol,PictureMarkerSymbol,Graphic,intl,FeatureLayer,FeatureFilter,Point,esriRequest) {<BR /><BR />document.getElementById("nomap").innerHTML = '';<BR /><BR /><BR />console.log(getCookie('maptype'));<BR />let currentCookie = getCookie('maptype');<BR />if (currentCookie === false){<BR />currentCookie = 'oceans';<BR />}<BR />//setCookie('maptype',currentCookie,2592000);<BR />document.getElementById('basemap-selected').value = currentCookie;</P><P><BR />let bmList = {<BR />'oceans': 'oceans',<BR />'satellite': 'hybrid',<BR />'streets': 'streets-vector',<BR />'topo': 'topo-vector'<BR />};<BR /><BR />let map = new Map({<BR />basemap: currentCookie<BR />});<BR /><BR /><BR />const view = new MapView({<BR />container: "ndbcmap",<BR />map: map,<BR />center: [-104,38],<BR />zoom: 3,<BR />sliderStyle: "small",<BR />popup: {<BR />dockEnabled: false,<BR />autoOpenEnabled: false,<BR />visibleElements: {<BR />closeButton: false,<BR />featureNavigation: false<BR />},<BR />dockOptions: {<BR />// Disables the dock button from the popup<BR />buttonEnabled: false,<BR />// Ignore the default sizes that trigger responsive docking<BR />breakpoint: false<BR />}<BR />},<BR />highlightOptions: {<BR />color: [255, 0, 0, 255],<BR />haloOpacity: 1,<BR />fillOpacity: 1<BR />}<BR />});<BR /><BR />let basemapSelected = document.getElementById('basemap-selected');<BR />basemapSelected.addEventListener('change',function(evt){<BR />let newBasemap = evt.target.options[evt.target.selectedIndex].value;<BR />if (newBasemap === "none" || newBasemap == null) {<BR />map.basemap = "oceans";<BR />} else {<BR />// Find the selected basemap in the array above and use the map name to set the basemap<BR />for (let x in bmList) {<BR />if (x === newBasemap) {<BR />map.basemap = newBasemap;<BR />setCookie('maptype',x,2592000);<BR />break;<BR />}<BR />}<BR />}<BR />});<BR /><BR /><BR />let features = [];<BR />//let stationsLayerView;<BR /><BR />var attr = {};<BR />attr['layerid'] = 'stationsLayer';<BR />attr['owner'] = 'Michael Testing';<BR />attr["id"] = 1;<BR />attr["name"] = 'Michael Testing';<BR /><BR />lon = -90;<BR />lat = 30;<BR /><BR /><BR />let geometryPoint = new Point(lon, lat);<BR />let graphic = new Graphic({<BR />geometry: geometryPoint,<BR />attributes: attr,<BR />});<BR /><BR />features.push(graphic);<BR /><BR /><BR />lon2 = -38;<BR />lat2 = 8;<BR /><BR /><BR />let geometryPoint2 = new Point(lon2, lat2);<BR />let graphic2 = new Graphic({<BR />geometry: geometryPoint2,<BR />attributes: attr,<BR />visible: false,<BR />});<BR />graphic2.visible = false;<BR />features.push(graphic2);<BR />console.log(graphic2);<BR /><BR />let stationsRenderer = {<BR />type: "simple",<BR />symbol: {<BR />type: "simple-marker",<BR />style: "diamond",<BR />color: [ 255, 255, 0, 255 ],<BR />size: 11,<BR />outline: {<BR />color: [30,30,30,255],<BR />width: 1,<BR />style: "solid"<BR />}<BR />}<BR />};<BR />console.log(features);<BR /><BR /><BR />stationsLayer = new FeatureLayer({<BR />source: features, // autocast as an array of esri/Graphic<BR />// create an instance of esri/layers/support/Field for each field object<BR />objectIdField: "ObjectID",<BR />outFields: ["*"],<BR />//popupTemplate: template,<BR />renderer: stationsRenderer,<BR />"fields": [{<BR />"name": "id",<BR />"alias": "id",<BR />"type": "integer"<BR />}, {<BR />"name": "owner",<BR />"alias": "owner",<BR />"type": "string"<BR />}, {<BR />"name": "name",<BR />"alias": "name",<BR />"type": "string"<BR />}, {<BR />"name": "layerid",<BR />"alias": "layerid",<BR />"type": "string"<BR />}<BR />],<BR />});<BR /><BR />map.add(stationsLayer);<BR /><BR />});</P> Wed, 07 Dec 2022 18:03:10 GMT https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/setting-visible-property-to-false-not-hiding/m-p/1238767#M79593 Michael0345 2022-12-07T18:03:10Z https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/setting-visible-property-to-false-not-hiding/m-p/1238832#M79594 <P>As mentioned in <A href="https://community.esri.com/t5/arcgis-api-for-javascript-questions/map-not-displaying-renderer-after-adding/m-p/1192266#M77921" target="_self">this post</A>, 4.x doesn't give direct access to the underlying data (i.e. graphics) of a FeatureLayer; basically, your graphic reference is a copy of the data it's using internally.</P><P>There are other options for dynamically setting visibility; perhaps the best is to use the <A href="https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#definitionExpression" target="_self">definitionExpression</A> property (e.g. "id&lt;&gt;1").</P> Wed, 07 Dec 2022 17:57:19 GMT https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/setting-visible-property-to-false-not-hiding/m-p/1238832#M79594 JoelBennett 2022-12-07T17:57:19Z