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

404
3
Jump to solution
08-08-2019 09:36 PM
Highlighted
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.

Reply
0 Kudos
1 Solution

Accepted Solutions
Highlighted
MVP Esteemed Contributor

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

Reply
0 Kudos
3 Replies
Highlighted
MVP Esteemed Contributor

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

Reply
0 Kudos
Highlighted
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...

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

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

Reply
0 Kudos