<!DOCTYPE HTML> <html 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" /> <!--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>Multiple Dojo Calls</title> <!-- Load Dojo 1.7 from Dojo --> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"> </script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css" media="screen"> <!-- Load 3.0f from ESRI --> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css"> <script type="text/javascript"> djConfig = { scopeMap: [ [ "dojo", "esriDojo" ], [ "dijit", "esriDijit" ], [ "dojox", "esriDojox" ] ] }; </script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script> <script type="text/javascript"> //1.7 doesn't need a DJ config file setup so this section should kick off both pieces of dojo djConfig = dojo.config; esriDojo.require("esri.map"); esriDojo.require("esri.virtualearth.VETiledLayer"); require([ "dijit/layout/BorderContainer", "dijit/layout/ContentPane","dijit/layout/AccordionContainer", "dojo/parser", "dojo/domReady!", "dojox/layout/FloatingPane", ]); var veTileLayer; function init() { var map = new esri.Map("map"); //Creates the Virtual Earth layer to add to the map veTileLayer = new esri.virtualearth.VETiledLayer({ bingMapsKey: 'AimF6LphvVcbtQZOyiopeyQT8n-QOTukhwoRZwnzKL1MM0_B1Dfc7ppeKmyPByKp', mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_ROAD }); map.addLayer(veTileLayer); } dojo.addOnLoad(initDojo); esriDojo.addOnLoad(init); </script> </head> <body class="claro"> <div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'"> <div class="centerPanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center', splitter: true""> <div id="map"> <div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane" title="Zoom-Bar" data-dojo-props="resizable:false, dockable:true" style="position:absolute;top:5;left:1;width:100px;height:300px;visibility:visible;"> This is the content of the pane! </div> </div> </div> <div class="edgePanel" style="max-height: px, min-height: 50px;" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top', splitter: true">Header content (top)</div> <div data-dojo-type="dijit.layout.AccordionContainer" style="width: 25%" data-dojo-props="region: 'left', splitter: true""> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Legend'"> <ul> <li> sample title </li> <li> sample title </li> <li> sample title </li> <li> sample title </li> <li> sample title </li> <li> sample title </li> </ul> </div> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Your Bookmarks', selected: true"> <ul> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> </ul> </div> </div> </div> </body> </html>
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" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title></title> <!-- Load stylesheets--> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dojox/layout/resources/FloatingPane.css"> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dojox/layout/resources/ResizeHandle.css" type="text/css"> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } </style> <script type="text/javascript">var djConfig = {parseOnLoad: true};</script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script> <script type="text/javascript"> // dojo.require("esri.vitualearth.VETiledLayer"); dojo.require("dojo.parser"); dojo.require("dojo.domReady"); dojo.require("esri.map"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.AccordionContainer"); dojo.require("dojox.layout.FloatingPane"); var map; var veTileLayer; function init() { var initialExtent = new esri.geometry.Extent({ "xmin": -9414173.061, "ymin": 3995118.342, "xmax": -9398289.375, "ymax": 4014748.679, "spatialReference": {"wkid": 102113}}); map = new esri.Map("map", { extent: initialExtent }); veTileLayer = new esri.virtualearth.VETiledLayer ({ bingMapsKey: 'AimF6LphvVcbtQZOyiopeyQT8n-QOTukhwoRZwnzKL1MM0_B1Dfc7ppeKmyPByKp', mapStyle: esri.virtualearth.VETiledLayer.ROAD}); map.addLayer(veTileLayer); dojo.connect(map, 'onLoad', function (map) {dojo.connect(dijit.byId('map'), 'resize', map, map.resize); }); } dojo.addOnLoad(init); </script> </head> <body class="claro"> <!-- floating pane --> <div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane" title="Zoom-Bar" data-dojo-props="resizable: false, dockable: true" style="position:absolute;top:5;left:1;width:100px;height:300px;visibility:visible;"> This is the content of the (floating) pane! </div> <div id="appLayout" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'" style="width: 100%; height: 100%; margin: 0;"> <!-- top content pane --> <div class="edgePanel" style="height: 50px;" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top', splitter: true">Header content (top) </div> <!-- center/map content pane --> <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center', splitter: true"></div> <!-- right content pane --> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left', splitter: true" style="width: 25%;"> <div dojoType="dijit.layout.AccordionContainer"> <div dojoType="dijit.layout.ContentPane" title="Legend"> <ul> <li> sample title </li> <li> sample title </li> <li> sample title </li> <li> sample title </li> <li> sample title </li> <li> sample title </li> </ul> </div> <div dojoType="dijit.layout.ContentPane" title="Your Bookmarks" selected: "true"> <ul> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> </ul> </div> </div> </div> </div> </body> </html>
<!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" /> <!--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>Renaming with Dojo</title> <!-- Load JSAPI 1.6 which includes Dojo 1.4.0 --> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css"> <script type="text/javascript"> djConfig = { scopeMap: [ [ "dojo", "esriDojo" ], [ "dijit", "esriDijit" ], [ "dojox", "esriDojox" ] ] }; </script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script> <script type="text/javascript"> esriDojo.require(["esri.map","esri.vitualearth.VETiledLayer", "dojo.parser", "dojo.domReady"]); esriDjit.require(["dijit.layout.BorderContainer", "dijit.layout.ContentPane", "dijit.layout.AccordianContainer"]); esriDojox.require("dojox.layout.FloatingPane"); function init() { var extent = new esri.geometry.Extent(-122.93,47.02,-122.86,47.07, new esri.SpatialReference({wkid:4326})); var map = new esri.Map("map", {extent:esri.geometry.geographicToWebMercator(extent)}); veTileLayer = new esri.virtualearth.VETiledLayer ({ bingMapsKey: 'AimF6LphvVcbtQZOyiopeyQT8n-QOTukhwoRZwnzKL1MM0_B1Dfc7ppeKmyPByKp', mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL }); map.addLayer(veTileLayer); } esriDojo.addOnLoad(init); </script> </head> <body class="claro"> <div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'"> <div class="centerPanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center', splitter: true""> <div id="map"> <div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane" title="Zoom-Bar" data-dojo-props="resizable:false, dockable:true" style="position:absolute;top:5;left:1;width:100px;height:300px;visibility:visible;"> This is the content of the pane! </div> </div> </div> <div class="edgePanel" style="max-height: px, min-height: 50px;" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top', splitter: true">Header content (top)</div> <div data-dojo-type="dijit.layout.AccordionContainer" style="width: 25%" data-dojo-props="region: 'left', splitter: true""> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Legend'"> <ul> <li> sample title </li> <li> sample title </li> <li> sample title </li> <li> sample title </li> <li> sample title </li> <li> sample title </li> </ul> </div> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Your Bookmarks', selected: true"> <ul> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> </ul> </div> </div> </div> </body> </html>
<!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" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title>Renaming with Dojo</title> <!-- Load stylesheets--> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="Styles/FloatingPane.css"> <link rel="stylesheet" href="dojox/layout/resources/ResizeHandle.css" type="text/css"> <!--<script type="text/javascript"> djConfig = { scopeMap: [ [ "dojo", "esriDojo" ], [ "dijit", "esriDijit" ], [ "dojox", "esriDojox" ] ] }; </script>--> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script> <script type="text/javascript"> //dojo.require(["esri.map","esri.vitualearth.VETiledLayer", "dojo.parser", "dojo.domReady"]); //esriDjit.require(["dijit.layout.BorderContainer", "dijit.layout.ContentPane", "dijit.layout.AccordianContainer"]); //dojox.require("dojox.layout.FloatingPane"); dojo.require("esri.vitualearth.VETiledLayer"); dojo.require("dojo.parser"); dojo.require("dojo.domReady"); dojo.require("esri.map"); djit.require("dijit.layout.BorderContainer"); djit.require("dijit.layout.ContentPane"); djit.require("dijit.layout.AccordianContainer"); dojox.require("dojox.layout.FloatingPane"); var map; var veTileLayer; function init() { var initialExtent = new esri.geometry.Extent({ "xmin": -9414173.061, "ymin": 3995118.342, "xmax": -9398289.375, "ymax": 4014748.679, "spatialReference": {"wkid": 102113}}); map = new esri.Map("map", { extent: initialExtent }); veTileLayer = new esri.virtualearth.VETiledLayer ({ bingMapsKey: 'AimF6LphvVcbtQZOyiopeyQT8n-QOTukhwoRZwnzKL1MM0_B1Dfc7ppeKmyPByKp', mapStyle: esri.virtualearth.VETiledLayer.ROAD}); map.addLayer(veTileLayer); dojo.connect(map, 'onLoad', function (map) {dojo.connect(dijit.byId('map'), 'resize', map, map.resize); }); } dojo.addOnLoad(init); </script> </head> <body class="claro"> <div id="appLayout" class="demoLayout" dojoType="dijit.layout.BorderContainer" design= "headline"> <div class="centerPanel" dojoType="dijit.layout.ContentPane" region= "center" splitter= "true"> <div id="map"> <div dojoType="dojox.layout.FloatingPane" id="dFloatingPane" title="Zoom-Bar" resizable="false" dockable="true" style="position:absolute;top:5;left:1;width:100px;height:300px;visibility:visible;"> This is the content of the pane! </div> </div> </div> <div class="edgePanel" style="max-height: px, min-height: 50px;" dojoType="dijit.layout.ContentPane" region= "top" splitter= "true">Header content (top)</div> <div dojoType="dijit.layout.AccordionContainer" style="width: 25%" region= "left", splitter= "true"> <div dojoType="dijit.layout.ContentPane" title="Legend"> <ul> <li> sample title </li> <li> sample title </li> <li> sample title </li> <li> sample title </li> <li> sample title </li> <li> sample title </li> </ul> </div> <div dojoType="dijit.layout.ContentPane" title="Your Bookmarks" selected: "true"> <ul> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> </ul> </div> </div> </div> </body> </html>
<!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" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title></title> <!-- Load stylesheets--> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dojox/layout/resources/FloatingPane.css"> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dojox/layout/resources/ResizeHandle.css" type="text/css"> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } </style> <script type="text/javascript">var djConfig = {parseOnLoad: true};</script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script> <script type="text/javascript"> // dojo.require("esri.vitualearth.VETiledLayer"); dojo.require("dojo.parser"); dojo.require("dojo.domReady"); dojo.require("esri.map"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.AccordionContainer"); dojo.require("dojox.layout.FloatingPane"); var map; var veTileLayer; function init() { var initialExtent = new esri.geometry.Extent({ "xmin": -9414173.061, "ymin": 3995118.342, "xmax": -9398289.375, "ymax": 4014748.679, "spatialReference": {"wkid": 102113}}); map = new esri.Map("map", { extent: initialExtent }); veTileLayer = new esri.virtualearth.VETiledLayer ({ bingMapsKey: 'AimF6LphvVcbtQZOyiopeyQT8n-QOTukhwoRZwnzKL1MM0_B1Dfc7ppeKmyPByKp', mapStyle: esri.virtualearth.VETiledLayer.ROAD}); map.addLayer(veTileLayer); dojo.connect(map, 'onLoad', function (map) {dojo.connect(dijit.byId('map'), 'resize', map, map.resize); }); } dojo.addOnLoad(init); </script> </head> <body class="claro"> <!-- floating pane --> <div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane" title="Zoom-Bar" data-dojo-props="resizable: false, dockable: true" style="position:absolute;top:5;left:1;width:100px;height:300px;visibility:visible;"> This is the content of the (floating) pane! </div> <div id="appLayout" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'" style="width: 100%; height: 100%; margin: 0;"> <!-- top content pane --> <div class="edgePanel" style="height: 50px;" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top', splitter: true">Header content (top) </div> <!-- center/map content pane --> <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center', splitter: true"></div> <!-- right content pane --> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left', splitter: true" style="width: 25%;"> <div dojoType="dijit.layout.AccordionContainer"> <div dojoType="dijit.layout.ContentPane" title="Legend"> <ul> <li> sample title </li> <li> sample title </li> <li> sample title </li> <li> sample title </li> <li> sample title </li> <li> sample title </li> </ul> </div> <div dojoType="dijit.layout.ContentPane" title="Your Bookmarks" selected: "true"> <ul> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> <li> <b>Sample Bookmark</b> </li> </ul> </div> </div> </div> </div> </body> </html>