I've already have a script with the function but the problem now is adding the function to a button.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: click on the map</title>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#viewDiv {
padding: 0;
margin: 0;
height: 80%;
width: 60%;
}
#instruction {
padding: 15px;
background: white;
color: black;
border: 5px solid gold;
font-family: sans-serif;
font-size: 1.2em;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/tasks/Locator",
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/widgets/Locate"
], function(Locator, Map, MapView, Graphic, Locate) {
var map = new Map({
basemap: "hybrid"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [110.36402943937549,1.5128959885365645], // longitude, latitude
zoom: 18
});
view.ui.add("instruction", "bottom-left");
var point = {
type: "point",
longitude: 110.36402943937549,
latitude: 1.5128959885365645
};
var simpleMarkerSymbol = {
type: "simple-marker",
color: [226, 119, 40], // orange
outline: {
color: [255, 255, 255], // white
width: 1
}
};
var pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol
});
view.graphics.add(pointGraphic);
/*******************************************************************
* This click event sets generic content on the popup not tied to
* a layer, graphic, or popupTemplate. The location of the point is
* used as input to a reverse geocode method and the resulting
* address is printed to the popup content.
*******************************************************************/
//view.popup.autoOpenEnabled = false;
view.on("click", function(event) {
// Get the coordinates of the click on the view
//view.graphics.clear();
view.graphics.removeAll();
var lat = event.mapPoint.latitude * 1000 / 1000;
var lon = event.mapPoint.longitude * 1000 / 1000;
document.getElementById("instruction2").value = lon + ", " + lat;
view.graphics.add(new Graphic(event.mapPoint, simpleMarkerSymbol));
});
var locate = new Locate({
view: view,
useHeadingEnabled: false,
goToOverride: function(view, options) {
options.target.scale = 1500; // Override the default map scale
return view.goTo(options.target);
}
});
view.ui.add(locate, "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="instruction">
Click on the map to retrieve coordinates and address
</div>
<input type="text" id="instruction2" value="">
</body>
</html>
