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