esriGeocoder issues (js api 3.3 dojo 1.8)

DavidJenkins · ‎01-10-2013

Having an issue with implementing the new esriGeocoder into an existing application. I have updated all of the references for 3.3 and have the necessary requires but I get the following error when passing info through the geocoder:

//Error: Unable to get value of the property 'wkid': object is null or undefined

What could it mean??? There is no reference in the samples about defining the wkid. I did however add a wkid reference to my map declaration but it didn't help:

//Define Map
        map = new esri.Map("map", {
          basemap: "topo",
          center: [-87.781111, 15.0], //long, lat
          wkid: "102100",
          zoom: 2,
          fadeOnZoom: true,
          wrapAround180: true,
          //maxZoom: 99 //Error: Unable to get value of the property 'resolution': object is null or undefined
          "lods":lods
        });

Thanks in advance

KellyHutchins · ‎01-10-2013

Here's a revised version of your test case that works. The main issue was that you had "esri/Map" in the requires when it should be "esri/map".

<!DOCTYPE HTML> <html>   <head>     <meta charset="utf-8" />     <title>Test Map</title>     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/tundra/tundra.css">      <link rel="stylesheet" href="https://community.esri.com//serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css" />           <style>          html, body {          height: 100%; width: 100%; margin: 0;        }        body{         background-color:white; overflow:hidden;          font-family: "Trebuchet MS";        }       #leftPane{         margin: 5px;         padding:2px;         background-color:white;         color:#3f3f3f;         border: solid 2px #224a54;         width:20%;      }       #map {         margin: 5px;         border:solid 4px #224a54;         -moz-border-radius: 4px;       }       #footer {         margin: 2px;         border: solid 2px #224a54;         background-color:#ecefe4;color:#3f3f3f;        font-size:10pt; text-align:center; height:5%;       }             #search{           display:block;           position:absolute;           z-index:3;           top:20px;           left:75px;       }           </style>      <script src="//serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>     <script>        require(["dojo/parser","dojo/ready","esri/map", "esri/dijit/Geocoder",  "dijit/layout/BorderContainer", "dijit/layout/ContentPane" ],function(parser, ready,  Map , Geocoder ){           ready(function(){           parser.parse();                      var map = new esri.Map("map",{             basemap: "topo",             center: [-87.78, 15.0],             zoom: 2,             fadeOnZoom: true           });           var geocoder = new esri.dijit.Geocoder({             map: map           }, dojo.byId("search"));           geocoder.startup();                     });     });       </script>    </head>    <body class="claro">     <div id="container" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;">                               <div id="map" dojotype="dijit.layout.ContentPane" region="center" >             <div id="search"></div>         </div>                        </div>   </body> </html>

View solution in original post

derekswingley1 · ‎01-10-2013

Please post a more complete code sample to reproduce what you're seeing.

When creating your map, wkid is not a supported constructor option parameter so please remove that. You can also remove wrapAround180: true as well because that is the default.

DavidJenkins · ‎01-10-2013

Derek,

