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

GISMentor · ‎08-08-2019

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.

RobertScheitlin__GISP · ‎08-09-2019

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎08-09-2019

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

GISMentor · ‎11-10-2019

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...

RobertScheitlin__GISP · ‎08-22-2019

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