Noah,Well I still dont know what I'm doing wrong. I have a feeling its something to do with the order I call the map div in the html. I have attached the entire page script. When I load it on my server, I get everything except the ArcGISDynamicMapServiceLayer.Charles
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<link rel='stylesheet' type='text/css' href='index2.css' />
<link rel="stylesheet" href="https://community.esri.com//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion()});
</script>
<script src="http://js.arcgis.com/3.9/"></script>
<script>
require([
"dojo/parser",
"dojo/ready",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/dom",
"esri/map",
"esri/urlUtils",
"esri/arcgis/utils",
"esri/dijit/Legend",
"esri/dijit/Scalebar",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ImageParameters",
"dojo/domReady!"
], function(
parser,
ready,
BorderContainer,
ContentPane,
dom,
Map,
urlUtils,
arcgisUtils,
Legend,
Scalebar,
ArcGISDynamicMapServiceLayer,
ImageParameters
) {
ready(function(){
parser.parse();
arcgisUtils.createMap("964718e320ea4fc4abcc73ada068d015","map").then(function(response){
//update the app
dom.byId("title").innerHTML = response.itemInfo.item.title;
dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;
var map = response.map;
//Takes a URL to a non cached map service.
var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://gisdev.srh.noaa.gov/arcgis/rest/services/GSP/gffg/MapServer", {
"opacity" : 0.5
});
map.addLayer(dynamicMapServiceLayer);
//add the scalebar
var scalebar = new Scalebar({
map: map,
scalebarUnit: "english"
});
//add the legend. Note that we use the utility method getLegendLayers to get
//the layers to display in the legend from the createMap response.
var legendLayers = arcgisUtils.getLegendLayers(response);
var legendDijit = new Legend({
map: map,
layerInfos: legendLayers
},"legend");
legendDijit.startup();
});
});
});
</script>
<title>NWS GSP HyrdoViewer</title>
</head>
<body>
<div id="container">
<!-- Map area -->
<div id="map-container">
<!-- Toolbar area -->
<div id="toolbar" class="screen-only ui-widget-header hidden" style="display: block">
<ul class="menu1">
<li><a href="http://http://www.weather.gov/gsp/brief_hydro">GSP Brief Page</a></li>
<li><a href="http://water.weather.gov/ahps2/index.php?wfo=gsp">AHPS GSP</a></li>
<li><a href="http://www.srh.noaa.gov/serfc/">SERFC</a></li>
<li><a href="http://www.srh.noaa.gov/lmrfc/">LMRFC</a></li>
<li><a href="http://www.srh.noaa.gov/lmrfc/">Empty</a></li>
</ul>
<ul class="menu2">
<li class="menu2sub"><input type="radio" id="rain" name="mapcontrol-button" value="rain" checked="checked" hidden=true/>
<label for="rain">Precipitation</label></li>
<li class="menu2sub"><input type="radio" id="river" name="mapcontrol-button" value="river" checked="checked" hidden=true/>
<label for="rain">River Stages</label></li>
<li class="menu2sub"><input type="radio" id="lake" name="mapcontrol-button" value="lake" checked="checked" hidden=true/>
<label for="rain">Lake Stages</label></li>
<li class="menu2sub lastitem"><input type="radio" id="cams" name="mapcontrol-button" value="cams" checked="checked" hidden=true/>
<label for="rain">Web Cams</label></li>
</ul>
<div id = "ACRmarquee">
<?php
$myFile = "scroll.txt";
$fh = fopen($myFile, 'r');
$message = fgets($fh);
fclose($fh);
?>
<marquee behavior="scroll" direction="left" scrollamount="4"> <?=$message?> </marquee></div>
</div>
<!-- Map -->
<div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
<!-- Sidebar -->
<aside>
<header>
<!-- Header logo -->
<a href="http://www.noaa.gov"><img class="NOAA" src="NOAAlogo.png" alt="NOAAlogo"></a>
<a href="http://www.weather.gov/gsp"><img class="NWS" src="GSPLogo.png" alt="NWSlogo"></a>
<div id="headercontrols" class="alignleft">
<!-- <input type="button" id="refreshmap" value="Refresh Map" class="alignright" onclick="lde_refresh();"/> -->
<button onclick="lde_refresh()" class="alignright">Refresh Map</button>
</div>
</header>
<br>
<div id="accordion">
<h3>Map Controls</h3>
<div>
<div class="BUTTONS">
<div id="APIZoomButton">
<h3>API Zoom Level</h3>
<input type="radio" name="APIZoom" value="CWA" /> CWA<br />
<input type="radio" name="APIZoom" value="GSP" /> GSP<br />
<input type="radio" name="APIZoom" value="CLT" /> Charlotte<br />
<input type="radio" name="APIZoom" value="AVL" /> Asheville<br />
</div>
<div id="FFGButton">
<h3>Observation</br> Interval</h3>
<input type="radio" name="FFGInt" value="30MN" /> 30 Min<br />
<input type="radio" name="FFGInt" value="1HR" /> 1 Hour<br />
<input type="radio" name="FFGInt" value="2HR" /> 2 Hour<br />
<input type="radio" name="FFGInt" value="3HR" /> 3 Hour<br />
<input type="radio" name="FFGInt" value="6HR" /> 6 Hour<br />
</div>
</div>
</div>
<h3>Map Layers</h3>
<div>
</div>
<h3>Twitter</h3>
<div>
<!-- <a class="twitter-timeline" data-widget-id="360802375943983105" href="https://twitter.com/NWSGSP">Tweets by @NWSGSP</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> -->
</div>
<h3>Facebook</h3>
<div>
<!-- <iframe allowtransparency="true" frameborder="1" scrolling="yes" src="http://www.facebook.com/connect/connect.php?id=179395995467046&connections=0&stream=1" style="border: none; width: 120%; height: 100%;"></iframe> -->
</div>
</div>
</aside>
</div> <!-- end of #container -->
</body>
</html>
