<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" /> <style type="text/css" media="screen"> html, body { height: 99%; width: 99%; margin: 0; padding: 5px; } #content{ width: 100%; height: 100%; margin: 0; border: solid #421B14 1px; } #leftPane{ padding:2px; color:#421b14; width:15%; height:98%; text-align:center; border: solid #421B14 2px; } #map { border:solid 1px #D3D3D3; width:81%; height:98%; } #header{ height:50px; border: solid #421B14 2px; } </style> <script type="text/javascript"> var djConfig = {parseOnLoad: true}; </script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script> <script type="text/javascript"> dojo.require("esri.map"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.StackContainer"); var map function init(){ var initialExtent = new esri.geometry.Extent({"xmin":-8396836.868209211,"ymin":4835062.442691721,"xmax":-8328196.416809216,"ymax":4891396.53253782,"spatialReference":{"wkid":102100}}); map = new esri.Map("map", {extent: initialExtent}) var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer( "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); dojo.connect(map, "onLoad", function(theMap){ dojo.connect(dijit.byId('map'), 'resize', map, map.resize); createButton(); }); map.addLayer(tiledMapServiceLayer); } function createButton(){ var paneButton = new dijit.form.ToggleButton({ id:"dojoPane", showlabel: true, checked: false, label: "Show Pane", onChange: function(val){ if (val){ this.set('label', "Hide Pane"); showDiv(); } else { this.set('label', "Show Pane"); hideDiv(); } } }).placeAt(dojo.byId("header")); } function showDiv() { dijit.byId("leftPane").domNode.style.display = 'block'; } function hideDiv(){ dijit.byId("leftPane").domNode.style.display = 'none'; } dojo.addOnLoad(init); </script> </head> <body class="claro"> <div id="content" dojotype="dijit.layout.BorderContainer"> <div id="header" dojotype="dijit.layout.ContentPane" region="top"></div> <div id="leftPane" style="display: none;" dojotype="dijit.layout.ContentPane" region="left"></div> <div id="map" dojotype="dijit.layout.ContentPane" region="right"></div> </div> </body> </html>
Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
