I have a webmap project I am working on that accesses mutilple layers within a couple different mapservices. I would like to learn how I can load the layers without them drawing. I've recently incorporated check boxes instead of links to turn each layer on and off. They work but in the reverse way I want them to. I've not been able to figure out how to keep the layers from drawing until I select a checkbox..Any ideas or help would be appreciated.. Thanks..I've included a javascript code snippet from the page function init(){
esri.hide(dojo.byId('loading'));
dojo.connect(grid, "onRowClick", onRowClickHandler);
esriConfig.defaults.map.sliderLabel = null;
//Use the ImageParameters to set the visible layers in the map service during ArcGISDynamicMapServiceLayer construction.
var imageParameters = new esri.layers.ImageParameters();
imageParameters.layerIds = [1,2,3,4,5,6,7,8,9];
imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_HIDE;
//can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE, LAYER_OPTION_SHOW
var initialExtent = new esri.geometry.Extent({
"xmin": -8746396.760545,
"ymin": 4719239.393535,
"xmax": -8683358.936355,
"ymax": 4791953.233965,
"spatialReference": {
"wkid": 102113
}
});
map = new esri.Map("map", {
extent: initialExtent
});
//Add the terrain service to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service
var initBasemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer", {
id: 'ESRI_World_Topo'
});
map.addLayer(initBasemap);
dojo.connect(map,'onLoad',function(theMap){
var scalebar = new esri.dijit.Scalebar({
map: map,
scalebarUnit: "english"
}, dojo.byId("scalebar"));
});
var fireLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.co.frederick.va.us/ArcGIS/rest/services/Fire_and_Rescue/Fire_and_Rescue/MapServer", {
id: 'FireRescue',
"imageParameters":imageParameters
});
fireLayer.setVisibleLayers([3, 7]);
legendLayers.push({
layer: fireLayer,
title: "Fire Rescue Layers"
});
var patLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.co.frederick.va.us/ArcGIS/rest/services/Planning/Planning_PAT/MapServer", {
id: 'PAT',
opacity: .6,
"imageParameters":imageParameters
});
patLayer.setVisibleLayers([3, 6, 1, 2, 4, 7, 8]);
legendLayers.push({
layer: patLayer,
title: 'Planning Layers'
});
dojo.connect(map, 'onLayersAddResult', function(results){
var legend = new esri.dijit.Legend({
map: map,
layerInfos: legendLayers
}, "legendDiv");
legend.startup();
});
navToolbar = new esri.toolbars.Navigation(map);
dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
createBasemapGallery();
dojo.connect(dijit.byId('map'), 'resize', resizeMap);
dojo.byId("toggle").innerHTML += "<span>Planning Layers:</span><br />";
dojo.byId("toggle").innerHTML += "<input type='checkbox'id='1'onclick=\"JavaScript:toggleSubLayer('PAT',7)\">Urban Development Area</A><br />";
dojo.byId("toggle").innerHTML += "<input type='checkbox'id='2'onclick=\"JavaScript:toggleSubLayer('PAT',1)\">Zoning</A><br />";
dojo.byId("toggle").innerHTML += "<input type='checkbox'id='3'onclick=\"JavaScript:toggleSubLayer('PAT',2)\">Agricultural & Forestal Districts</A><br />";
dojo.byId("toggle").innerHTML += "<input type='checkbox'id='4'onclick=\"JavaScript:toggleSubLayer('PAT',3)\">Buildings</A><br />";
dojo.byId("toggle").innerHTML += "<input type='checkbox'id='5'onclick=\"JavaScript:toggleSubLayer('PAT',4)\">Future Land Use</A><br />";
dojo.byId("toggle").innerHTML += "<input type='checkbox'id='6'onclick=\"JavaScript:toggleSubLayer('PAT',6)\">Sewer & Water Service Area</A><br />";
dojo.byId("toggle").innerHTML += "<input type='checkbox'id='7'onclick=\"JavaScript:toggleSubLayer('PAT',8)\">County Boundary</A><br /><br />";
dojo.byId("toggle").innerHTML += "<span>Service Layers:</span><br />";
dojo.byId("toggle").innerHTML += "<input type='checkbox'id='8'onclick=\"JavaScript:toggleSubLayer('FireRescue',3)\">Fire Stations</A><br />";
dojo.byId("toggle").innerHTML += "<input type='checkbox'id='9'onclick=\"JavaScript:toggleSubLayer('FireRescue',7)\">Hydrants</A><br />";
map.addLayers([fireLayer, patLayer]);
function toggleSubLayer(layerId, subLayerId) {
var layer = map.getLayer(layerId);
if(layer && layer.visibleLayers) {
var visibleLayers = layer.visibleLayers;
var layerIndex = dojo.indexOf(visibleLayers, subLayerId);
if(layerIndex === -1) {
visibleLayers.push(subLayerId);
} else {
visibleLayers.splice(layerIndex, 1);
}
visibleLayers = (visibleLayers.length > 0) ? visibleLayers : [-1];
layer.setVisibleLayers(visibleLayers);
}
Here is the 'body' code for the page.. <body class="claro" >
<div class="tundra" id="navToolbar" dojoType="dijit.Toolbar" style="width: 100%;">
<div dojoType="dijit.form.Button" id="zoomin" iconClass="zoominIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN); selected=true; ">Zoom In</div>
<div dojoType="dijit.form.Button" id="zoomout" iconClass="zoomoutIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);">Zoom Out</div>
<div dojoType="dijit.form.Button" id="zoomfullext" iconClass="zoomfullextIcon" onClick="navToolbar.zoomToStartExtent();">Full Extent</div>
<div dojoType="dijit.form.Button" id="zoomprev" iconClass="zoomprevIcon" onClick="navToolbar.zoomToPrevExtent();">Prev Extent</div>
<div dojoType="dijit.form.Button" id="zoomnext" iconClass="zoomnextIcon" onClick="navToolbar.zoomToNextExtent();">Next Extent</div>
<!-- <div dojoType="dijit.form.Button" id="pan" iconClass="panIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.PAN);">Pan</div> -->
<div dojoType="dijit.form.Button" id="deactivate" iconClass="panIcon" onClick="navToolbar.deactivate()">Pan</div>
</div>
<div style="position:absolute; right:70px; top:10px; z-Index:999;">
<div dojoType="dijit.TitlePane" title="Switch Basemap" closable="false" open="false">
<div dojoType="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery" ></div></div>
</div></div>
<div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">
<div id="rightPane" dojotype="dijit.layout.ContentPane" region="right">
<div dojoType="dijit.layout.AccordionContainer">
<div dojoType="dijit.layout.ContentPane" id="legendPane" title="Legend" selected="false">
<div id="legendDiv"></div>
</div>
<div dojoType="dijit.layout.ContentPane" title="Frederick County GIS Layers" selected="true">
<span style="padding:10px 0;">Click to toggle the visibilty of different Layers.</span><br /><br />
<div id="toggle" style="padding: 2px 2px; font-size:10px;"></div>
</div>
<div dojoType="dijit.layout.ContentPane" title="Search Tools" selected="false">
<span style="padding:10px 0;">Coming Soon!</span>
PIN Lookup: <input type="text" id="PARCELID" size="20" value="54 A 25" />
<input type="button" value="Search" onclick="doFind();" /><br />
<div id="loading"><img src="http://help.arcgis.com/en/webapi/javascript/arcgis/demos/map/images/loading.gif" /></div>
</div>
</div>
</div>
<div id="map" dojotype="dijit.layout.ContentPane" style="width: 77%; height: 85%;" region="center" style="overflow:hidden;">
</div>
<div id="scalebar" style="position:absolute;left:15px;top:84%;"></div>
<div dojotype="dijit.layout.ContentPane" region="bottom" style="position:absolute;left:5px;top:88%;height:10%;width:77%">
<table dojoType="dojox.grid.DataGrid" jsid="grid" id="grid" rowsPerPage="4" rowSelector="10px">
<thead>
<tr>
<th field="RECNUM" width="15%">PIN</th>
<th field="MLNAM" width="15%" >Owner 1</th>
<th field="MFNAM" width="15%">Owner 2</th>
<th field="MADD1" width="25%">Mailing Address</th>
<th field="MADD2" width="30%">Zip</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
ADD - here is the web address... http://www.co.frederick.va.us/planning/newmap1copy2.html