nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

esriGeocoder issues (js api 3.3 dojo 1.8)

DavidJenkins

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

Vind meer berichten getagd met

Accepted answers

khutchins

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>

All comments

DavidJenkins

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.

khutchins

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

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.

JohnGravois

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

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>

derekswingley1

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.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.