Community

Detect location by clicking a button

2193
4
Jump to solution
07-22-2019 11:36 PM
StacieT_
by
New Contributor II
‎07-22-2019 11:36 PM

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

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎07-23-2019 06:10 AM

Try this:

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

    #instruction2 {
      width: 60%;
      margin-top: 4px;
    }

    #getLocBtn {
      float: left;
      margin-top: 4px;
    }
  </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",
      "dojo/on"
    ], function (Locator, Map, MapView, Graphic, Locate, on) {



      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);
        }
      });

      on(document.getElementById("getLocBtn"), 'click', function(evt){
        locate.locate().then(function(evt){
          // Fires after the user's location has been found
          console.log(evt.position);
        }).otherwise(function(e){
          console.log(e);
        });
      });

      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=""><br/>
  <button id="getLocBtn">Get Location...</button>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

4 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎07-23-2019 05:24 AM

Stacie,

  So are you saying you only want the view click event to activate after the user presses a button?

0 Kudos
StacieT_
by
New Contributor II
‎07-23-2019 05:35 AM

Hi Robert Scheitlin, GISP‌,

Yes. I want exactly like the one that in my code but another new button. As you can see, the one that in my code is actually inside the map. I want another new button outside of the map. Is that possible to do it?

Like once I click that new button, it will show my current location on the map. 

Thanks, 

Stacie

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎07-23-2019 06:10 AM

Try this:

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

    #instruction2 {
      width: 60%;
      margin-top: 4px;
    }

    #getLocBtn {
      float: left;
      margin-top: 4px;
    }
  </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",
      "dojo/on"
    ], function (Locator, Map, MapView, Graphic, Locate, on) {



      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);
        }
      });

      on(document.getElementById("getLocBtn"), 'click', function(evt){
        locate.locate().then(function(evt){
          // Fires after the user's location has been found
          console.log(evt.position);
        }).otherwise(function(e){
          console.log(e);
        });
      });

      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=""><br/>
  <button id="getLocBtn">Get Location...</button>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
StacieT_
by
New Contributor II
‎07-23-2019 05:10 PM

Hi Robert Scheitlin, GISP‌,

It worked! Thank you so much! 🙂

Regards,

Stacie

0 Kudos