matt3607

Help!! How to add elevation service to script...

Discussion created by matt3607 on Dec 7, 2011
Latest reply on Dec 7, 2011 by stevel
Hello all,

I'm trying to add the Elevation service to my script. Does anybody know how?

Elevation Service URL: http://sampleserver2.arcgisonline.com/ArcGIS/rest/services/Elevation


<!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" />
    <!--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>
    </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/claro/claro.css">
    <style type="text/css">
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map{
      padding:0; }
    </style>
    <script type="text/javascript">
    var djConfig = {
  parseOnLoad: true
};
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5">
    </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.virtualearth.VETiledLayer");
    dojo.require("dijit.TitlePane");
    dojo.require("esri.dijit.BasemapGallery");
    dojo.require("esri.arcgis.utils");
    dojo.require("esri.dijit.Legend");

    var map = null;

    function init() {
      var initExtent = new esri.geometry.Extent({
        "xmin": -11209999,
        "ymin": 3481772,
        "xmax": -10668897,
        "ymax": 3369459,
        "spatialReference": {
          "wkid": 102100
        }
      });
      map = new esri.Map("map", {
        extent: initExtent
      });


      var initBasemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
      map.addLayer(initBasemap);

      var operationalLayer = new esri.layers.ArcGISDynamicMapServiceLayer("https://gis.sanantonio.gov/ArcGIS/rest/services/BikeFacilities/MapServer");
      map.addLayers([operationalLayer]);

      //add the legend
      dojo.connect(map, 'onLayersAddResult', function(results) {
        console.log("on layers add result: ", results);
        var layerInfo = dojo.map(results, function(layer, index) {
          return {
            layer: layer.layer,
            // title: layer.layer.name // name property is undefined...
            title: "Bike Facilities"
          };
        });
        if (layerInfo.length > 0) {
          var legendDijit = new esri.dijit.Legend({
            map: map,
            layerInfos: layerInfo
          }, "legendDiv");
          legendDijit.startup();
        }
      });

      createBasemapGallery();

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

    function createBasemapGallery() {
      //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
      var basemapGallery = new esri.dijit.BasemapGallery({
        showArcGISBasemaps: true,
        bingMapsKey: 'A1GXEbIE8xrnP3IbNrLVIqRfH1FLjVX53xuqCMqM2Y1Cvp_ugYoFdPn-Sn2XyX9Q',
        map: map
      }, "basemapGallery");

      basemapGallery.startup();

      dojo.connect(basemapGallery, "onError", function(msg) {
        console.log(msg)
      });
    }

    //show map on load
    dojo.addOnLoad(init);
    </script>
  </head>
 
  <body class="claro">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
    style="width:100%;height:100%;margin:0;">
      <div id="leftPane" class="roundedCorners" dojotype="dijit.layout.ContentPane"
      region="left" style="width:275px;">
        Legend
        <div id="legendDiv"></div>
      </div>
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;">
        <div style="position:absolute; right:20px; top:10px; z-Index:999;">
          <div dojoType="dijit.TitlePane" title="Switch Basemap" closable="false"
          open="false">
            <div dojoType="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
              <div id="basemapGallery">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

Outcomes