Coordinates conversion in capture mode

DesarrolloGIS · ‎06-20-2023

Best regards.
I am using the coordinate conversion widget.
You may know that the widget has a capture mode that takes the coordinate when you click on the map. I need to implement some logic when that action is performed. Specifically, I need to display the coordinates in a <span> tag right after the map is clicked. Only at that time I need to see the coordinates, does anyone know how I can achieve that?

mleahy_cl · ‎06-21-2023

Hi @DesarrolloGIS,

The 'currentLocation' property of the widget is watchable, so you can do something whenever it changes:

For example (slightly modified from the widget's sandbox sample code):

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1,user-scalable=no"
    />
    <title>
      CoordinateConversion widget | Sample | ArcGIS Maps SDK for JavaScript 4.27
    </title>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
    />
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
    </style>
    <script src="https://js.arcgis.com/4.27/"></script>
    <script>
      require([
        "esri/views/MapView",
        "esri/widgets/CoordinateConversion",
        "esri/Map"
      ], (MapView, CoordinateConversion, Map) => {
        const map = new Map({
          basemap: "topo-vector"
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-117.049, 34.485],
          zoom: 12
        });

        const ccWidget = new CoordinateConversion({
          view: view
        });
        
        ccWidget.watch('currentLocation', location => console.log(location.x, location.y));

        view.ui.add(ccWidget, "bottom-left");
      });
    </script>
  </head>

  <body class="calcite">
    <div id="viewDiv"></div>
  </body>
</html>

Note the line near the end (ccWidget.watch(...))

(PS: in the callback to that watch(), you might be more interested in the ccWidget.conversions property to find the coordinates that are actually converted/displayed - the same approach will work though...when currentLocation changes, update your displayed coordinates either from the widget's currentLocation, or its conversions)

View solution in original post

mleahy_cl · ‎06-21-2023

Hi @DesarrolloGIS,

The 'currentLocation' property of the widget is watchable, so you can do something whenever it changes:

For example (slightly modified from the widget's sandbox sample code):

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1,user-scalable=no"
    />
    <title>
      CoordinateConversion widget | Sample | ArcGIS Maps SDK for JavaScript 4.27
    </title>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
    />
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
    </style>
    <script src="https://js.arcgis.com/4.27/"></script>
    <script>
      require([
        "esri/views/MapView",
        "esri/widgets/CoordinateConversion",
        "esri/Map"
      ], (MapView, CoordinateConversion, Map) => {
        const map = new Map({
          basemap: "topo-vector"
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-117.049, 34.485],
          zoom: 12
        });

        const ccWidget = new CoordinateConversion({
          view: view
        });
        
        ccWidget.watch('currentLocation', location => console.log(location.x, location.y));

        view.ui.add(ccWidget, "bottom-left");
      });
    </script>
  </head>

  <body class="calcite">
    <div id="viewDiv"></div>
  </body>
</html>

Note the line near the end (ccWidget.watch(...))

(PS: in the callback to that watch(), you might be more interested in the ccWidget.conversions property to find the coordinates that are actually converted/displayed - the same approach will work though...when currentLocation changes, update your displayed coordinates either from the widget's currentLocation, or its conversions)

DesarrolloGIS · ‎06-22-2023

//Variables._self._view   is the reference to the map view
//coordinate_convers      is the widget instance
handlerViewClick = Variables._self._view.on('immediate-click', async (event) => {
      mapHasBeenClicked = true
    });

    coordinate_convers.watch('currentLocation', (location) => {
      const { mode, currentLocation } = coordinate_convers;

      if (mode === 'capture' && currentLocation && mapHasBeenClicked) {
          const { longitude, latitude } = location;
          const coordinates = `${longitude}, ${latitude}`;

          if (checkedOptionDecimal && checkedOptionDecimal.checked) {
              selectSRS.selectedIndex = 7;
              boxForInputCoordinate.value = coordinates;
          } else {
              const formattedCoordinates = WGS_84_SEXAGESIMAL.conversionInfo.convert(location);
              setFormattedCoordinates(formattedCoordinates.coordinate);
          }
      }
    });

I have added a couple of validations but in the end I have achieved what I was looking for with the widget. Thank you very much for your help.