Dynamic Map Service Layer not showing

SethLoht · ‎03-21-2014

Novice programmer here. Trying to add in a dynamic map service layer and it is not showing. Script is below. Any advice?

<!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">
    <title>Display Find Task results in Dojo DataGrid</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dojox/grid/resources/claroGrid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 20% padding: 17%; }
    </style>
    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
      require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/tasks/FindTask",
        "esri/tasks/FindParameters",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",

        "dojo/_base/Color",
        "dojo/on",
        "dojo/dom",
        "dijit/registry",
        "dojo/_base/array",
        "dojo/_base/connect",
        "dojox/grid/DataGrid",
        "dojo/data/ItemFileReadStore",
        "dijit/form/Button",
        "dojo/parser",

        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
      ], function(
        Map, ArcGISDynamicServiceLayer, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
        Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser
      ) {
        var findTask, findParams;
        var map, center, zoom;
        var grid, store;

        parser.parse();

        registry.byId("search").on("click", doFind);

        center = [-111.3455, 34.535];
        zoom = 6;
        map = new esri.Map("map", {
          basemap: "streets",
          center: center,
          zoom: zoom
        });

      var layer = new ArcGISDynamicMapServiceLayer('http://masgis2.asu.edu:6080/arcgis/rest/services/Group2/sudmarine_regions/MapServer', {"opacity" : .3, });
        map.addLayer(layer);



        //Create Find Task using the URL of the map service to search
        findTask = new FindTask("http://masgis2.asu.edu:6080/arcgis/rest/services/Group2/sudmarine_regions/MapServer");
        map.on("load", function () {
          //Create the find parameters
          findParams = new FindParameters();
          findParams.returnGeometry = true;
          findParams.layerIds = [0];
          findParams.searchFields = ["Address", "State"];
          findParams.outSpatialReference = map.spatialReference;
          console.log("find sr: ", findParams.outSpatialReference);
        });

        function doFind() {
          //Set the search text to the value in the box
          findParams.searchText = dom.byId("Address").value;
          findTask.execute(findParams, showResults);
        }

        function showResults(results) {
          //This function works with an array of FindResult that the task returns
          map.graphics.clear();
          var symbol = new SimpleFillSymbol(
            SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([98, 194, 204]), 2),
            new Color([98, 194, 204, 0.5])
          );

          //create array of attributes
          var items = arrayUtils.map(results, function (result) {
            var graphic = result.feature;
            graphic.setSymbol(symbol);
            map.graphics.add(graphic);
            return result.feature.attributes;
          });

          //Create data object to be used in store
          var data = {
            identifier : "Address", //This field needs to have unique values
            label : "Address2", //Name field for display. Not pertinent to a grid but may be used elsewhere.
            items : items
          };

          //Create data store and bind to grid.
          store = new ItemFileReadStore({
            data : data
          });
          var grid = registry.byId("grid");
          grid.setStore(store);
          grid.on("rowclick", onRowClickHandler);

          //Zoom back to the initial map extent
          map.centerAndZoom(center, zoom);
        }

        //Zoom to the parcel when the user clicks a row
        function onRowClickHandler(evt) {
          var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).Address;
          var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) {
            return ((graphic.attributes) && graphic.attributes.Address === clickedTaxLotId);
          });
          if ( selectedTaxLot.length ) {
            map.setExtent(selectedTaxLot[0].geometry.getExtent(), true);
          }
        }
      });
    </script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%;height:100%;margin:0;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:40px;">
      Address: <input type="text" id="Address" size="60" value="" />
          <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search
          </button>
    </div>
    <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">
     <table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
      <thead>
        <tr>
<th field="Brewery_Na">Brewery</th>
          <th field="Address">Address</th>
    <th field="City">City</th>
    <th field="State" width="40">State</th>
    <th field="Website" width="180"></th>
          <th field="Phone_1" width="100%">Phone</th>
        </tr>
      </thead>
    </table>
    </div>
</div>
</body>
</html>