<body class="claro"> <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width: 100%; height: 100%; margin: 0;"> <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;"> </div> </div>
Solved! Go to Solution.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<title>JavaScript Seminar</title>
<script type="text/javascript">djConfig = { parseOnLoad:true }</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.4"></script>
<style type="text/css">
@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.4/js/dojo/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript">
//This demo application is intended for education purposes only and associated with the
//ESRI JavaScript API 1/2 day seminars presented in the fall of 2008.
//Register for seminars at:
// http://www.esri.com/events/seminars/arcgis93_server/index.html
//All the services used in the following demonstrations rely on ESRI sample servers.
//The services running on the sample servers may change in the future;
//thus, you should not rely on the services in your own applications.
//The sample server services are being utilized in this seminar for demonstration purposes only.
//As the demonstrations rely on the sample servers, the content of these demos will only be valid as long as the services on the sample servers continue to run.
dojo.require("esri.map");
dojo.require("dijit.TitlePane"); //For Floating panel
dojo.require("dijit.form.TextBox");
dojo.require("dijit.Dialog");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.dijit"); // optimize: load dijit layer
var map; //represents esri.map
var imagery; //arcgisonline imagery
var streetMap; //arcgisonline streetmap data
var portlandService; //Portland Data from sample server
var dynamicMapServiceLayer; //Census Block data
function init() {
var startExtent = new esri.geometry.Extent({ xmin: -123.6, ymin: 44.873, xmax: -121.645, ymax: 45.793, spatialReference: new esri.SpatialReference({wkid: 4326})});
map = new esri.Map("map", { extent:startExtent } );
imagery = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");
map.addLayer(imagery);
streetMap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer", {id:"streetMap"});
map.addLayer(streetMap);
streetMap.hide();
portlandService = new esri.layers.ArcGISTiledMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Portland/Portland_ESRI_LandBase_AGO/MapServer", {id:"portlandService"});
portlandService.setOpacity(0.75);
map.addLayer(portlandService);
//For Dynamic Layer when floating panel opens
var a = dijit.byId('horizontalSlider');
onClickHandle = dojo.connect(a.sliderHandle, 'onmouseup', function(e) { updatemap(dojo.byId('popDens').value); });
var b = dijit.byId('CensusTitle');
onToggleHandle = dojo.connect(b, 'toggle', function(e) { if (b.open) { addDynamic(dojo.byId('popDens').value); } else { dynamicMapServiceLayer.hide();}});
}
function TurnOffStreetMap() {
streetMap.hide();
imagery.show();
}
function TurnOffImagery() {
imagery.hide();
streetMap.show();
}
function addDynamic(inVal) {
dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer");
dynamicMapServiceLayer.setVisibleLayers([1]);
var layerDefinitions = [];
layerDefinitions[1] = "POP07_SQMI > " + inVal;
dynamicMapServiceLayer.setLayerDefinitions(layerDefinitions);
map.addLayer(dynamicMapServiceLayer);
}
function updatemap(inVal) {
var layerDefinitions = [];
layerDefinitions[1] = "POP07_SQMI > " + inVal;
dynamicMapServiceLayer.setLayerDefinitions(layerDefinitions);
}
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
<table>
<tbody>
<tr>
<td>
<div style="position:relative;">
<div id="map" style="width:1100px; height:600px; border:1px solid #000;">
</div>
<div style="position:absolute; right:25px; top:10px; z-Index:999;">
<button id= "Button1" onClick="TurnOffStreetMap()">Imagery</button>
<button id="button2" onClick="TurnOffImagery()">Street Map</button>
</div>
</div>
</td>
<td valign="top">
</td>
</tr>
</tbody>
</table>
</body>
<div style="position:absolute; right:25px; top:10px; z-Index:999;"> <button id= "Button1" onClick="TurnOffStreetMap()">Imagery</button> <button id="button2" onClick="TurnOffImagery()">Street Map</button> </div>