map.on("load") shows blank Map

MeleKoneya — Sat, 11 Dec 2021 19:52:30 GMT

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

Re: map.on("load") shows blank Map

Drew — Wed, 01 Mar 2017 13:35:55 GMT

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

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

Re: map.on("load") shows blank Map

RobertScheitlin__GISP — Wed, 01 Mar 2017 13:50:29 GMT

Mele,

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

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

Re: map.on("load") shows blank Map

KenBuja — Wed, 01 Mar 2017 13:58:14 GMT

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.

Re: map.on("load") shows blank Map

MeleKoneya — Wed, 01 Mar 2017 14:56:35 GMT

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.

Re: map.on("load") shows blank Map

Drew — Wed, 01 Mar 2017 15:33:17 GMT

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

Re: map.on("load") shows blank Map

RobertKirkwood — Fri, 22 Mar 2019 15:28:49 GMT

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.

Re: map.on("load") shows blank Map

KenBuja — Fri, 22 Mar 2019 16:30:46 GMT

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).

topic Re: map.on("load") shows blank Map in ArcGIS JavaScript Maps SDK Questions

map.on("load") shows blank Map

Re: map.on("load") shows blank Map

Re: map.on("load") shows blank Map

Re: map.on("load") shows blank Map

Re: map.on("load") shows blank Map

Re: map.on("load") shows blank Map

Re: map.on("load") shows blank Map

Re: map.on("load") shows blank Map