So, I'm only able to create one graphic at a time. I was wondering if there is a way to allow the user to add multiple graphics on the map. I basically want the user to be able to add multiple graphics throughout the map using one point-button. Also, if the user decides to change the value for the buffer via slider, this should be applied to all the graphics
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.24/"></script>
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 20;
padding: 20;
}
.ext-box {
display: table;
width: 350px;
height: 100%;
}
.int-box {
display: table-cell;
vertical-align: top;
width: 340px;
height: 260px;
}
.FixedHeightContainer {
float: left;
height: 380px;
width: 230px;
padding: 3px;
background: rgb(112, 128, 144, 0.5);
}
.header {
height: 30px;
padding-top: 5px;
}
.geometryResultsdiv {
height: 345px;
overflow: auto;
background: #fff;
font-size: 8px;
}
.menu {
display: table;
width: 65%;
border: 1px solid black;
border-right: none;
box-sizing: border-box;
}
.menu>div {
display: table-row;
background-color: white;
}
.menu>div>div {
border-right: 1px solid black;
display: table-cell;
text-align: center;
vertical-align: middle;
}
@media screen and (max-width: 240px) {
.menu {
display: block;
float: left;
width: auto;
border: none;
}
.menu>div {
display: block;
}
.menu>div>div {
border: none;
padding-right: 10px;
display: block;
text-align: left;
}
}
.boxpadding {
padding: 0px 0px 5px 8px;
}
.float-container {
border: 3px solid #fff;
padding: 2px;
}
.float-child1 {
width: 40%;
float: left;
padding: 2px;
}
.float-child2 {
width: 25%;
float: left;
padding: 2px;
}
</style>
<script>
require([
"esri/Map", "esri/views/MapView", "esri/views/draw/Draw", "esri/Graphic", "esri/geometry/geometryEngine",
"esri/geometry/support/webMercatorUtils",
"esri/layers/GraphicsLayer",
"dojo/dom",
"dojo/domReady!"
], (Map, MapView, Draw, Graphic, geometryEngine, webMercatorUtils, GraphicsLayer, dom) => {
let blayer = new GraphicsLayer({
id: "layer",
});
blayer.opacity = 0.5;
const map = new Map({
basemap: "gray-vector",
layers: [blayer]
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 10,
center: [-77.367, 37.55]
});
const draw = new Draw({
view: view
});
document.getElementById("clear-button").onclick = () => {
view.graphics.removeAll();
blayer.removeAll();
};
document.getElementById("point-button").onclick = () => {
const action = draw.create("point");
view.focus();
action.on("cursor-update", function(evt) {
GraphicPoint(evt.coordinates);
});
action.on("draw-complete", function(evt) {
GraphicPoint(evt.coordinates);
});
};
function GraphicPoint(coordinates) {
view.graphics.removeAll();
let point = {
type: "point", // autocasts as /Point
x: coordinates[0],
y: coordinates[1],
spatialReference: view.spatialReference
};
const graphic = new Graphic({
geometry: point,
symbol: {
type: "simple-marker",
style: "circle",
color: [0, 0, 0, 0.5],
size: "9px",
},
});
view.graphics.add(graphic);
BufferGeom(graphic.geometry);
}
function BufferGeom(geom) {
var d = document.getElementById("distance");
const buffGeom = geometryEngine.geodesicBuffer(
geom,
d.value,
"kilometers"
);
const buffgra = new Graphic({
geometry: buffGeom,
symbol: {
type: "simple-fill",
color: [112, 128, 144, 0],
},
})
blayer.removeAll();
blayer.add(buffgra);
d.addEventListener('change', function (){
const buffGeom = geometryEngine.geodesicBuffer(
geom,
d.value,
"kilometers"
);
const buffgra = new Graphic({
geometry: buffGeom,
symbol: {
type: "simple-fill",
color: [112, 128, 144, 0],
},
})
blayer.removeAll();
blayer.add(buffgra);
})
}
view.ui.add('point-button', 'top-right')
view.ui.add('clear-button', 'top-right')
});
</script>
</head>
<body>
<div id="viewDiv">
<div class="ext-box">
<div class="int-box">
<h2 class="boxpadding">Buffer</h2>
<div class="float-container">
<div class="float-child2">
<div class="slider">
<label for="fader"> Distance</label>
<input
id="distance"
type="range"
value="3"
min="1"
max="10"
step="0.5"
oninput="this.nextElementSibling.value = this.value+'km'"
/>
<output>3km</output>
</div>
</div>
</div>
</br>
</br></br>
<div>
<div id="clear-button" class="esri-widget esri-widget--button esri-interactive" title="Clear Grpahics">
<span class="esri-icon-erase"></span>
</div>
<div id="point-button" class="esri-widget esri-widget--button esri-interactive" title="Draw point">
<span class="esri-icon-map-pin"></span>
</div>
</div>
</br>
</div> <!-- End of int box -->
</div> <!-- End of ent box -->
</div>
</body>
</html>
@Sage_Wall @UndralBatsukh @Gurunara @GreteSoosalu
