shiplett

ArcGISDynamicMapLayer disappears

Discussion created by shiplett on Aug 17, 2010
Latest reply on Aug 17, 2010 by khutchins-esristaff
I am trying to integrate the Javascript sample for the locator, with our ArcGIS server.  I've been successful, to a point.

I've replaced the TileLayer from that sample with a dynamic layer.  Now, whenever I click on the locate button, the points appear, but the map disappears.

Everything else appears to work correctly.

Here is the code:

<!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" />
    <title>Find Address</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.0/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.0"></script>
    <script type="text/javascript">
        dojo.require("esri.map");
        dojo.require("esri.tasks.locator");

        var locator, initExtent;
        var layer, map, visible = [];

        function init() {
            initExtent = new esri.geometry.Extent({ "xmin": 2315314.74138065, "ymin": 137872.200380653, "xmax": 2365752.73138066, "ymax": 189933.162380651, "spatialReference": { "wkid": 2264} });
            map = new esri.Map("map", { extent: initExtent });
            dojo.connect(map, "onExtentChange", showExtent);
             locator = new esri.tasks.Locator("http://it-gis2.wilmingtonnc.gov/ArcGIS/rest/services/Wilmington/AddrPointsCenterlineComposite/GeocodeServer");
             dojo.connect(locator, "onAddressToLocationsComplete", showResults);
            layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://it-gis2.wilmingtonnc.gov/ArcGIS/rest/services/Wilmington/general/MapServer", { disableClientCaching: false });

            visible = [20, 19, 16, 12, 11, 10, 6, 4];
            layer.setVisibleLayers(visible);
            map.addLayer(layer);
          
        }

        function buildLayerList(layer) {
            var infos = layer.layerInfos, info;
            /*var items = [];
            for (var i = 0, il = infos.length; i < il; i++) {
                info = infos[i];
                if (info.defaultVisibility) {
                    visible.push(info.id);
                }
                items[i] = "<input type='checkbox' class='list_item' checked='" + (info.defaultVisibility ? "checked" : "") + "' id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label>";
            }
            dojo.byId("layer_list").innerHTML = items.join();*/
            visible = [20, 19, 16, 12, 11, 10, 6, 5, 4];
            layer.setVisibleLayers(visible);
            map.addLayer(layer);
        }

        function updateLayerVisibility() {
            var inputs = dojo.query(".list_item"), input;
            visible = [];
            for (var i = 0, il = inputs.length; i < il; i++) {
                if (inputs[i].checked) {
                    visible.push(inputs[i].id);
                }
            }
            layer.setVisibleLayers(visible);
        }

        function locate() {
            map.graphics.clear();
            var add = dojo.byId("address").value
            var address = {
                street: add
            };
            locator.addressToLocations(address, ["Loc_name"]);

        }

        function showExtent(extent) {
            var s = "";
            s = "XMin: " + extent.xmin.toFixed(2) + " "
           + "YMin: " + extent.ymin.toFixed(2) + " "
           + "XMax: " + extent.xmax.toFixed(2) + " "
           + "YMax: " + extent.ymax.toFixed(2);
            dojo.byId("extents").innerHTML = s;

        }

        function showResults(candidates) {
            var candidate;
            var symbol = new esri.symbol.SimpleMarkerSymbol();
            var infoTemplate = new esri.InfoTemplate("Location", "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}");

            symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE);
            symbol.setColor(new dojo.Color([255, 0, 0, 0.75]));

            var points = new esri.geometry.Multipoint(map.spatialReference);

            for (var i = 0, il = candidates.length; i < il; i++) {
                candidate = candidates[i];
                if (candidate.score > 70) {
                    var attributes = { address: candidate.address, score: candidate.score, locatorName: candidate.attributes.Loc_name };
                    var geom = esri.geometry.geographicToWebMercator(candidate.location);
                    var graphic = new esri.Graphic(geom, symbol, attributes, infoTemplate);
                    map.graphics.add(graphic);
                    map.graphics.add(new esri.Graphic(geom, new esri.symbol.TextSymbol(attributes.address).setOffset(0, 8)));
                    points.addPoint(geom);
                }
            }
            map.setExtent(points.getExtent().expand(2));
            
        }

        dojo.addOnLoad(init);
    </script>
  </head>
  <body class="tundra">
    Address : <input type="text" id="address" size="60" value="305 chestnut st, wilmington, nc 28401" /> <i>(Address, City, State, Zip)</i>
    <input type="button" value="Locate" onclick="locate()" /><br />
    Layer List : <span id="layer_list"></span><br />
    <br />
    <div id="map" style="width:600px; height:500px; border:1px solid #000;"></div>
    <div id="extents"></div>
  </body>
</html>


Any assistance is appreciated!
Thanks,
Alex

Outcomes