ReferenceError: Graphic is not defined

[naveenmandava1]

Hello,

I'm trying to use the goecoder using dojo JavaScript. When I submit the address, I have this "ReferenceError: Graphic is not defined" error message. Any clue what s happening.

Below is my code:

  "esri/dijit/Geocoder",

  "esri/graphic" // search

   // begin geocoder

             var geocoder = new Geocoder({

                 map: map,

                 autoComplete: true,

                 zoomScale: 600

             }, dom.byId("search"));

             geocoder.startup();

             geocoder.on("select", showLocation);

             function showLocation(evt) {

                 map.graphics.clear();

                 var point = evt.result.feature.geometry;

                 var symbol = new SimpleMarkerSymbol()

                                .setStyle("square")

                                .setColor([255, 0, 0, 0.5]);

                 var graphic = new Graphic(point, symbol);

                 map.graphics.add(graphic);

                 map.infoWindow.setTitle("Search Result");

                 map.infoWindow.setContent(evt.result.name);

                 map.infoWindow.show(evt.result.feature.geometry);

                 map.infoWindow.on('hide', function () {

                     map.graphics.remove(graphic);

                 });

             }

             // end geocoder

Error at this line:

ReferenceError: Graphic is not defined

var graphic = new Graphic(point, symbol);

Thanks,

Naveen Mandava.

[JakeSkinner · Accepted solution]

Hi Naveen,

Check to make sure you have the variable for the esri/graphic module defined as 'Graphic' and not 'graphic'.  Ex:

require([
    "esri/graphic",
  ], function(
    Graphic
 )

[naveenmandava1]

Awesome! This helped me fix... Not sure how I missed this.

Now It is throwing error in this line "map.infoWindow.on is not a function"

map.infoWindow.on('hide', function () {

                     map.graphics.remove(graphic);

                 });

[KenBuja]

Could you show the entire "require" section with its accompanying "function" to show how your are loading the modules and passing the arguments to the function?

[naveenmandava1]

// Get references to modules to be used

require(["esri/map",

         "esri/tasks/FindTask", //find Task

         "esri/tasks/FindParameters", //find Parameters

          "esri/dijit/InfoWindow", //infoWindow

         "esri/dijit/InfoWindowLite", //infoWindowLite

         "esri/InfoTemplate", //infoTemplate

         "esri/layers/FeatureLayer", //Feature layer

         "js/config.js",//config for REST end points

         "esri/config",      // The default values for all JS API configuration options.

         "esri/Color",  // measurementDiv

         "esri/dijit/Geocoder",                     // search

         "esri/dijit/HomeButton",     // homeButton

         "esri/dijit/Measurement", // measurementDiv

         "esri/dijit/OverviewMap", // Overview Map

         "esri/dijit/Scalebar",  // Scalebar

         "esri/dijit/Legend",//Legend

         "esri/geometry/Extent",

         "esri/geometry/screenUtils", // search

         "esri/graphic", // search

         "esri/layers/ArcGISDynamicMapServiceLayer",

         "esri/dijit/BasemapGallery", //base map accordian pane

         "esri/layers/LayerDrawingOptions", // measurementDiv

         "esri/renderers/SimpleRenderer", // measurementDiv

         "esri/SnappingManager", // measurementDiv    -add snapping capability

         "esri/sniff", // measurementDiv

         "esri/symbols/SimpleFillSymbol", // measurementDiv

         "esri/symbols/SimpleLineSymbol", // measurementDiv

         "esri/symbols/SimpleMarkerSymbol", // search

         "esri/graphicsUtils",

         "esri/tasks/GeometryService",

         "esri/tasks/PrintTask",          // printer

         "esri/tasks/PrintParameters",    // printer

         "esri/tasks/PrintTemplate",      // printer

         "dojo/_base/array",

         "dojo/_base/Color",                    // search     

         "dojo/_base/connect",              // map onload connect

         "dojo/dom",

         "dojo/dom-construct",                  // search

         "dojo/keys",

         "dojo/on",

         "dojo/parser",

         "dojo/query",                      // search

         "dojo/io-query",

         "dijit/layout/BorderContainer",

         "dijit/layout/ContentPane",

         "dijit/TitlePane",

         "dijit/form/CheckBox",

         "dojo/domReady!"],

// Set variables to be used with references (write variables and references in the same order and be careful of typos on your references)

         function (Map, FindTask, FindParameters, InfoWindow, InfoWindowLite, InfoTemplate, FeatureLayer, config, esriConfig, Color, Geocoder, HomeButton, Measurement, OverviewMap, Scalebar, Legend, Extent,

                   screenUtils, Graphic, ArcGISDynamicMapServiceLayer, BasemapGallery,

                   LayerDrawingOptions, SimpleRenderer, SnappingManager, has, SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol, graphicsUtils, GeometryService,

                   PrintTask, PrintParameters, PrintTemplate, arrayUtils, Color, connect, dom, domConstruct, keys, on, parser, query, ioQuery,BorderContainer, ContentPane, TitlePane, CheckBox, domReady) {

[KenBuja]

Just an observation. You don't need to include the arguments in the function if you don't need them in your code. For example, I don't think I've ever seen domReady! use an argument.

[naveenmandava1]

Here you go:

In addition to dojo/domReady! (the bang or exclamation point denotes that domReady is an AMD loader plug-in), Dojo also provides dojo/ready. The difference between domReady and ready is that the former waits to fire the callback provided to require until the DOM is available while the latter waits for the DOM to be ready and waits for all outstanding require calls to finish. For more information, see the Dojo documentation for dojo/ready. In simple cases, dojo/domReady! should be used. If an app uses parseOnLoad: true, Dojo Dijits, widgets from the Esri library or custom dijits, dojo/ready should be used.

[KenBuja]

I use the module "dojo/domReady!" in many of my applications, but I never use the "domReady" argument in the function. If you take a look at the documentation page, you'll notice that the examples don't use it either.

require(["dojo/domReady!"], function(){
  // will not run until DOM is finished loading
  if(dayOfWeek == "Sunday"){
    document.musicPrefs.other.value = "Afrobeat";
  }
});

Also, that page contains this:

Common convention is not to assign a return variable to the callback function, since its return is meaningless. Also, it is common convention to put it at the end of any array of requirements:

require(["dojo/dom", "dojo/query", "dojo/on", "dojo/domReady!"], function(dom, query, on){

  // ...

});

[naveenmandava1]

Awesome Thanks for letting me know.

Also do you know why I have this error message?

TypeError: map.infoWindow.on is not a function

map.infoWindow.on("hide", function () {

                     map.graphics.remove(graphic);

                 });

[KenBuja]

I'm not sure why it would give you that message. I'm using the same syntax in one of my apps

map.infoWindow.on("hide", function () {
    map.graphics.clear();
});

without any issues. Can you create a small sample on JSBin that replicates this error?