AnsweredAssumed Answered

Graphics issue with 4.3 version (2d)

Question asked by gilbertgis on May 31, 2017
Latest reply on Jun 1, 2017 by gilbertgis
  • Comment • 5

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

khutchins-esristaff
khutchins-esristaff Employee Jun 1, 2017 9:17 AM
Correct Answer

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);
                });
See the reply in context
No one else had this question

Outcomes