Guest User

Blank Basemap

a guest
Sep 16th, 2013
441
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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>
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×