api 4.11 - How to draw a ellipse? class' "draw.create('ellipse')" doesn't draw ellipse

GISMentor — Fri, 10 Dec 2021 20:26:40 GMT

am trying to draw ellipse using arcgis JS PI 4.11. but it seems there is no way to do it. In api 3.X user can draw ellipse interactivity on the map. we are migrating from 3.X to 4.11 Api and it seems implementation for ellipse is still not done in 4.11.

Code simplified for the example:

const action = draw.create('ellipse', {});

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

and

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

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

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

   mapView.graphics.add(graphic);
}

Can anyone help in by provide the guidance, workaround or ellipse code in 4.X api.

Re: api 4.11 - How to draw a ellipse? class' "draw.create('ellipse')" doesn't draw ellipse

RobertScheitlin__GISP — Fri, 10 Dec 2021 20:26:43 GMT

Devesh,

You have to do some math for this currently. It seems ellipse is not fully supported yet.

Note: some code borrowed from this thread: Create ellipse from json array.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Draw ellipse - 4.12</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.12/"></script>

    <style>
      html,
      body,
      #viewDiv {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/views/draw/Draw",
        "esri/Graphic"
      ], function(Map, MapView, Draw, Graphic) {
        const map = new Map({
          basemap: "gray"
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 16,
          center: [18.06, 59.34]
        });

        // add the button for the draw tool
        view.ui.add("ellipse-button", "top-left");

        const draw = new Draw({
          view: view
        });

        // draw polyline button
        document.getElementById("ellipse-button").onclick = function() {
          view.graphics.removeAll();

          // creates and returns an instance of EllipseDrawAction
          const action = draw.create("ellipse");

          // focus the view to activate keyboard shortcuts for sketching
          view.focus();
          action.on(
            [
              "draw-complete"
            ],
            checkIfValid
          );
        };

        function checkIfValid(event) {
          if (event.vertices.length > 1) {
            const result = createGraphic(event);
          }
        }

        // create a new graphic presenting the ellipse that is being drawn on the view
        function createGraphic(event) {
          var vs = event.vertices;
          var ring = [];
          var maxX, maxY, minX, minY;
          maxX = Math.max(vs[0][0],vs[1][0]);
          maxY = Math.max(vs[0][1],vs[1][1]);
          minX = Math.min(vs[0][0],vs[1][0]);
          minY = Math.min(vs[0][1],vs[1][1]);
          width = maxX-minX;
          height = maxY-minY;
          cX = maxX - (width/2);
          cY = maxY - (height/2);
          for (i = 0; i < 360; i++) {
            t = i * Math.PI / 180;
            x = cX - width / 2 * Math.cos(t);
            y = cY + height/ 2 * Math.sin(t);
            ring.push([x,y]);
          }
          ring.push(ring[0]);
          view.graphics.removeAll();

          // a graphic representing the ellipse that is being drawn
          const graphic = new Graphic({
            geometry: {
              type: "polygon",
              rings: [ring],
              spatialReference: view.spatialReference
            },
            symbol: {
              type: "simple-line",
              color: [4, 90, 141],
              width: 4,
              cap: "round",
              join: "round"
            }
          });

          view.graphics.add(graphic);
        }
      });
    </script>
  </head>

  <body>
    <div id="viewDiv">
      <div
        id="ellipse-button"
        class="esri-widget esri-widget--button esri-interactive"
        title="Draw ellipse"
      >
        <span class="esri-icon-checkbox-unchecked"></span>
      </div>
    </div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: api 4.11 - How to draw a ellipse? class' "draw.create('ellipse')" doesn't draw ellipse

RobertScheitlin__GISP — Thu, 22 Aug 2019 20:19:06 GMT

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

Re: api 4.11 - How to draw a ellipse? class' "draw.create('ellipse')" doesn't draw ellipse

GISMentor — Mon, 11 Nov 2019 04:43:24 GMT

Sir, ellipse is getting drawn , but i want to select it and resize it...

how to resize the ellipse after it got drawn??

is ellipse is a geometry of its a just graphic??

thanks , please help...

topic api 4.11 - How to draw a ellipse? class' "draw.create('ellipse')" doesn't draw ellipse in ArcGIS JavaScript Maps SDK Questions

api 4.11 - How to draw a ellipse? class' "draw.create('ellipse')" doesn't draw ellipse

Code simplified for the example:

Re: api 4.11 - How to draw a ellipse? class' "draw.create('ellipse')" doesn't draw ellipse

Re: api 4.11 - How to draw a ellipse? class' "draw.create('ellipse')" doesn't draw ellipse

Re: api 4.11 - How to draw a ellipse? class' "draw.create('ellipse')" doesn't draw ellipse