How to disable multiple pin-drips per session?

193
4
Jump to solution
03-04-2020 04:18 AM
SiyabongaKubeka
Occasional Contributor

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>

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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);
}
});

View solution in original post

4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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);
}
});
SiyabongaKubeka
Occasional Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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);
}
});

View solution in original post

SiyabongaKubeka
Occasional Contributor

Hi Robert Scheitlin, GISP

Thank you very much, it works.

0 Kudos