How to stop a page from auto save after you have dropped a pin on an Esri Map?

57
0
03-18-2020 12:19 AM
SiyabongaKubeka
Occasional Contributor

I am working on an MVC project. I have integrated an Esri map in the view. Previously I could drop a pin on the map and get the coordinates and save them. But most recently, something went wrong, I do not know what it is. For some reason when I drop a pin on the map, a save even is triggered and it saves all the other data except the coordinates. It also closes the page. I have investigated, I cant pin point the problem. Please assist. Please see code to integrate the map on the view below:

<script type="text/javascript">
var latitude;
var longitude;
var zoomLevel;
require(["esri/views/MapView", "esri/WebMap", "esri/config", "esri/widgets/Sketch", "esri/layers/GraphicsLayer"],
function (MapView, WebMap, esriConfig, Sketch, GraphicsLayer) {
esriConfig.portalUrl = "https://portal.environment.gov.za/portal";
var webmap = new WebMap({
portalItem: {
id: "04582be14885483da48f29398960f653"
}
});
var graphicsLayer = new GraphicsLayer();
var view = new MapView({
map: webmap,
//zoom: 14,
container: "viewDiv"
});
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
}
};
webmap.layers.add(graphicsLayer);
var sketch = new Sketch({
layer: graphicsLayer,
view: view,
symbol: symbol,
creationMode: "update",
availableCreateTools: ["point"]
//container: "viewDiv"
});
view.ui.add(sketch, {
position: "top-right"
});
//Listen to sketch widget's create event.
sketch.on('create', function (event) {
// check if the create event's state has changed to complete indicating
// the graphic create operation is completed.
if (view.zoom >= 11) {
let gra = event.graphic.clone();
event.graphic.layer.removeAll();
gra.symbol.color = "red";
gra.layer.add(gra);
console.log(view.zoom);
console.log("X = ", gra.geometry.x);
console.log("Y = ", gra.geometry.y);
latitude = gra.geometry.x;
longitude = gra.geometry.y;
zoomLevel = view.zoom;
debugger;
} else {
alert("please zoom in");
event.graphic.layer.remove(event.graphic);
}
});
});

function saveCoordinates() {
debugger;
$("#lat").val(latitude);
$("#long").val(longitude);
};
</script>

How the map is added:

<div class="panel-body">
<div class="form-group">
<div id="viewDiv" style="position:relative; width:900px; height:600px; border:1px solid #000;"></div>
</div>
</div>‍‍‍‍‍

Then the save button:

<div class="form-group">
<div class="col-md-10"> <input type="submit" class="btn btn-primary" id="savebutton" value="Save"
onclick="validateForm(); saveCoordinates()" />
@Html.ActionLink("Cancel", "Index", "Application", null, new {
@class = "btn btn-primary", @id = "cancelbutton" }) </div>
</div>‍‍‍‍‍
0 Kudos
0 Replies