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

1686
3
Jump to solution
08-08-2019 09:36 PM
GISMentor
New Contributor

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.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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

0 Kudos
3 Replies
RobertScheitlin__GISP
MVP Emeritus

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
GISMentor
New Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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

0 Kudos