Hi,
I am using Sketch Widget to create point on map.
Is there any way to allow user create only ONE point using Sketch?
Solved! Go to Solution.
Magdelena,
Sure here is a sample for that. (Updated based on Undral's suggestion)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Sketch widget - 4.15</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/"></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/views/MapView"
], function(Sketch, Map, GraphicsLayer, MapView) {
const layer = new GraphicsLayer();
const map = new Map({
basemap: "streets",
layers: [layer]
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 5,
center: [90, 45]
});
const sketch = new Sketch({
layer: layer,
view: view,
creationMode: "single"
});
view.ui.add(sketch, "top-right");
sketch.on('create', function(evt){
let pntCnt = 0, pntArr = [];
if(evt.state === 'complete' && evt.tool === 'point'){
sketch.layer.graphics.map(function(gra){
if(gra.geometry.type === 'point'){
pntCnt++;
if(pntCnt > 1){
pntArr.push(gra);
}
}
});
if(pntCnt > 1){
pntArr.map(function(pgra){
sketch.layer.remove(pgra);
})
alert('only one point is allowed');
}
}
})
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Magdelena,
Sure here is a sample for that. (Updated based on Undral's suggestion)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Sketch widget - 4.15</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/"></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/views/MapView"
], function(Sketch, Map, GraphicsLayer, MapView) {
const layer = new GraphicsLayer();
const map = new Map({
basemap: "streets",
layers: [layer]
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 5,
center: [90, 45]
});
const sketch = new Sketch({
layer: layer,
view: view,
creationMode: "single"
});
view.ui.add(sketch, "top-right");
sketch.on('create', function(evt){
let pntCnt = 0, pntArr = [];
if(evt.state === 'complete' && evt.tool === 'point'){
sketch.layer.graphics.map(function(gra){
if(gra.geometry.type === 'point'){
pntCnt++;
if(pntCnt > 1){
pntArr.push(gra);
}
}
});
if(pntCnt > 1){
pntArr.map(function(pgra){
sketch.layer.remove(pgra);
})
alert('only one point is allowed');
}
}
})
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Hi there,
There is a sample as Robert Scheitlin, GISP pointed out. The sample will let you create a point and will select it for an update operation once it is created. If you just want to create it then you can set the sketch.creationMode property to single. Please refer to the Sketch.creationMode for possible values you can set for it.
-Undral