HI,
I have been surfing the web for days looking for an answer to this but it seems like this is not a common issue. My goal is to create a custom web map using JavaScript. I have multiple layers on ArcGIS Server that I wish to use a checkbox to select and unselect two different layers. I have crime maps in categories (rape, assault, dui, etc) but want to overlay each layer with census tract demographic data (mean age, owner/renter %). I want to make it so the crime maps are unselectable but the demographic polygons are. I also want an ESRI basemap to be included. Right now I have this for a code. Currently what I get from this is just one layer showing up. The checkbox shows up for that one layer (the assault code).
var layer, map, visible = [];
require([
"esri/map", "esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/dom", "dojo/on", "dojo/query", "dojo/_base/array",
"dojo/domReady!"
], function(
Map, ArcGISDynamicMapServiceLayer,
dom, on, query, arrayUtils
) {
layer.on("load", buildLayerList);
map.addLayer(layer);
layer.on("load", buildLayerList);
mean.addLayer(Mean);
function buildLayerList() {
var items = arrayUtils.map(layer.layerInfos, function(info, index) {
if (info.defaultVisibility) {
visible.push(info.id);
}
return "<input type='checkbox' class='list_item'" + (info.defaultVisibility ? "checked=checked" : "") + "' id='" + info.id + "'' /><label for='" + info.id + "'>" + info.name + "</label>";
});
var ll = dom.byId("layer_list");
ll.innerHTML = items.join(' ');
layer.setVisibleLayers(visible);
on(ll, "click", updateLayerVisibility);
}
function updateLayerVisibility() {
var inputs = query(".list_item");
var input;
visible = [];
arrayUtils.forEach(inputs, function(input) {
if (input.checked) {
visible.push(input.id);
}
});
//if there aren't any layers visible set the array to be -1
if (visible.length === 0) {
visible.push(-1);
}
layer.setVisibleLayers(visible);
}
});
</script>
</head>
