topic Re: Click on the map to get value of longitude/latitude in ArcGIS JavaScript Maps SDK Questions

Click on the map to get value of longitude/latitude

StacieT_ — Mon, 17 Jun 2019 07:32:13 GMT

Hi,

Is there anyways to get the value of longitude/latitude when click on the map?

I want the value to be display on input textbox. Is it possible to do that?

Below is my code:

require([
       "esri/Map",
       "esri/views/MapView",
       "esri/Graphic"
    ], function(Map,
       MapView, Graphic) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [110.36402943937549,1.5128959885365645], // longitude, latitude
        zoom: 18
      });

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

    });

Thank you so much!

Regards,

Stacie

Re: Click on the map to get value of longitude/latitude

Egge-Jan_Pollé — Sat, 11 Dec 2021 12:16:41 GMT

Hi Stacie,

What do you think about the code below?

I modified this sample to make your map clickable:

Intro to popups | ArcGIS API for JavaScript 4.11

When you click in your map you will not only retrieve the coordinates but also an address (when available).

Please let me know what you think 🙂

Cheers,

Egge-Jan

<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, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    #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"
    ], function(Locator, Map, MapView, Graphic) {

      // Set up a locator task using the world geocoding service
      var locatorTask = new Locator({
        url:
          "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
      });

      var map = new Map({
        basemap: "topo-vector"
      });

      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
          var lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
          var lon = Math.round(event.mapPoint.longitude * 1000) / 1000;

          view.popup.open({
            // Set the popup's title to the coordinates of the location
            title: "Reverse geocode: [" + lon + ", " + lat + "]",
            location: event.mapPoint // Set the location of the popup to the clicked location
          });

          document.getElementById("instruction").innerHTML = "Lon: " + lon + " / Lat: " + lat; 

          // Display the popup
          // Execute a reverse geocode using the clicked location
          locatorTask
            .locationToAddress(event.mapPoint)
            .then(function(response) {
              // If an address is successfully found, show it in the popup's content
              view.popup.content = response.address;
            })
            .catch(function(error) {
              // If the promise fails and no result is found, show a generic message
              view.popup.content = "No address was found for this location";
            });
        });
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
  <div id="instruction">
    Click on the map to retrieve coordinates and address
  </div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Click on the map to get value of longitude/latitude

StacieT_ — Mon, 17 Jun 2019 09:15:40 GMT

Hi Egge-Jan,

Yes, this is what I want. But can it be on textbox (value of longitude and latitude) instead of popup message?

Thanks,

Stacie

Re: Click on the map to get value of longitude/latitude

Egge-Jan_Pollé — Mon, 17 Jun 2019 09:41:59 GMT

Hi Stacie T.,

Of course you can! The moment you have these values (i.e. lon and lat) you can do anything you want with them... 🙂

I have modified the code above by adding a line (line 92), to show the values in the "instruction" div:

document.getElementById("instruction").innerHTML = "Lon: " + lon + " / Lat: " + lat;

Is this what you need?

Egge-Jan

Re: Click on the map to get value of longitude/latitude

StacieT_ — Tue, 18 Jun 2019 01:05:53 GMT

Hi Egge-Jan Pollé,

Yes. Thank you so much! This is what I want.

Is it possible to make the marker follow whenever click on the map?

Regards,

Stacie

Re: Click on the map to get value of longitude/latitude

Egge-Jan_Pollé — Sat, 11 Dec 2021 12:16:44 GMT

Hi Stacie T.,

You told me that you already found a solution for this last question about the marker following your clicks on the map.

Below I publish the code of my solution anyway, so you can compare it with yours.

The idea is simple:

First create a Graphic without geometry
Then add this 'invisible' Graphic to the MapView
Redefine the geometry of your Graphic with every click

Does this match your solution?

BR,

Egge-Jan

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: point on the map</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    #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"
    ], function(Locator, Map, MapView, Graphic) {

      // Set up a locator task using the world geocoding service
      var locatorTask = new Locator({
        url:
          "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
      });

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [110.36402943937549,1.5128959885365645], // longitude, latitude
        zoom: 18
      });
      
       view.ui.add("instruction", "bottom-left");

      var simpleMarkerSymbol = {
        type: "simple-marker",
        color: [226, 119, 40],  // orange
        outline: {
          color: [255, 255, 255], // white
          width: 1
        }
      };

      //create a Graphic without geometry - this will be set later
      var pointOnTheMap = new Graphic({
        symbol: simpleMarkerSymbol
      });

      // add the 'invisible' Graphic to the MapView
      view.graphics.add(pointOnTheMap);
        /*******************************************************************
         * 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
          var longitude = event.mapPoint.longitude;
          var latitude = event.mapPoint.latitude;
          // Round the coordinates for visualization purposes
          var lon = Math.round(longitude * 1000) / 1000;
          var lat = Math.round(latitude * 1000) / 1000;
   
          var point = {
           type: "point",
           longitude: longitude, // Please make sure to use the unrounded values
           latitude: latitude    // otherwise your point will appear in the wrong spot
         };

          pointOnTheMap.geometry = point;

          view.popup.open({
            // Set the popup's title to the coordinates of the location
            title: "Reverse geocode: [" + longitude + ", " + latitude + "]",
            location: event.mapPoint // Set the location of the popup to the clicked location
          });

          document.getElementById("instruction").innerHTML = "Lon: " + lon + " / Lat: " + lat; 
          // Display the popup
          // Execute a reverse geocode using the clicked location
          locatorTask
            .locationToAddress(event.mapPoint)
            .then(function(response) {
              // If an address is successfully found, show it in the popup's content
              view.popup.content = response.address;
            })
            .catch(function(error) {
              // If the promise fails and no result is found, show a generic message
              view.popup.content = "No address was found for this location";
            });
        });
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
  <div id="instruction">
    Click on the map to retrieve coordinates and address
  </div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