Detect location by clicking button

149
3
07-22-2019 11:28 PM
StacieT_
New Contributor II

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

0 Kudos
3 Replies
MatthewDriscoll
MVP Regular Contributor

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?

0 Kudos
SteveCole
Frequent Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor
0 Kudos