Detect location by clicking button

StacieT_ — Tue, 23 Jul 2019 06:28:59 GMT

Hi,

Is it possible to make a button to detect the location by clicking on it?

I've already have a script with the function but the problem now is adding the function to a button.

Is there anyone that can help me with this?

Below is the code:

<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>

Thank you!

Regards,

Stacie

Re: Detect location by clicking button

MatthewDriscoll — Tue, 23 Jul 2019 16:42:57 GMT

ArcGIS API for JavaScript‌

Mentioned a group which could probably help you better.

To clarify, do you mean you want to click a button first then click on the map to get the location?

Re: Detect location by clicking button

SteveCole — Wed, 24 Jul 2019 19:22:49 GMT

It's not clear if you want to get the location from where a user clicks on the map or you want to get the user's physical locaation in the work at the time they click your button. If the latter, HTML 5 has a geolocation API which can be used to get that information.

See this Stackoverflow question.

Re: Detect location by clicking button

RobertScheitlin__GISP — Wed, 24 Jul 2019 20:53:27 GMT

Duplicate of this thread: https://community.esri.com/thread/237301-detect-location-by-clicking-a-button

topic Re: Detect location by clicking button in ArcGIS JavaScript Maps SDK Questions

Detect location by clicking button

Re: Detect location by clicking button

Re: Detect location by clicking button

Re: Detect location by clicking button