GraphicsLayer / require ordering

2956
7
Jump to solution
04-05-2016 10:08 AM
GlennWilson1
New Contributor III

I'm trying to create a simple map that shows a point at a fixed lat/lon.  The script below, by all accounts of the documentation I've read, should work...However, I get a GraphicsLayer() is not a constructor error.  Is this due to the ordering of the require/function includes?  If so, how can I determine the proper order, once I add additional libraries? The code as is, loads a map without error, but as soon as I uncomment the highlighted line, it throws the error.  Any assistance would be **greatly** appreciated.

Thanks!

-Glenn

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

  <title>Point Demo</title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">

  <script src="https://js.arcgis.com/3.16/"></script>

  <style>

   html,

   body {

  padding: 0;

  margin: 0;

  }

  </style>

  <script>

  require([

   "esri/map",

   "dojo/domReady!",

   "esri/graphic",

   "esri/layers/GraphicsLayer",

   "esri/geometry/Point",

   "esri/symbols/SimpleMarkerSymbol"

   ], function(Map, GraphicsLayer, Graphic, Point, SimpleMarkerSymbol) {

   var map = new Map("myMapDiv", {

   center: [-0.178, 51.48791],

   zoom: 8,

   basemap: "topo"
   });

   /*********************
  * Add graphics layer
  *********************/

// UNCOMMENT BELOW TO GET ERROR...
// var graphicsLayer = new GraphicsLayer({displayOnPan: true});
// map.add(graphicsLayer);
//
// /*************************
// * Add a 2D point graphic
// *************************/
//
// // London
// var point = new Point({
// x: -0.178,
// y: 51.48791
// }),
//
// markerSymbol = new SimpleMarkerSymbol({
// color: [226, 119, 40],
//
// outline: new SimpleLineSymbol({
// color: [255, 255, 255],
// width: 2
// })
// });
//
// var pointGraphic = new Graphic({
// geometry: point,
// symbol: markerSymbol
// });
//
// graphicsLayer.add(pointGraphic);

   });

  </script>

</head>

<body>

<div id="myMapDiv"></div>

</body>

</html>

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

and here is your code corrected and working:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Point Demo</title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
  <script src="https://js.arcgis.com/3.16/"></script>

  <style>
    html,
    body {
      padding: 0;
      margin: 0;
    }
  </style>
  <script>
    require([
      "esri/map",
      "esri/graphic",
      "esri/layers/GraphicsLayer",
      "esri/geometry/Point",
      "esri/symbols/SimpleMarkerSymbol",
      "dojo/domReady!"
    ], function(Map, Graphic, GraphicsLayer, Point, SimpleMarkerSymbol) {
      var map = new Map("myMapDiv", {
        center: [-0.178, 51.48791],
        zoom: 8,
        basemap: "topo"
      });

      /*********************
       * Add graphics layer
       *********************/

      // UNCOMMENT BELOW TO GET ERROR...
      var graphicsLayer = new GraphicsLayer({
        displayOnPan: true
      });
      map.addLayer(graphicsLayer);

      /*************************
       * Add a 2D point graphic
       *************************/
      // London
      var point = new Point({
          "x": -0.178,
          "y": 51.48791,
          "spatialReference": {"wkid": 4326 }}),

        markerSymbol = new SimpleMarkerSymbol({
          "color": [226, 119, 40],
          "size": 12,
          "type": "esriSMS",
          "style": "esriSMSCircle",
          "outline": {
            "color": [255, 255, 255],
            "width": 2,
            "type": "esriSLS",
            "style": "esriSLSSolid"
          }
        });

      var pointGraphic = new Graphic(point, markerSymbol);

      graphicsLayer.add(pointGraphic);

    });
  </script>
</head>

<body>
  <div id="myMapDiv"></div>
</body>

</html>

View solution in original post

7 Replies
AdrianWelsh
MVP Honored Contributor

Glenn,

I am not sure if this makes a difference or not, but does it help to name your graphics layer variable a different name (just something like 'glayer' to make sure it is different)? Have you tried toying around in the Sandbox: ArcGIS API for JavaScript Sandbox

