nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Layer Visualization

RobertMaiden

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?

Encuentra más publicaciones etiquetadas con

Accepted answers

RobertMaiden

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

All comments

RobertMaiden

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.

RobertMaiden

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

I also started off with the TOC dijit but may go back to it (next year.).

kenbuja

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.

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.