Hi, I am trying to create a map with simple drawing and editing functionality.
I was able to draw shapes and then edit the shapes drawn using the Sketch widget.
However, i am not able to select/edit shapes drawn using graphics.add()
I do not have much experience working with arcgis so any help would be appreciated! thanks in advance!
Code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: click on the map</title>
<style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } #instruction { padding: 15px; background: white; color: black; border: 5px solid gold; font-family: sans-serif; font-size: 1.2em; } </style>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<script src="https://js.arcgis.com/4.20/"></script>
<script>
var list = [];
var func1 = null;
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/widgets/Sketch"], function mainFunc(Map, MapView, Graphic, GraphicsLayer, Sketch) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.805, 34.027], // longitude, latitude
zoom: 18
});
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
const sketch = new Sketch({
layer: graphicsLayer,
view: view,
creationMode: "update",
defaultUpdateOptions: {
tool: "move"
}
});
view.ui.add(sketch, "top-right");
view.ui.add("instruction", "bottom-left");
view.ui.add("button", "bottom-right");
function addPolygon(points){
// Create a polygon geometry
const polygon = {
type: "polygon",
rings: points
};
const simpleFillSymbol = {
type: "simple-fill",
color: [227, 139, 79, 0.8], // Orange, opacity 80%
outline: {
color: [255, 255, 255],
width: 1
}
};
const polygonGraphic = new Graphic({
geometry: polygon,
symbol: simpleFillSymbol,
});
graphicsLayer.add(polygonGraphic);
}
function drawPoints(){
var name = 'Polygon';
var desc = 'Desc';
addPolygon(list, name, desc);
}
var pts = [
[-118.818984489994, 34.0137559967283], //Longitude, latitude
[-118.806796597377, 34.0215816298725], //Longitude, latitude
[-118.791432890735, 34.0163883241613], //Longitude, latitude
[-118.79596686535, 34.008564864635], //Longitude, latitude
[-118.808558110679, 34.0035027131376] //Longitude, latitude
]
addPolygon(pts)
view.on("click", function(event) { // Get the coordinates of the click on the view
var lat = event.mapPoint.latitude;
var lon = event.mapPoint.longitude;
list = [lon, lat];
document.getElementById("instruction").innerHTML = list;
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="instruction"> Click on the map to retrieve coordinates and address </div>
<button id="button">Remove points</button>
</body>
</html>
