Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>This is my title</title>
- <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
- <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
- <style>
- html, body, #map {padding:0;height:100%;width:100%;margin:0;overflow:hidden;}
- #rightPane{width:20%;}
- #legendPane{border: solid #97DCF2 1px;}
- </style>
- <script>var dojoConfig = { parseOnLoad: true };</script>
- <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
- <script>
- dojo.require("dijit.layout.BorderContainer");
- dojo.require("dijit.layout.ContentPane");
- dojo.require("dijit.layout.AccordionContainer");
- dojo.require("esri.map");
- dojo.require("esri.dijit.Legend");
- dojo.require("esri.layers.FeatureLayer");
- dojo.require("dijit.form.Button");
- dojo.require("esri.dijit.BasemapGallery");
- dojo.require("dijit.form.Button");
- dojo.require("dijit.Menu");
- var map;
- var basemapGallery;
- function init() {
- map = new esri.Map("map", {
- center: [-31.036, 42.747],
- zoom: 3
- });
- basemapGallery = new esri.dijit.BasemapGallery({
- showArcGISBasemaps: true,
- map: map
- });
- //add the legend
- dojo.connect(map,'onLayersAddResult',function(results){
- var layerInfo = dojo.map(results, function(layer,index){
- return {layer:layer.layer,title:layer.layer.name};
- });
- if(layerInfo.length > 0){
- var legendDijit = new esri.dijit.Legend({
- map:map,
- layerInfos:layerInfo
- },"legendDiv");
- legendDijit.startup();
- }
- });
- dojo.connect(basemapGallery, "onLoad", function(){
- dojo.forEach(basemapGallery.basemaps, function(basemap) {
- //Add a menu item for each basemap, when the menu items are selected
- dijit.byId("basemapMenu").addChild(
- new dijit.MenuItem({
- label: basemap.title,
- onClick: dojo.hitch(this, function() {
- this.basemapGallery.select(basemap.id);
- })
- })
- );
- });
- });
- dojo.connect(map, 'onLoad', function(theMap) {
- //resize the map when the browser resizes
- dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
- });
- var cable= new esri.layers.ArcGISDynamicMapServiceLayer("http://xxxxx.com/arcgis/rest/services/Electric/Data/MapServer/", {
- mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
- outFields: ["*"]
- });
- map.addLayers([cable]);
- }
- dojo.ready(init);
- </script>
- </head>
- <body class="claro">
- <div id="content"
- data-dojo-type="dijit.layout.BorderContainer"
- data-dojo-props="design:'headline', gutters:true"
- style="width: 100%; height: 100%; margin: 0;">
- <div id="rightPane"
- data-dojo-type="dijit.layout.ContentPane"
- data-dojo-props="region:'right'">
- <div data-dojo-type="dijit.layout.AccordionContainer">
- <div data-dojo-type="dijit.layout.ContentPane" id="legendPane"
- data-dojo-props="title:'Legend', selected:true">
- <div id="legendDiv"></div>
- </div>
- <div data-dojo-type="dijit.layout.ContentPane"
- data-dojo-props="title:'Pane 2'">
- This pane could contain tools or additional content
- </div>
- </div>
- </div>
- <div id="map"
- data-dojo-type="dijit.layout.ContentPane"
- data-dojo-props="region:'center'">
- <div style="position:absolute; right:50px; top:10px; z-Index:99;">
- <button id="dropdownButton" label="Basemaps" data-dojo-type="dijit.form.DropDownButton">
- <div data-dojo-type="dijit.Menu" id="basemapMenu"></div></button></div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement