Getting “isWebMercator” Error When Trying To Draw a Circle On Graphics Layer

[BehrouzHosseini]

can you please take a look at this snippet and let me know why I am getting this Error message

Uncaught TypeError: Cannot read property 'isWebMercator' of undefined

from the Circle.js module?

var graphicsLayerPoint = new esri.layers.GraphicsLayer();   
map.addLayer(graphicsLayerPoint);

var graphicsLayerCircle = new esri.layers.GraphicsLayer();   
map.addLayer(graphicsLayerCircle);


$("#btnAddJunctionFlag").on("click", function () {
        toolbar = new Draw(map);
        toolbar.activate(Draw.POINT);
        map.hideZoomSlider();
        toolbar.on("draw-end", addToMap);

        function addToMap(evt) {
        circle = new Circle({
            center: evt.mapPoint,
            geodesic: true,
            radius: .6,
            radiusUnit: "esriMiles"
        });
    }
    var cgraphic = new Graphic(circle, circleSymb);
    graphicsLayerCircle.add(cgraphic);

    var pgraphic = new Graphic(evt.geometry, config.symbolPointJFlag);
    graphicsLayerPoint.add(pgraphic);
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Bengi,

   I am not seeing why you are getting that error, but line 24 in your code does not make any sense.

[BehrouzHosseini]

Thanks Rober,

it was a Typo there but what I am trying to do is Adding a Point into Map using Toolbar facility and also Drawing a Circle around it without using Toolbar Utility

[RobertScheitlin__GISP]

Bengi,

   Why are you trying to use the Draw toolbar and not just adding a map click event handler when the button is clicked and then in the handler add the circle as in this sample?

Create circles | ArcGIS API for JavaScript 3.22 

[BehrouzHosseini]

You are right but in this case I need to also display the Point Graphic on map so as you can see I have two graphics layer

[RobertScheitlin__GISP]

Bengi,

   There will be no problem doing that if you create two different graphics (as a graphic can only exist in one parent layer at a time).

[BehrouzHosseini]

Thanks again but please do not forget the 

$("#btnAddJunctionFlag").on("click", function () {});‍‍

 I am actually calling (enabling) this Point creation functionality on calling a DOM (here # btnAddJunctionFlag) and as you know this is different than

map.on("click", function(evt){})‍

Here is the code in more details

 toolbar = new Draw(map);
 toolbar.activate(Draw.POINT);
 toolbar.on("draw-end", addToMap);

 function addToMap(evt) {
   circle = new Circle({
   center: evt.mapPoint,
   geodesic: true,
   radius: .6,
   radiusUnit: "esriMiles"
 });

    var cgraphic = new Graphic(circle, circleSymb);
    graphicsLayerCircle.add(cgraphic);

    var pgraphic = new Graphic(evt.geometry, config.symbolPointJFlag);
    graphicsLayerPoint.add(pgraphic);
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Thanks and sorry for confusion

[RobertScheitlin__GISP]

Bengi,

   That is no problem. As mention in my previous reply you can just add the map on click handler inside the button click handler.

[BehrouzHosseini]

Sorry Robert I got confused! so you are saying I can add Point to map without using Draw toolbar AND with using 

$("#btnAddJunctionFlag").on("click", function () {});

 can you please let me know how?

[RobertScheitlin__GISP · Accepted solution]

Bengi,

   Simple, it would look like this:

$("#btnAddJunctionFlag").on("click", function () {‍
  if(clickEvtHandler){
    clickEvtHandler.remove();
  }
  clickEvtHandler = map.on("click", function(evt){
    circle = new Circle({
      center: evt.mapPoint,
      geodesic: true,
      radius: .6,
      radiusUnit: "esriMiles"
    });

    var cgraphic = new Graphic(circle, circleSymb);
    graphicsLayerCircle.add(cgraphic);

    var pgraphic = new Graphic(evt.mapPoint, config.symbolPointJFlag);
    graphicsLayerPoint.add(pgraphic);
  });
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Of course this would now work best using a dojo ToggleButton instead of a standard button:

dijit/form/ToggleButton — The Dojo Toolkit - Reference Guide