Is there a way to save the point that has been dropped on a map?

251
3
02-27-2020 02:41 AM
SiyabongaKubeka
Occasional Contributor

Hi, 

I am dropping point on a Esri map. I want to save those point so that when I re-open the map, I can see those dropped points or pins. Is there a way to do that? I am using JavaScript. Here is my 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>

0 Kudos
3 Replies
Egge-JanPollé1
MVP Regular Contributor

Hi Siyabonga Kubeka,

Did you already have a look at the Editor widget?

Editor | ArcGIS API for JavaScript 4.14 

This widget allows you to either add features or edit and/or delete existing features within an editable feature layer.

Would this work in your scenario?

BR,

Egge-Jan

Noah-Sager
Esri Regular Contributor

Two other options would be to use your browsers localStorage to persist the points, or use the applyEdits methods to add these points to a feature collection for later viewing.

BenElan
Esri Contributor

One last option is to download the points as a csv which you could load back into future applications. Here is a sample I made a while back that may be helpful: https://codepen.io/benesri/pen/ZEzyQNm