Hi All
I am creating a map and the map must not allow multiple pins to be dropped for an application. Map must remove old pin if pin dropped in new location, and update the coordinates from the old values. Is there a way to do that?. Please see code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>DEA GIS APPLICATION</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 {
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]
});
var symbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "circle",
color: "blue",
size: "8px", // pixels
outline: { // autocasts as new SimpleLineSymbol()
color: [ 255, 255, 0 ],
width: 1 // points
}
};
const sketch = new Sketch({
layer: layer,
view: view,
symbol: symbol,
availableCreateTools: ["point"]
});
view.ui.add(sketch, "top-right");
sketch.on('create', function(evt){
if(view.zoom >= 11)
{
evt.graphic.symbol.color = "blue";
console.log("X = ", evt.graphic.geometry.x);
console.log("Y = ", evt.graphic.geometry.y);
}
else
{
alert("please zoom in");
evt.graphic.layer.remove(evt.graphic);
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Solved! Go to Solution.
Try this then:
sketch.on('create', function (evt) {
if (view.zoom >= 11) {
let gra = evt.graphic.clone();
evt.graphic.layer.removeAll();
gra.symbol.color = "blue";
gra.layer.add(gra);
console.log("X = ", gra.geometry.x);
console.log("Y = ", gra.geometry.y);
} else {
alert("please zoom in");
evt.graphic.layer.remove(evt.graphic);
}
});
Something like this. Clone the graphic first then remove all the graphics from the layer then add the cloned graphic in your code.
sketch.on('create', function (evt) {
if (view.zoom >= 11) {
let gra = evt.graphic.clone();
evt.graphic.layer.removeAll();
gra.symbol.color = "blue";
layer.add(gra);
console.log("X = ", gra.geometry.x);
console.log("Y = ", gra.geometry.y);
} else {
alert("please zoom in");
evt.graphic.layer.remove(evt.graphic);
}
});
Hi Robert Scheitlin, GISP
Thank you very much. I works on perfectly. But as soon as I try it on Visual Studio, I can no longer drop pins, instead, when I go to the console, I get this error:
CreateOrEditApplication:209 Uncaught ReferenceError: layer is not defined
at Object.<anonymous> (CreateOrEditApplication:209)
at VM8 dojo.js:605
at Array.forEach (<anonymous>)
at a.emit (VM8 dojo.js:605)
at Object.b.emit (VM8 dojo.js:608)
at Object.<anonymous> (VM8 dojo.js:2098)
at VM8 dojo.js:605
at Array.forEach (<anonymous>)
at a.emit (VM8 dojo.js:605)
at Object.b.emit (VM8 dojo.js:608)
Best Regards
Siyabonga Kubeka
Try this then:
sketch.on('create', function (evt) {
if (view.zoom >= 11) {
let gra = evt.graphic.clone();
evt.graphic.layer.removeAll();
gra.symbol.color = "blue";
gra.layer.add(gra);
console.log("X = ", gra.geometry.x);
console.log("Y = ", gra.geometry.y);
} else {
alert("please zoom in");
evt.graphic.layer.remove(evt.graphic);
}
});
Hi Robert Scheitlin, GISP
Thank you very much, it works.