AnsweredAssumed Answered

4.8 - How to draw a circle with a specific radius ?

Question asked by Ettapp on Aug 8, 2018
Latest reply on Aug 8, 2018 by Ettapp

I try to create a simple Circle, taking example on the polygon drawing sample code:

Code simplified for the example:
const action = draw.create('circle', {});

action.on('vertex-add', (evt) => this.createCircleGraphic(evt));
action.on('cursor-update', (evt) => this.createCircleGraphic(evt));
action.on('draw-complete', (evt) => this.createCircleGraphic(evt));

and

function createCircleGraphic(event) {
   mapView.graphics.removeAll();

   const circle = new Circle({
      spatialReference: mapView.spatialReference,
     center: event.vertices[0],
   });

   const graphic = new Graphic({
      geometry: circle,
      symbol: // my symbol,
   });

   mapView.graphics.add(graphic);
}

But at first the circle was not visible (even at the maximum zoom).

By looking at the devtools, I saw that the extent's dimensions was smaller than 0.001 px...

I could make the circles appear by specifying a radius of 10'000'000 meters, which make me think that something is working wrong...

 

With the devtools I could see that right after instanciating the circle object, it's spatialReference was wrong.

I can reset it right after, and then it become ok, but I dont know if this has any link with the issue...

 

Did I miss something ?

Outcomes