map.on("load") shows blank Map

MeleKoneya · ‎03-01-2017

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Drew · ‎03-01-2017

Try using dojo/on — The Dojo Toolkit - Reference Guide

on(map, "load", function(){ alert('hello world') });‍

KenBuja · ‎03-01-2017

Why would that be necessary? The "on" event listener is baked into all modules. The only reason you'd need the dojo/on module is if you want have its additional functionality, like pausable and once.

Drew · ‎03-01-2017

Its just the way I prefer to do it and the sample provided a solution.

RobertScheitlin__GISP · ‎03-01-2017

Mele,

The only thing wrong with your code is the map.on need to call a function:

map.on("load", function(){alert("loaded");});‍

MeleKoneya · ‎03-01-2017

Thanks Robert, I swear I tried this yesterday but apparently I was missing something. I tried your code and it is working now, I will experiment further and mark this as the answer if this works for what I am trying to do. So far so good.

RobertKirkwood · ‎03-22-2019

Robert,

How can I run a function when the map is completely loaded? It seems when I use this:

map.on("load", function () {
myFunction.init()
});

my function runs before the map is loaded sometimes and i get an error. It works a few times and breaks a few times.

KenBuja · ‎03-22-2019

Do you mean it runs before all the layers on the map are loaded? The load event fires when the first layer or base layer is added to the map. If you want your function when all the layers are loaded, then use the map's layer-add-result event (which fires every time a layer is added) or the layers-add-result (which fires once when you use map.addLayers).