AnsweredAssumed Answered

map.on("load")  shows blank Map

Question asked by mkoneya on Mar 1, 2017
Latest reply on Mar 1, 2017 by cgishack

I am an trying to use map.on("load") but when I put it into my code,  a blank map shows.   Without it,  the map displays just fine.

 

I must be missing something simple here,  but I can't find the issue.

 

Thanks for any assistance in resolving this.

 

Mele

 

<!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>Search with Suggestion Template</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.19/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      height: 90%;
      width: 90%;
      margin: 0;
      padding: 0;
    }

    #search {
      display: block;
      position: absolute;
      z-index: 2;
      top: 20px;
      left: 74px;
    }
    #LocateButton {
      position: absolute;
      top: 95px;
      left: 20px;
      z-index: 50;
    }
  </style>
   <script src="https://js.arcgis.com/3.19/"></script>
  <script>
    require([
        "esri/map", "esri/tasks/locator", "esri/dijit/Search", "esri/layers/FeatureLayer",  "esri/InfoTemplate","esri/geometry/Extent", "esri/layers/ArcGISTiledMapServiceLayer","esri/dijit/LocateButton","dojo/_base/array", "dojo/dom", "esri/tasks/GeometryService", "esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters", "dojo/domReady!"
       ], function (Map, Locator, Search, FeatureLayer,InfoTemplate,Extent,ArcGISTiledMapServiceLayer,LocateButton, array, dom, GeometryService, IdentifyTask, IdentifyParameters)
       {
      var customBasemap = new ArcGISTiledMapServiceLayer("https://maps/arcgis/rest/services/Base_Map/MapServer");
      var map = new Map("map", {
        extent: new Extent({xmin:675912,ymin:886288,xmax:755209,ymax:1060473,spatialReference:{wkid:2223}}),
          zoom: 0
      });
       map.on("load", alert("loaded"));
      map.addLayer(customBasemap);
     
      esriConfig.defaults.geometryService = new GeometryService("https://maps/arcgis/rest/services/Utilities/Geometry/GeometryServer"); 
      var lyrFields;
      var URL = "https://maps/arcgis/rest/services/Parcel_Information/MapServer/25"
      fl = new FeatureLayer(URL);
      var ParcelsURL = "https://maps/arcgis/rest/services/Parcel_Information/MapServer";
     
       geoLocate = new LocateButton({
        map: map
      }, "LocateButton");
      geoLocate.startup();
      
      var search = new Search({
        sources: [
       
        {
          featureLayer: fl,
            searchFields: ["fulladdr"],
            displayField: "fulladdr",
            exactMatch: false,
            outFields: ["parcel_code", "fulladdr", "lot_number", "subdiv_name"],
            name: "Parcels",
            placeholder: "3629 N Drinkwater",
            maxResults: 10,
            maxSuggestions: 10,
            //Create an InfoTemplate and include three fields
            infoTemplate: new InfoTemplate("Parcels", "Address: ${fulladdr}</br>APN: ${parcel_code}</br>Lot Number: ${lot_number}</br>Subdivision: ${subdiv_name}"),
            enableSuggestions: true,
            enableInfoWindow: false,
            minCharacters: 0
       },
     
     
       ],
        map: map,
        allPlaceholder: "Find Address",
        activeSourceIndex: "all"
       
       

      }, "search");
      search.startup();
      var selectionMade = search.on("select-result", selectionHandler);
        function selectionHandler(evt){
                   var resultItems = [];
                  {
                   var featureAttributes = evt.result.feature.attributes;
                       for (var attr in featureAttributes) {    
                            resultItems.push("<b>" + getFldAlias(attr) + ":</b>  " + featureAttributes[attr] + "<br>");
                       }
          }
          dom.byId("info").innerHTML = resultItems.join("");
        }
        function getFldAlias(fieldName) {
            var retVal = "";
            console.info(fl);
            array.some(fl.fields, function(item) {
                if (item.name === fieldName) {
                    retVal = item.alias;
                    return true;
                }
            });
            return retVal;
        }
    });
  </script>
</head>

<body>
     <div id="LocateButton"></div>
     <div id="search"></div>
  <div id="map"></div>
  </body>
  <div id="info" style="margin: 5px; padding: 5px; background-color: #eeeeee;">
</html>

Outcomes