Hillshade with a BaseMapGallery

CrileDoscher · ‎03-12-2012

Hi all,

I've been developing an application where I'd like to lay a basemap gallery of maps on top of a hillshade and topped off with a layer showing regional boundaries, building this on the code sample for the BasemapGallery button, where the button allows the user to select one of the basemaps. Within the init() function, the hillshade is added first as an ArcGISImageServiceLayer, then the BasemapGallery is built using image services with the opacity set to 0.78. Finally, an ArcGISDynamicMapServiceLayer adds the regional boundaries. When the map is first drawn, the hillshade and regional boundaries are shown but as soon as a layer is chosen from the menu button, the hillshade is no longer visible (though regional boundaries persist).

Any suggestions greatly appreciated; code shown below. Perhaps BasemapGallery isn't the right choice here?

Crile

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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>
      Odonata Habitat Maps
    </title>
       <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/dojo/dijit/themes/claro/claro.css">

    <style type="text/css">
      html,body {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
      body {
        background-color:#feffff;
        overflow:hidden;
        font-family:"Trebuchet MS";
        margin:2%;
      }
      #map {
        -moz-border-radius:4px;
        overflow:hidden;
        border:solid 2px #03c;
      }
      .bingIcon {
        background-image:url(images/orange.png);
        background-repeat:no-repeat;
        width:16px;
        height:16px;
      }
      .claro .dijitButtonText {
        color:#03c;
        font-family: Arial, Helvetica, sans-serif
        font-weight:bold;
      }
      .claro td.dijitMenuItemLabel {
        color:#03c;
        font-family: Arial, Helvetica, sans-serif
        font-weight:500;
      }
    </style>
    <script type="text/javascript">
      var djConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7">
    </script>
    <script type="text/javascript">
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.dijit.BasemapGallery");
      dojo.require("dijit.Tooltip");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Menu");

      var map, basemapGallery;
      var bingKey = 'Enter your Bing Maps Key';
      function init() {
        var initialExtent = new esri.geometry.Extent({
          "xmin": 1445973.4102964294,
          "ymin": 5205555.926496132,
          "xmax": 3347669.9220227865,
          "ymax": 6865819.663690274
,
          "spatialReference": {
"wkid": 27200
          }
        });
        map = new esri.Map("map", {
          extent: initialExtent
        });

var hillshade = new esri.layers.ArcGISImageServiceLayer("http://v-arcgis:8399/arcgis/rest/services/Imagery/nzhsmg/ImageServer");
map.addLayer(hillshade);

        createBasemapGallery();

var url = "http://v-arcgis:8399/arcgis/rest/services/Maps/Odonata/MapServer";
        var dynamicMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer(url);
        map .addLayer(dynamicMapLayer);

        dojo.connect(map, 'onLoad', function(map) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });

      }
       function createBasemapGallery(){

// Manually create a list of basemaps to display
var basemaps = [];
var anax = new esri.dijit.Basemap({
    layers: [new esri.dijit.BasemapLayer({
       url:"http://v-arcgis:8399/arcgis/rest/services/Dragonfly/anax/ImageServer", opacity: 0.78
     })],
           id: "anaxImage",
    title: "Anax papuensis"
});
basemaps.push(anax);

var aurora = new esri.dijit.Basemap({
    layers: [new esri.dijit.BasemapLayer({
       url:"http://v-arcgis:8399/arcgis/rest/services/Dragonfly/aurora/ImageServer"
     })],
           id: "auroraImage",
    title: "Ischnura aurora"
});
basemaps.push(aurora);

var australiae = new esri.dijit.Basemap({
    layers: [new esri.dijit.BasemapLayer({
       url:"http://v-arcgis:8399/arcgis/rest/services/Dragonfly/australiae/ImageServer"
     })],
           id: "australiaeImage",
    title: "Hemicordulia australiae"
});
basemaps.push(australiae);

var bipunctata = new esri.dijit.Basemap({
    layers: [new esri.dijit.BasemapLayer({
       url:"http://v-arcgis:8399/arcgis/rest/services/Dragonfly/bipunctata/ImageServer"
     })],
           id: "bipunctataImage",
    title: "Diplacodes bipunctata"
});
basemaps.push(bipunctata);

var braueri = new esri.dijit.Basemap({
    layers: [new esri.dijit.BasemapLayer({
       url:"http://v-arcgis:8399/arcgis/rest/services/Dragonfly/braueri/ImageServer"
     })],
           id: "braueriImage",
    title: "Antopodochlora braueri"
});
basemaps.push(braueri);

var brevistyla = new esri.dijit.Basemap({
    layers: [new esri.dijit.BasemapLayer({
       url:"http://v-arcgis:8399/arcgis/rest/services/Dragonfly/brevistyla/ImageServer"
     })],
           id: "brevistylaImage",
    title: "Aeshna brevistyla"
});
basemaps.push(brevistyla);

var caroveii = new esri.dijit.Basemap({
    layers: [new esri.dijit.BasemapLayer({
       url:"http://v-arcgis:8399/arcgis/rest/services/Dragonfly/caroveii/ImageServer"
     })],
           id: "caroveiilaImage",
    title: "Uropetala caroveii"
});
basemaps.push(caroveii);

var chiltoni = new esri.dijit.Basemap({
    layers: [new esri.dijit.BasemapLayer({
       url:"http://v-arcgis:8399/arcgis/rest/services/Dragonfly/chiltoni/ImageServer"
     })],
           id: "chiltoniImage",
    title: "Uropetala chiltoni"
});
basemaps.push(chiltoni);

var colensonis = new esri.dijit.Basemap({
    layers: [new esri.dijit.BasemapLayer({
       url:"http://v-arcgis:8399/arcgis/rest/services/Dragonfly/colensonis/ImageServer"
     })],
           id: "colensonisImage",
    title: "Australestes colensonis"
});
basemaps.push(colensonis);

var grayi = new esri.dijit.Basemap({
    layers: [new esri.dijit.BasemapLayer({
       url:"http://v-arcgis:8399/arcgis/rest/services/Dragonfly/grayi/ImageServer"
     })],
           id: "grayiImage",
    title: "Procordulia grayi"
});
basemaps.push(grayi);

var sinclairi = new esri.dijit.Basemap({
    layers: [new esri.dijit.BasemapLayer({
       url:"http://v-arcgis:8399/arcgis/rest/services/Dragonfly/sinclairi/ImageServer"
     })],
           id: "sinclairiImage",
    title: "Xanthocnermis sinclairi"
});
basemaps.push(sinclairi);

var smithii = new esri.dijit.Basemap({
    layers: [new esri.dijit.BasemapLayer({
       url:"http://v-arcgis:8399/arcgis/rest/services/Dragonfly/smithii/ImageServer"
     })],
           id: "smithiiImage",
    title: "Procordulia smithii"
});
basemaps.push(smithii);

var sobrina = new esri.dijit.Basemap({
    layers: [new esri.dijit.BasemapLayer({
       url:"http://v-arcgis:8399/arcgis/rest/services/Dragonfly/sobrina/ImageServer"
     })],
           id: "sobrinaImage",
    title: "Xanthocnemis sobrina"
});
basemaps.push(sobrina);

var zealandica = new esri.dijit.Basemap({
    layers: [new esri.dijit.BasemapLayer({
       url:"http://v-arcgis:8399/arcgis/rest/services/Dragonfly/zealandica/ImageServer"
     })],
           id: "zealandicaImage",
    title: "Xanthocnemis zealandica"
});
basemaps.push(sobrina);

// Add more species here

basemapGallery = new esri.dijit.BasemapGallery({
    showArcGISBasemaps: false,
   basemaps: basemaps,
   map: map
});

        //BasemapGallery.startup isn't needed because we aren't using the default basemap, instead
        //we are going to create a custom user interface to display the basemaps, in this case a menu.
        dojo.forEach(basemapGallery.basemaps, function(basemap) {
          //Add a menu item for each basemap, when the menu items are selected
          dijit.byId("bingMenu").addChild(new dijit.MenuItem({
            label: basemap.title,
            onClick: dojo.hitch(this, function() {
              this.basemapGallery.select(basemap.id);
            })
          }));

        });
      }

      //show map on load
      dojo.addOnLoad(init);
    </script>
</head>

<body class="claro">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
    style="width: 95%; height: 94%;">

      <div id="map" dojotype="dijit.layout.ContentPane" region="center">
        <div style="position:absolute; right:50px; top:10px; z-Index:99;">
          <button id="dropdownButton" iconClass="bingIcon" label="Species" dojoType="dijit.form.DropDownButton">
            <div dojoType="dijit.Menu" id="bingMenu">
              
            </div>
          </button>
        </div>
      </div>

    </div>
</body>

</html>