Hi all,
I want to use Sketch for users to update graphics on many different layers, without having to prior select layer.
I have supposed that I could programmatically achieve layer selection.
So I create a sketchObject without layer property :
const sketchObject = new Sketch({
view: view,
creationMode: "update"
});
And then on hittest of graphics click, I retrieve graphic's layer and assign it to the sketchObject.
This work fine, But I need click twice time on same graphic if I come from a different layer to have graphic selected.
What is expected is that graphic is selected at first click. It is not and I could not figure out what function would select programmatically the graphic ?
Chris, Regards
Here is the entire code:
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Sketch widget | Sample | ArcGIS API for JavaScript 4.19</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.19/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.19/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/widgets/Sketch",
"esri/Map",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"esri/geometry/support/webMercatorUtils",
"esri/views/MapView"
], (Sketch, Map, GraphicsLayer, Graphic, webMercatorUtils, MapView) => {
//const graphicsLayer = new GraphicsLayer();
//-------------------------
// GraphicsLayer to hold graphics created via sketch view model
const graphicsLayer = new GraphicsLayer({
id: "tempGraphics"
});
const graphicsLayer2 = new GraphicsLayer({
id: "tempGraphics2"
});
var p1 = {
type: "point", // autocasts as new Point()
longitude: -121.5,
latitude: 38.555
};
var p2 = {
type: "point", // autocasts as new Point()
longitude: -121.55,
latitude: 38.555
};
var pA = {
type: "point", // autocasts as new Point()
longitude: -121.5,
latitude: 38.6
};
var pB = {
type: "point", // autocasts as new Point()
longitude: -121.55,
latitude: 38.6
};
var markerSymbol = {
type: "picture-marker", // autocasts as new PictureMarkerSymbol()
url:
"https://daraobeirne.github.io/kisspng-drawing-pin-world-map-logo-push-vector-5ae029f6ddeaf4.198342921524640246909.png",
width: "30px",
height: "30px"
};
var pointGraphic1 = new Graphic({
geometry: webMercatorUtils.geographicToWebMercator(p1),
symbol: markerSymbol,
id: "g1"
});
var pointGraphic2 = new Graphic({
geometry: webMercatorUtils.geographicToWebMercator(p2),
symbol: markerSymbol,
id: "g2"
});
var pointGraphicA = new Graphic({
geometry: webMercatorUtils.geographicToWebMercator(pA),
symbol: markerSymbol,
id: "gA"
});
var pointGraphicB = new Graphic({
geometry: webMercatorUtils.geographicToWebMercator(pB),
symbol: markerSymbol,
id: "gB"
});
const map = new Map({
basemap: "topo-vector",
layers: [graphicsLayer, graphicsLayer2]
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-121.5, 38.555],
zoom: 11
});
var isUpdating = false;
var mustSwitchToUpdate = true;
view.when(() => {
graphicsLayer.graphics.add(pointGraphic1);
graphicsLayer.graphics.add(pointGraphic2);
graphicsLayer2.graphics.add(pointGraphicA);
graphicsLayer2.graphics.add(pointGraphicB);
const sketchObject = new Sketch({
view: view,
creationMode: "update"
});
view.ui.add(sketchObject, "top-right");
view.on("click", function(ev) {
const opts = {
};
view.hitTest(ev, opts).then(function (response) {
if (response.results.length) {
// check if a feature is returned from the aimed layers
const graphic = response.results[0].graphic;
if (graphic.id == "g1" || graphic.id == "g2") {
sketchObject.layer = graphicsLayer;
sketchObject.update( graphic );
} else if (graphic.id == "gA" || graphic.id == "gB") {
sketchObject.layer = graphicsLayer2;
sketchObject.update( graphic );
}
}
});
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
