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; } } }

GraphicsLayer / require ordering

GlennWilson1

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>

<head>

<title>Point Demo</title>

<style>

html,

body {

padding: 0;

margin: 0;

}

</style>

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>

</body>

</html>

Find more posts tagged with

Accepted answers

rscheitlin

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>

All comments

GlennWilson1

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.

GlennWilson1

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!

rscheitlin

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>

evtguy

I think Adrian Welsh is right.

Change this:

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

to this:

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

kenbuja

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.

AdrianWelsh

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")?

AdrianWelsh

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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