It might help others here to see your code blocked out. To do this, Use advanced editor in your forum post, click on the double arrows, click on syntax, and then Javascript (or html).

0 Kudos
AdrianWelsh
MVP Honored Contributor

also, take a look at this sample code for graphics layers:

Create circles | ArcGIS API for JavaScript

I had another thought... I'm not a javascript programmer, but have you tried re-ordering your functions around just to see if it would work or not (like putting "graphics" in front of "graphicslayer")?

GlennWilson1
New Contributor III

I had tried reordering them, but I don't think I understood all of the relationships between the require and the variables in the function header.  Ken's response was spot on, and Robert's solution actually pointed out several other really bad assumptions in my code.  Thank you all for your help!

0 Kudos
KenBuja
MVP Esteemed Contributor

You have a basic problem of the arguments in the function not agreeing with the modules in the require. It would have to be something like this:

require([

   "esri/map",

   "esri/graphic",

   "esri/layers/GraphicsLayer",

   "esri/geometry/Point",

   "esri/symbols/SimpleMarkerSymbol",

   "dojo/domReady!"
   ], function(Map, Graphic, GraphicsLayer, Point, SimpleMarkerSymbol) {

I would recommend you read this blog: The abc’s of AMD | ArcGIS Blog

It's common practice to have the "domReady" module as the last one listed. This is from the Modern Dojo page:

The sharped eyed among you will notice that there is a "module" in the requirement array that doesn't have a return variable, called dojo/domReady!. This is actually a loader "plugin" that is used to control the behaviour of the loader. This one ensures that the loader waits until the DOM structure for the page is ready. In an async world, it isn't a bright idea to assume that your DOM structure is there if you want to manipulate it, so if you are going to be doing something with the DOM in your code, make sure you include this plugin. Since we don't use the plugin in the code, it is the standard convention to put it at the end of the array and not provide a return variable for it.

SteveCole
Frequent Contributor

I think Adrian Welsh​ is right.

Change this:

function(Map, GraphicsLayer, Graphic, Point, SimpleMarkerSymbol) {

to this:

function(Map, Graphic, GraphicsLayer, Point, SimpleMarkerSymbol) {

RobertScheitlin__GISP
MVP Emeritus

and here is your code corrected and working:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Point Demo</title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
  <script src="https://js.arcgis.com/3.16/"></script>

  <style>
    html,
    body {
      padding: 0;
      margin: 0;
    }
  </style>
  <script>
    require([
      "esri/map",
      "esri/graphic",
      "esri/layers/GraphicsLayer",
      "esri/geometry/Point",
      "esri/symbols/SimpleMarkerSymbol",
      "dojo/domReady!"
    ], function(Map, Graphic, GraphicsLayer, Point, SimpleMarkerSymbol) {
      var map = new Map("myMapDiv", {
        center: [-0.178, 51.48791],
        zoom: 8,
        basemap: "topo"
      });

      /*********************
       * Add graphics layer
       *********************/

      // UNCOMMENT BELOW TO GET ERROR...
      var graphicsLayer = new GraphicsLayer({
        displayOnPan: true
      });
      map.addLayer(graphicsLayer);

      /*************************
       * Add a 2D point graphic
       *************************/
      // London
      var point = new Point({
          "x": -0.178,
          "y": 51.48791,
          "spatialReference": {"wkid": 4326 }}),

        markerSymbol = new SimpleMarkerSymbol({
          "color": [226, 119, 40],
          "size": 12,
          "type": "esriSMS",
          "style": "esriSMSCircle",
          "outline": {
            "color": [255, 255, 255],
            "width": 2,
            "type": "esriSLS",
            "style": "esriSLSSolid"
          }
        });

      var pointGraphic = new Graphic(point, markerSymbol);

      graphicsLayer.add(pointGraphic);

    });
  </script>
</head>

<body>
  <div id="myMapDiv"></div>
</body>

</html>
GlennWilson1
New Contributor III

Thank you so much for the assistance!  Your code pointed out several other bad assumptions I had made that I *hope* I would have discovered when I got the includes correct.  I'm very grateful for your response.

0 Kudos