Hello,
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:
require([
"esri/Map",
"esri/views/MapView",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/PictureMarkerSymbol",
"esri/Graphic",
"esri/intl",
"esri/layers/FeatureLayer",
"esri/layers/support/FeatureFilter",
"esri/geometry/Point",
"esri/request"],
function(Map,MapView,SimpleMarkerSymbol,PictureMarkerSymbol,Graphic,intl,FeatureLayer,FeatureFilter,Point,esriRequest) {
document.getElementById("nomap").innerHTML = '';
console.log(getCookie('maptype'));
let currentCookie = getCookie('maptype');
if (currentCookie === false){
currentCookie = 'oceans';
}
//setCookie('maptype',currentCookie,2592000);
document.getElementById('basemap-selected').value = currentCookie;
let bmList = {
'oceans': 'oceans',
'satellite': 'hybrid',
'streets': 'streets-vector',
'topo': 'topo-vector'
};
let map = new Map({
basemap: currentCookie
});
const view = new MapView({
container: "ndbcmap",
map: map,
center: [-104,38],
zoom: 3,
sliderStyle: "small",
popup: {
dockEnabled: false,
autoOpenEnabled: false,
visibleElements: {
closeButton: false,
featureNavigation: false
},
dockOptions: {
// Disables the dock button from the popup
buttonEnabled: false,
// Ignore the default sizes that trigger responsive docking
breakpoint: false
}
},
highlightOptions: {
color: [255, 0, 0, 255],
haloOpacity: 1,
fillOpacity: 1
}
});
let basemapSelected = document.getElementById('basemap-selected');
basemapSelected.addEventListener('change',function(evt){
let newBasemap = evt.target.options[evt.target.selectedIndex].value;
if (newBasemap === "none" || newBasemap == null) {
map.basemap = "oceans";
} else {
// Find the selected basemap in the array above and use the map name to set the basemap
for (let x in bmList) {
if (x === newBasemap) {
map.basemap = newBasemap;
setCookie('maptype',x,2592000);
break;
}
}
}
});
let features = [];
//let stationsLayerView;
var attr = {};
attr['layerid'] = 'stationsLayer';
attr['owner'] = 'Michael Testing';
attr["id"] = 1;
attr["name"] = 'Michael Testing';
lon = -90;
lat = 30;
let geometryPoint = new Point(lon, lat);
let graphic = new Graphic({
geometry: geometryPoint,
attributes: attr,
});
features.push(graphic);
lon2 = -38;
lat2 = 8;
let geometryPoint2 = new Point(lon2, lat2);
let graphic2 = new Graphic({
geometry: geometryPoint2,
attributes: attr,
visible: false,
});
graphic2.visible = false;
features.push(graphic2);
console.log(graphic2);
let stationsRenderer = {
type: "simple",
symbol: {
type: "simple-marker",
style: "diamond",
color: [ 255, 255, 0, 255 ],
size: 11,
outline: {
color: [30,30,30,255],
width: 1,
style: "solid"
}
}
};
console.log(features);
stationsLayer = new FeatureLayer({
source: features, // autocast as an array of esri/Graphic
// create an instance of esri/layers/support/Field for each field object
objectIdField: "ObjectID",
outFields: ["*"],
//popupTemplate: template,
renderer: stationsRenderer,
"fields": [{
"name": "id",
"alias": "id",
"type": "integer"
}, {
"name": "owner",
"alias": "owner",
"type": "string"
}, {
"name": "name",
"alias": "name",
"type": "string"
}, {
"name": "layerid",
"alias": "layerid",
"type": "string"
}
],
});
map.add(stationsLayer);
});
