Graphics issue with 4.3 version (2d)

[JeffSauder]

Hi,

I am trying to put together a map site and am having difficulty with putting graphics on the map.  I followed the sandbox example but for some reason I cannot get anything to work on my app.  I created a simple click event on the view just to try it.  The click event fires OK (I have an alert in the function to add the graphic that shows the x,y values of the point, so I know the point isn't null either).  I get the following error in the F12 console:

IE:
SCRIPT5007: Unable to get property 'type' of undefined or null reference
File: MapView.js, Line: 408, Column: 41

Chrome:
MapView.js:408 Uncaught TypeError: Cannot read property 'type' of undefined
    at k.get [as isPolygonMarkerSymbol] (MapView.js:408)
    at k._projectGeometry (MapView.js:411)
    at k.render (MapView.js:409)
    at e.renderChild (MapView.js:406)
    at e.k.renderChildren (MapView.js:301)
    at e.k.render (MapView.js:297)
    at l.renderChild (MapView.js:332)
    at l.k.renderChildren (MapView.js:301)
    at l.k.render (MapView.js:297)
    at l.render (MapView.js:330)

Below is the view event and javascript that is used to create the graphic:

    view.on("click", function(event) {
      var sPoint = {
        x: event.x,
        y: event.y
      };
      var pt = view.toMap(sPoint.x,sPoint.y);  //this converts the point xy from screen points to map points (WKID 2868)
      currentX = pt.x;
      currentY = pt.y;
      view.graphics.add(pt);
      putPointOnMap();
    });

//This is the first method I tried, like the sandbox example it assigns the point and style to the graphic and adds to the view

     function putPointOnMap() {
      var smsMarker = new SimpleMarkerSymbol({
        color: [255,0,0],
        outline: {
          color: [0,0,255],
          width:2
        }
      });
      var pt = new Point({
        x: currentX,
        y: currentY
      });
      var ptGraphic = new Graphic({
        geometry: pt,
        symbol: smsMarker
      });
      window.alert(pt.x + "," + pt.y);
      view.graphics.add(ptGraphic);
    }

//I also tried this, creating a graphicslayer, adding the graphic to it, and adding it to the map.  Same result

    function putPointOnMap() {
      var smsMarker = new SimpleMarkerSymbol({
        color: [255,0,0],
        outline: {
          color: [0,0,255],
          width:2
        }
      });
      var pt = new Point({
        x: currentX,
        y: currentY
      });
      var ptGraphic = new Graphic({
        geometry: pt,
        symbol: smsMarker
      });
      window.alert(pt.x + "," + pt.y);
      gLayer=new GraphicsLayer({});
      glayer.add(ptGraphic);
      map.add(gLayer);
    }

Thank you in advance for any help you may be able to provide.  I've checked everything over (syntax, capital letters, etc) and cannot find what the issue is.

Jeff

[JeffSauder]

Actually disregard the console errors.  I had added the line "view.graphics.add(pt);" to the click event handler while I was testing this, and forgot to remove it.  So I don't get the errors now, but I still don't get any graphics on the map view either.

[KellyHutchins · Accepted solution]

You shouldn't need to convert the screen point to a map point. The event argument on view.click gives you access to the mapPoint as well as the x,y coords of the screen point. Have you tried just adding the map point? Here's an example: 

                view.on("click", function (event) {
                    var point = new Point(event.mapPoint);
                    var markerSymbol = new SimpleMarkerSymbol({
                        color: [226, 119, 40],
                        outline: {
                            color: [255, 255, 255],
                            width: 2
                        }
                    });
                    var graphic = new Graphic({
                        geometry: point,
                        symbol: markerSymbol
                    });
                    view.graphics.add(graphic);
                });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[JeffSauder]

Hi Kelly,

That did the trick.  I didn't realize I could get the mappoint directly (nothing in the help or samples showed that), not only does it work but the code is much more readable.

Thank you,

Jeff

[KenBuja]

Hi Jeff,

If you look at the documentation for the click event on the view, you'll see that one of the properties that is returned is the mapPoint

mapPoint Point

The point location of the click on the view in the spatial reference of the map.

[JeffSauder]

I have one other question related to this, even though the click point item is fixed.  I'm trying to use these to create a polygon, again using ESRI's examples.  Is there a way to use the points themselves for rings? All the examples show x,y values, but just like the issue I had with creating a point (using x,y instead of the actual point), the polygon doesn't draw either. I'm using the code below:

    function putPolyOnMap() {
      var sfsFill = new SimpleFillSymbol({
        color: [0,255,0],
        outline: {
          color: [255,0,0],
          width: 2
        }
      });
      var pRings="[";
      for (i=0;i<ptCount;i++) {
        pRings+="[" + ptColl.x + "," + ptColl.y + "]";
        if (i<ptCount-1) { pRings+=","; }
      }
      pRings+="]";
      console.log(pRings);
      var drPoly = new Polygon({
        rings: pRings
      });
      var polyGraphic = new Graphic({
        geometry: drPoly,
        symbol: sfsFill
      });
      view.graphics.add(polyGraphic);
    }
  });

The pRings variable that I create in the loop looks like below (per ESRI's examples, that should be in the correct format).

[[750438.3639322834,850683.6201172402],[760204.0084635726,845475.2763672194],[751848.9570312474,842654.0901692914],[745881.0631510153,845475.2763672194]]

Thank you again for any help you can provide.

Jeff