Hi,
I'm VERY new to the ArcGIS javascript API. I'm trying to get two ESRI samples to work together:
Toggle layer visibility | ArcGIS API for JavaScript
Basemap Toggle | ArcGIS API for JavaScript
I've got Toggle layer visibility working fine, but when I try to add in Basemap Toggle things go sideways and I don't know enough about the API to know why. Soon as I add in the reference esri/dijit/BasemapToggle, the map itself disappears. Here's my code:
<code>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Maps on Request</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<style>
html, body, #map {
padding: 0;
margin: 0;
height: 100%;
}
#TOC {
position: absolute;
font-family: verdana, helvetica, arial;
margin: 5px;
padding: 25px;
padding-left: 75px;
z-index: 50;
}
#BasemapToggle {
position: absolute;
top: 20px;
right: 20px;
z-index: 50;
}
</style>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
var map;
require([
"esri/dijit/BasemapToggle",
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ImageParameters",
"dojo/dom",
"dojo/on",
"dojo/query",
"dojo/domReady!"
],
function (Map, ArcGISDynamicMapServiceLayer, ImageParameters, BasemapToggle, dom, on, query) {
var layer, visibleLayerIds = [];
map = new Map("map", {
basemap: "topo"
});
//Use the ImageParameters to set the visibleLayerIds layers in the map service during ArcGISDynamicMapServiceLayer construction.
var imageParameters = new ImageParameters();
//This layer is visible on startup
imageParameters.layerIds = [0];
imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW;
//can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE
layerCadastral = new ArcGISDynamicMapServiceLayer("http://cop-gis4:6080/arcgis/rest/services/MOR/MOR_Cadastral_WGS1984/MapServer",
{"imageParameters": imageParameters});
map.addLayer(layerCadastral);
on(dom.byId("layer0CheckBox"), "change", updateLayerVisibility);
on(dom.byId("layer1CheckBox"), "change", updateLayerVisibility);
on(dom.byId("layer2CheckBox"), "change", updateLayerVisibility);
function updateLayerVisibility () {
var inputs = query(".list_item");
var inputCount = inputs.length;
//Dummy layer - is there a workaround? Setting this to an actual layer means it can't be turned off
visibleLayerIds = [1001];
for (var i = 0; i < inputCount; i++) {
if (inputs.checked) {
visibleLayerIds.push(inputs.value);
}
}
if (visibleLayerIds.length === 0) {
visibleLayerIds.push(-1);
}
layerCadastral.setVisibleLayers(visibleLayerIds);
}
var toggle = new BasemapToggle({
map: map,
basemap: "satellite"
}, "BasemapToggle");
toggle.startup();
});
</script>
</head>
<body>
<div id="TOC" Layer List:<br>
<input type='checkbox' class='list_item' id='layer0CheckBox' checked value=0 />VFPA Boundary<br>
<input type='checkbox' class='list_item' id='layer1CheckBox' value=3 />Municipal Boundaries<br>
<input type='checkbox' class='list_item' id='layer2CheckBox' value=7 />Lots (zoom in)<br>
</div>
<div id="map"></div>
<div id="BasemapToggle">BasemapToggle</div>
</body>
</html>
</code>
