Layer Visualization

RobertMaiden · ‎12-18-2014

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?

RobertMaiden · ‎12-18-2014

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.).

View solution in original post

KenBuja · ‎12-18-2014

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.

RobertMaiden · ‎12-18-2014

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.).

RobertMaiden · ‎01-08-2015

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.

1. Why can I load Feature Layers but not Dynamic Map Service Layers. Eventually I want to create popups from the attribute data.
2. Why can I not address map layers by layerId?
3. Why can I not add multiple layers without using a line of code for each layer? There will be >30 user-selectable layers.

Code so far:

<!DOCTYPE html>

<html>

<head>

<title>ESF8 Java Planning Map</title>

//======================================== 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>

<span>

Florida Department of Health ESF8 Planning Map </br>

Made with ArcGIS Java API<br/>

</span>

</span>

</div>

<div id="rightPane" class="rightPane"

data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" splitter=true>

Tool Bar

</div>

Table of Contents

<div data-dojo-type="dijit/layout/TabContainer"

data-dojo-props="region:'center'">

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>

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>

Statistical Data, etc.</div>

</div>

<div id="map"

class="map"

data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">

<div data-dojo-type="dijit/TitlePane"

data-dojo-props="title:'Switch Basemap',

closable:false, open:false">

</div>

Click on "Switch Basemap" above to close.

</div>

</div>

</div>

</div>

</div>

</body>

</html>

RobertMaiden · ‎01-08-2015

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.