How to get Search Widget response's lat long in ArcGIS API for Javascript?

PatrickO_Meara · ‎04-03-2019

How would I retrieve the lat/long of the city/location selected using the Search Widget? I do not need to display this location on a map (in fact, I need to add the lat/long as URL parameters to a redirected page). All examples I have so far come across attach the Widget to a SceneView or Mapview. Thanks!

RobertScheitlin__GISP · ‎04-04-2019

So you are wanting to use the Search widget without a view?

PatrickO_Meara · ‎04-04-2019

Correct. I require only the lat/long of the selected city which I believe may require "findAddressCandidates" in addition to the "suggest" service used by the widget. But in any case, I do not need a map displayed or the selected city to be zoomed to within a map, only the lat/long coordinates of the selected city.

RobertScheitlin__GISP · ‎04-04-2019

Patrick,

Here is a sample that shows that:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Query State Info without Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.11/"></script>
    <script>
      require([
        "dojo/dom", "dojo/on",
        "esri/widgets/Search",
        "dojo/domReady!"
      ], function (dom, on, Search) {

        var searchWidget = new Search({});

        on(dom.byId("execute"), "click", execute);

        function execute () {;
          searchWidget.on('search-complete', function(result){
            if(result.results && result.results.length > 0 && result.results[0].results && result.results[0].results.length > 0){
              var geom = result.results[0].results[0].feature.geometry;
              console.info(geom);
              dom.byId("info").innerHTML = geom.latitude + ", " + geom.longitude;
            }else{
              dom.byId("info").innerHTML = "No Results found";
            }
          });
          searchWidget.search(dom.byId("stateName").value);
        }
      });
    </script>
  </head>

  <body>
    US state name :
    <input type="text" id="stateName" value="California">
    <input id="execute" type="button" value="Search">
    <br />
    <br />
    <div id="info" style="padding:5px; margin:5px; background-color:#eee;">
    </div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

PatrickO_Meara · ‎04-04-2019

Thanks Robert! Question though - how would I make the search widget (without a view) use the "suggest" service first? We require a view-less search widget to first provide suggestions of matching city/locations, and then need to invoke findAddressCandidates on the specific city chosen.

RobertScheitlin__GISP · ‎04-05-2019

Patrick,

When you say without a view...? My sample does not use a View (in the JS API concept of a View). Are you perhaps meaning to say no UI?

PatrickO_Meara · ‎04-05-2019

Correct - there is no view, which is great. What we additionally require is for the search widget to provide suggestions as one types in the name of a City (similar to how the widget behaves here: https://developers.arcgis.com/javascript/latest/sample-code/widgets-search-3d/index.html). Once the city has been selected from the list of suggestions, then we require the lat/long of the selected city to be displayed (as your sample code is doing).

RobertScheitlin__GISP · ‎04-05-2019

Then this is what you are after:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Query State Info without Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.11/"></script>
    <script>
      require([
        "dojo/dom", "dojo/on",
        "esri/widgets/Search",
        "dojo/domReady!"
      ], function (dom, on, Search) {

        var searchWidget = new Search({
          container: "searchDiv"
        });
        searchWidget.on('search-complete', function(result){
          if(result.results && result.results.length > 0 && result.results[0].results && result.results[0].results.length > 0){
            var geom = result.results[0].results[0].feature.geometry;
            console.info(geom);
            dom.byId("info").innerHTML = geom.latitude + ", " + geom.longitude;
          }else{
            dom.byId("info").innerHTML = "No Results found";
          }
        });
      });
    </script>
  </head>

  <body>
    <div id="searchDiv"></div>
    <br />
    <br />
    <div id="info" style="padding:5px; margin:5px; background-color:#eee;">
    </div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