AnsweredAssumed Answered

map.on("load")  shows blank Map

Question asked by mkoneya on Mar 1, 2017
Latest reply on Mar 22, 2019 by kenbuja

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.




<!DOCTYPE html>
  <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="">
    <link rel="stylesheet" href="">
    #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;
   <script src=""></script>
        "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"));
      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");
      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");
      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 = "";
            array.some(fl.fields, function(item) {
                if ( === fieldName) {
                    retVal = item.alias;
                    return true;
            return retVal;

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