I stripped down the code to the affected components that still receives the error because it's an enormous app, sorry. Thanks for your help. Here is the code:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">

  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css" />

  
  <style>
  
      html, body { 
        height: 100%; width: 100%; margin: 0; 
      } 
      body{
        background-color:white; overflow:hidden; 
        font-family: "Trebuchet MS"; 
      }
      #leftPane{
        margin: 5px;
        padding:2px;
        background-color:white;
        color:#3f3f3f;
        border: solid 2px #224a54;
        width:20%;
     }
      #map {
        margin: 5px;
        border:solid 4px #224a54;
        -moz-border-radius: 4px;
      }
      #footer {
        margin: 2px;
        border: solid 2px #224a54;
        background-color:#ecefe4;color:#3f3f3f;
       font-size:10pt; text-align:center; height:5%;
      }      
      #search{
          display:block;
          position:absolute;
          z-index:3;
          top:20px;
          left:75px;
      }

      
  </style>
  
  <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>

  
  <script>
    
    // dojo's layout dijits
    require(["dijit/layout/BorderContainer", "dijit/layout/ContentPane"]);
    
    require(["esri/Map", "esri/dijit/Geocoder", "dojo/parser"],
    
        function(map, geocoder, parser){
          
        // call the parser to create the dijit layout dijits
        parser.parse();
                    
        
        // create the geocoder //Error: Unable to get value of the property 'wkid': object is null or undefined
        geocoder = new esri.dijit.Geocoder({ 
          //autocomplete: true,
          map: map  
        }, dojo.byId('search'));
        geocoder.startup();     
        
//Define Map
        map = new esri.Map("map", {
          basemap: "topo",
          center: [-87.781111, 15.0], //long, lat
          zoom: 2,
          fadeOnZoom: true
          //maxZoom: 99 //Error: Unable to get value of the property 'resolution': object is null or undefined
        });

      } //END OF THE MAIN FUNCTION //
        
    );

  </script>

</head>

<body class="tundra">
  <div id="container" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;">
    
        <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left"></div>
               
        <div id="map" dojotype="dijit.layout.ContentPane" region="center" >
            <div id="search"></div>
        </div>
        
        <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom"></div>
        
    </div>
    
</body>


</html>

JohnGravois · ‎01-10-2013

i reproed the problem in your app. since the sample here works, perhaps either the widget or map can't handle being loaded through AMD?

DavidJenkins · ‎01-10-2013

Yes, i thought this might be an AMD issue but I was hoping it was not. Like I said, the app is much larger than you see and I use several widgets, all of which has not problem with AMD so I'm going to guess it's a problem with the geocoder widget. It is the only Esri widget I'm using. For the time being, I'll have to avoid using it in this application since changing it now would be a lot of work. I may revisit it later.

KellyHutchins · ‎01-10-2013

Here's a revised version of your test case that works. The main issue was that you had "esri/Map" in the requires when it should be "esri/map".

<!DOCTYPE HTML> <html>   <head>     <meta charset="utf-8" />     <title>Test Map</title>     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/tundra/tundra.css">      <link rel="stylesheet" href="https://community.esri.com//serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css" />           <style>          html, body {          height: 100%; width: 100%; margin: 0;        }        body{         background-color:white; overflow:hidden;          font-family: "Trebuchet MS";        }       #leftPane{         margin: 5px;         padding:2px;         background-color:white;         color:#3f3f3f;         border: solid 2px #224a54;         width:20%;      }       #map {         margin: 5px;         border:solid 4px #224a54;         -moz-border-radius: 4px;       }       #footer {         margin: 2px;         border: solid 2px #224a54;         background-color:#ecefe4;color:#3f3f3f;        font-size:10pt; text-align:center; height:5%;       }             #search{           display:block;           position:absolute;           z-index:3;           top:20px;           left:75px;       }           </style>      <script src="//serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>     <script>        require(["dojo/parser","dojo/ready","esri/map", "esri/dijit/Geocoder",  "dijit/layout/BorderContainer", "dijit/layout/ContentPane" ],function(parser, ready,  Map , Geocoder ){           ready(function(){           parser.parse();                      var map = new esri.Map("map",{             basemap: "topo",             center: [-87.78, 15.0],             zoom: 2,             fadeOnZoom: true           });           var geocoder = new esri.dijit.Geocoder({             map: map           }, dojo.byId("search"));           geocoder.startup();                     });     });       </script>    </head>    <body class="claro">     <div id="container" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;">                               <div id="map" dojotype="dijit.layout.ContentPane" region="center" >             <div id="search"></div>         </div>                        </div>   </body> </html>

DavidJenkins · ‎01-14-2013

Thank you Kelly. Yes that cleared up a few issues I was having but it was nothing that was preventing the application to work in 3.2.