I am in the process of developing a replacement web map for a response map (http://gis.doh.state.fl.us/ESF8PlanningMap/). After giving up on ArcGIS Online's ability to crate a useful map, I am now giving ArcGIS for JavaScript a try. I am running into a fairly common problem in that I would like to be able to load a group of layers that can be switched on and off by the users as needed. I have seen many suggestions, none of which work. This code is how I call the layer. It works.
//======================================== Agency for Persons with Disabilities Contractors
var APD = new esri.layers.FeatureLayer("http://gis.doh.state.fl.us/ArcGIS/rest/services/DEMO/HealthCareFacilities/MapServer/0")
APD.setVisibility(true);
map.addLayer(APD);
This is the checkbox I use to turn on/off the layer. It works:
<label><input type='checkbox' name="APD";
onclick='ChangeLayerVisiblity(name,this.checked);'>APD Contractors</label><br/>
This is my latest failed code:
//======================================== Layer Visibility
function ChangeLayerVisiblity(LayerName, IsChecked){
if (LayerName === "APD"){
if(IsChecked == true){
window.alert(LayerName + " is " + "ON" );
layer.APD.setVisibility(false);
}
else{
window.alert(LayerName + " is " + "OFF" );
layer.APD.setVisibility(true);
}
};
NOTE: if I comment out the two setVisibility lines the code works, but of course it doesn't turn off/on the layer. The setVisibility line in the constructor does work, but not in the function.
Surely, if the layer is constructed with a visibility attribute, it can be manipulated from code otherwise, why have it?
What am I missing here?
Solved! Go to Solution.
I tried APD.setVisibility(false); on an earlier version. It did not work. Neither did APD.Hide(); or APD,show(); or a couple of other rather esoteric calls. If I cannot get a functional layer call, automatically pulling layers will not help.
I also started off with the TOC dijit but may go back to it (next year.).
You code refers to layer.APD but you initialized the variable APD as the feature layer. Try using the line
APD.setVisibility(false);
instead...although without seeing more of your code, you may also run into variable scoping issues.
You could also automate the procedure for adding checkboxes for each layer you add. Take a look at this example, where checkboxes are added for each layer in a map service.
You could also go another route, using a Table of Contents dijit to control the visibility of the layers.
I tried APD.setVisibility(false); on an earlier version. It did not work. Neither did APD.Hide(); or APD,show(); or a couple of other rather esoteric calls. If I cannot get a functional layer call, automatically pulling layers will not help.
I also started off with the TOC dijit but may go back to it (next year.).
I am back off vacation and trying again to add and delete symbology on my response map. I did try “APD.setVisibility(false);” which did not work.
My basic problem is that I do not comprehend the non-parallel structures of the different ESRI objects.
Code so far:
<!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>ESF8 Java Planning Map</title>
<link href="img\favicon.ico" rel="shortcut icon">
<link rel="stylesheet" href="CSS\ESF8Map.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<script src="http://js.arcgis.com/3.11/"></script>
<script>
//======================================== Map Definition
var map, visibleLayers=[], layerCount;
require([
"esri/map",
"esri/dijit/BasemapGallery",
"esri/dijit/Scalebar",
"esri/dijit/HomeButton",
"esri/arcgis/utils",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/layers/ImageParameters",
"dojo/dom",
"dojo/on",
"dojo/query",
"dojo/domReady!"
], function (
Map,
BasemapGallery,
Scalebar,
HomeButton,
arcgisUtils,
parser
) {
parser.parse();
map = new Map("map", {
basemap: "topo",
center: [-84, 28], // long, lat
zoom: 7,
sliderStyle: "large"
});
//======================================== Layers
var AcuteHosp = new esri.layers.FeatureLayer("http://gis.doh.state.fl.us/ArcGIS/rest/services/DEMO/HealthCareFacilities/MapServer/10");
var APD = new esri.layers.FeatureLayer("http://gis.doh.state.fl.us/ArcGIS/rest/services/DEMO/HealthCareFacilities/MapServer/0");
//var SpNS = new ArcGISDynamicMapServiceLayer("http://gis.doh.state.fl.us/ArcGIS/rest/services/DEMO/Florida_Health_Response_Assets/);apServer");
map.addLayer(APD);
//map.addLayers(AcuteHosp, APD);
//======================================== Home Button Definition
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
//======================================== Scale Bar Definition
var scalebar = new Scalebar({
map: map,
scalebarUnit: "dual"
});
//======================================== Base Map Gallery Definition
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
map: map
}, "basemapGallery");
basemapGallery.startup();
basemapGallery.on("error", function(msg) {
console.log("basemap gallery error: ", msg);
});
});
//======================================== Layer Visibility
function ChangeLayerVisiblity(LayerName, IsChecked, LayerNo){
var i, pos;
if(IsChecked == true){
//show(LayerName);
visibleLayers.push(LayerNo)
}
else{
//hide(LayerName);
pos = visibleLayers.indexOf(LayerNo);
if (pos >= 0){
visibleLayers.splice(pos,1)
}
};
// window.alert("Visible Layers are " + visibleLayers);
//layers.setVisibleLayers(visibleLayers);
return;
}
dojo.ready();
</script>
</head>
<body class="claro">
<!-- ================================ Border Container -->
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;margin:0;">
<!-- ================================ Top Container -->
<div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
<img src="img/DOH_Logo.png" alt="Department of Health Logo " style="width: 80px;height: 80px; float:left">
<img src="img/ESF8_Logo.png" alt="Department of Health Logo " style="width: 130px;height: 80px; float:right">
<span>
Florida Department of Health ESF8 Planning Map </br>
<span style="font-size:10pt">
Made with ArcGIS Java API<br/>
</span>
<input type="button" value="Map Manuals and Links" onclick="window.open('InfoLinks.html')" />
</span>
</div>
<!-- ================================ Right Container -->
<div id="rightPane" class="rightPane"
data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" splitter=true>
Tool Bar
</div>
<!-- ================================ Left Container -->
<div id="leftPane" class="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" splitter=true>
Table of Contents
<div data-dojo-type="dijit/layout/TabContainer"
data-dojo-props="region:'center'">
<div data-dojo-type="dijit/layout/ContentPane" title="Providers">
Hospitals, Nursing Homes etc.<br/>
<label><input type='checkbox' name="APD";
onclick='ChangeLayerVisiblity(name,this.checked,1);'>APD Contractors</label><br/>
<label><input type='checkbox' name="HCF"
onclick='ChangeLayerVisiblity(name,this.checked,2);'>Hospitals</label><br/>
<label><input type='checkbox' name="Other"
onclick='ChangeLayerVisiblity(name,this.checked,3);'>Other</label>
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="DOH Assets">
SpNS, Warehouses, and Teams<br/>
<label><input type='checkbox' name="SpNS"
onclick='ChangeLayerVisiblity(name,this.checked,4);'>SpNS</label><br/>
<label><input type='checkbox' name="ESF8Teams"
onclick='ChangeLayerVisiblity(name,this.checked,5);'>Teams</label>
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="DOH Assets">
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="Areas">
Statistical Data, etc.</div>
</div>
</div>
<!-- ================================ Map Container -->
<div id="map"
class="map"
data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
<!-- ================================ Basemap Switcher -->
<div style="position:absolute; right:20px; top:10px; z-Index:999;">
<div data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'Switch Basemap',
closable:false, open:false">
<div data-dojo-type="dijit/layout/ContentPane" class="BasemapToggle">
<div id="basemapGallery"></div>
</div><!-- End BaseMap Gallery -->
Click on "Switch Basemap" above to close.
</div><!-- End BaseMap Gallery Bar -->
</div>
<!-- ================================ Home Button -->
<div style="position:absolute; left:20px; top:240px; z-Index:999;">
<div id="HomeButton" class="HomeButton" </div>
</div><!-- End Home Button -->
</div> <!-- End Map Container -->
</div> <!-- End Border Container -->
</body>
</html>
Perseverance pays...
It was a scope problem. I removed the var from the layer variable declaration which made it a global variable and passed the layer variable to the on click function instead of the layer name, and it works! Thanks.