API tools faq
paste
Advertisement
Guest User

Blank Basemap

a guest
Sep 16th, 2013
660
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 5.37 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.  
  4.   <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
  7.     <!--The viewport meta tag is used to improve the presentation and behavior
  8.     of the samples on iOS devices-->
  9.     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"
  10.     />
  11.     <title>
  12.       Basemap Gallery - Bing Maps
  13.     </title>
  14.        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dijit/themes/claro/claro.css">
  15.  
  16.     <style type="text/css">
  17.       html,body {
  18.         height:100%;
  19.         width:100%;
  20.         margin:0;
  21.         padding:0;
  22.       }
  23.       body {
  24.         background-color:#feffff;
  25.         overflow:hidden;
  26.         font-family:"Trebuchet MS";
  27.         margin:2%;
  28.       }
  29.       #map {
  30.         -moz-border-radius:4px;
  31.         overflow:hidden;
  32.         border:solid 2px #03c;
  33.       }
  34.       .claro .dijitButtonText {
  35.         color:#03c;
  36.         font-family: Arial, Helvetica, sans-serif
  37.         font-weight:bold;
  38.       }
  39.       .claro td.dijitMenuItemLabel {
  40.         color:#03c;
  41.         font-family: Arial, Helvetica, sans-serif
  42.         font-weight:500;
  43.       }
  44.     </style>
  45.     <script type="text/javascript">
  46.       var djConfig = {
  47.         parseOnLoad: true
  48.       };
  49.     </script>
  50.     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6">
  51.     </script>
  52.     <script type="text/javascript">
  53.       dojo.require("dijit.dijit"); // optimize: load dijit layer
  54.       dojo.require("dijit.layout.BorderContainer");
  55.       dojo.require("dijit.layout.ContentPane");
  56.       dojo.require("esri.map");
  57.       dojo.require("esri.dijit.BasemapGallery");
  58.       dojo.require("dijit.Tooltip");
  59.       dojo.require("dijit.form.Button");
  60.       dojo.require("dijit.Menu");
  61.  
  62.       var map, basemapGallery;
  63.  
  64.       function init() {
  65.         var initialExtent = new esri.geometry.Extent({
  66.           "xmin": -1641867,
  67.           "ymin": 2647172,
  68.           "xmax": 3064207,
  69.           "ymax": 4765395,
  70.           "spatialReference": {
  71.             "wkid": 102113
  72.           }
  73.         });
  74.         map = new esri.Map("map", {
  75.           extent: initialExtent
  76.         });
  77.  
  78.         createBasemapGallery();
  79.  
  80.         dojo.connect(map, 'onLoad', function(map) {
  81.           //resize the map when the browser resizes
  82.           dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
  83.         });
  84.  
  85.       }
  86.       function createBasemapGallery(){
  87.         //Manually create a list of basemaps to display
  88.         var basemaps = [];
  89.      
  90.       var oceanLayer = new esri.dijit.BasemapLayer({
  91.         url: "http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer"
  92.       });
  93.        var oceansBasemap = new esri.dijit.Basemap({
  94.           layers:[oceanLayer],
  95.           title:"World Oceans"
  96.         });
  97.         basemaps.push(oceansBasemap);
  98.        
  99.        var basemapImagery = new esri.dijit.Basemap({
  100.          layers: [new esri.dijit.BasemapLayer({
  101.            url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
  102.          })],
  103.          id: "bmImagery",
  104.          title: "Imagery"
  105.        });
  106.        basemaps.push(basemapImagery);        
  107.        
  108.         var natGeoLayer = new esri.dijit.BasemapLayer({
  109.           url:"http://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer"
  110.         });
  111.         var natGeoBasemap = new esri.dijit.Basemap({
  112.           layers:[natGeoLayer],
  113.           title:"National Geographic"
  114.         });
  115.  
  116.        basemaps.push(natGeoBasemap);
  117.        
  118.  
  119.         var blankBasemap = new esri.dijit.Basemap({
  120.           layers:[],
  121.           title:"Blank"
  122.         });
  123.  
  124.        basemaps.push(blankBasemap);
  125.      
  126.         basemapGallery = new esri.dijit.BasemapGallery({
  127.           showArcGISBasemaps: false,
  128.           basemaps: basemaps,
  129.           map: map
  130.         });
  131.        
  132.         //BasemapGallery.startup isn't needed because we aren't using the default basemap, instead
  133.         //we are going to create a custom user interface to display the basemaps, in this case a menu.
  134.         dojo.forEach(basemapGallery.basemaps, function(basemap) {            
  135.           //Add a menu item for each basemap, when the menu items are selected
  136.           dijit.byId("bingMenu").addChild(new dijit.MenuItem({
  137.             label: basemap.title,
  138.             onClick: dojo.hitch(this, function() {
  139.               this.basemapGallery.select(basemap.id);
  140.             })
  141.           }));
  142.          
  143.         });
  144.       }
  145.  
  146.       //show map on load
  147.       dojo.addOnLoad(init);
  148.     </script>
  149.   </head>
  150.  
  151.   <body class="claro">
  152.     <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
  153.     style="width: 95%; height: 94%;">
  154.  
  155.       <div id="map" dojotype="dijit.layout.ContentPane" region="center">
  156.         <div style="position:absolute; right:50px; top:10px; z-Index:99;">
  157.           <button id="dropdownButton"  label="Basemaps"  dojoType="dijit.form.DropDownButton">
  158.             <div dojoType="dijit.Menu" id="bingMenu">
  159.               <!--The menu items are dynamically created using the basemap gallery layers-->
  160.             </div>
  161.           </button>
  162.         </div>
  163.       </div>
  164.  
  165.     </div>
  166.   </body>
  167.  
  168. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!