how get lat/lng from basic search javascript? ref: https://developers.arcgis.com/javascript/jssamples/search_basic.html

CloudingSoft · ‎03-19-2016

RobertScheitlin__GISP · ‎03-20-2016

Fabien,

Here is a sample for that:

<!DOCTYPE html>
<html dir="ltr">


<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>ArcGIS API for JavaScript | Basic Search</title>
   <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/themes/calcite/dijit/calcite.css">
   <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/themes/calcite/esri/esri.css">
   <style>
      html,
      body,
      #map {
         height: 100%;
         width: 100%;
         margin: 0;
         padding: 0;
      }
      #search {
         display: block;
         position: absolute;
         z-index: 2;
         top: 20px;
         left: 74px;
      }
   </style>
   <script src="https://js.arcgis.com/3.16/"></script>
   <script>
      require([


        "esri/map",
        "esri/dijit/Search",
        "esri/geometry/webMercatorUtils",
        "dojo/domReady!"


      ], function (Map, Search, webMercatorUtils) {
         var map = new Map("map", {
            basemap: "gray",
            center: [-120.435, 46.159], // lon, lat
            zoom: 7
         });


         var search = new Search({
            map: map
         }, "search");
         search.startup();


        search.on('select-result', function(result){
          console.info(result.result.feature.geometry);
          web = webMercatorUtils.webMercatorToGeographic(result.result.feature.geometry);
          console.info("Lat: " + web.y +", Lon: " + web.x);
        });


      });
   </script>
</head>


<body class="calcite">
   <div id="search"></div>
   <div id="map"></div>
</body>


</html>

View solution in original post

RobertScheitlin__GISP · ‎03-20-2016

Fabien,

Here is a sample for that:

<!DOCTYPE html>
<html dir="ltr">


<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>ArcGIS API for JavaScript | Basic Search</title>
   <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/themes/calcite/dijit/calcite.css">
   <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/themes/calcite/esri/esri.css">
   <style>
      html,
      body,
      #map {
         height: 100%;
         width: 100%;
         margin: 0;
         padding: 0;
      }
      #search {
         display: block;
         position: absolute;
         z-index: 2;
         top: 20px;
         left: 74px;
      }
   </style>
   <script src="https://js.arcgis.com/3.16/"></script>
   <script>
      require([


        "esri/map",
        "esri/dijit/Search",
        "esri/geometry/webMercatorUtils",
        "dojo/domReady!"


      ], function (Map, Search, webMercatorUtils) {
         var map = new Map("map", {
            basemap: "gray",
            center: [-120.435, 46.159], // lon, lat
            zoom: 7
         });


         var search = new Search({
            map: map
         }, "search");
         search.startup();


        search.on('select-result', function(result){
          console.info(result.result.feature.geometry);
          web = webMercatorUtils.webMercatorToGeographic(result.result.feature.geometry);
          console.info("Lat: " + web.y +", Lon: " + web.x);
        });


      });
   </script>
</head>


<body class="calcite">
   <div id="search"></div>
   <div id="map"></div>
</body>


</html>

CloudingSoft · ‎03-20-2016

Excelent!

how get more info for webMercatorUtils in API Javascript?

RobertScheitlin__GISP · ‎03-20-2016

Fabien,

Sure here is the link to the API doc for that:

esri/geometry/webMercatorUtils | API Reference | ArcGIS API for JavaScript

CloudingSoft · ‎03-20-2016

ok.

question:

$("#search_input").attr("value","Chile"); //update new data input OK

$(".searchSubmit").click(); // ERROR IN INPUT search_input; "Introduce un término de búsqueda."

i need update map, how do?

OR update map from lat/log with javascrips?

RobertScheitlin__GISP · ‎03-20-2016

Fabien,

Just do this (line 14 and 15):

         var search = new Search({
            map: map
         }, "search");
         search.startup();

        search.on('select-result', function(result){
          console.info(result.result.feature.geometry);
          web = webMercatorUtils.webMercatorToGeographic(result.result.feature.geometry);
          console.info("Lat: " + web.y +", Lon: " + web.x);
        });

        search.set("value", "Chile");
        search.search();

CloudingSoft · ‎03-20-2016

ok, but I need an external function

function updateMap(){

search.set("value", "Chile"); //here "search" is UNDEFINED

search.search();

}

RobertScheitlin__GISP · ‎03-20-2016

Fabien,

Here is an updated sample:

<!DOCTYPE html>
<html dir="ltr">

<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>ArcGIS API for JavaScript | Basic Search</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/themes/calcite/dijit/calcite.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/themes/calcite/esri/esri.css">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #search {
      display: block;
      position: absolute;
      z-index: 2;
      top: 20px;
      left: 74px;
    }

    .btnClass {
      display: block;
      position: absolute;
      z-index: 2;
      top: 60px;
      left: 74px;
    }
  </style>
  <script src="https://js.arcgis.com/3.16/"></script>
  <script>
    var search, map;
    require([

        "esri/map",
        "esri/dijit/Search",
        "esri/geometry/webMercatorUtils",
        "dojo/on",
        "dijit/registry",
        "dojo/parser",
        "dijit/form/Button",
        "dojo/domReady!"

      ], function (Map, Search, webMercatorUtils, on, registry, parser) {
      parser.parse();
      map = new Map("map", {
        basemap: "gray",
        center: [-120.435, 46.159], // lon, lat
        zoom: 7
      });

      search = new Search({
        map: map
      }, "search");
      search.startup();

      search.on('select-result', function (result) {
        console.info(result.result.feature.geometry);
        web = webMercatorUtils.webMercatorToGeographic(result.result.feature.geometry);
        console.info("Lat: " + web.y + ", Lon: " + web.x);
      });

      function updateMap() {
        search.set("value", "Chile");
        search.search();
      }
      on(registry.byId('ButtonNode'), "click", updateMap);

    });
  </script>
</head>

<body class="calcite">
  <div id="search"></div>
  <button id="ButtonNode" data-dojo-type="dijit/form/Button" class="btnClass">Search...</button>
  <div id="map"></div>
</body>

</html>

CloudingSoft · ‎03-20-2016

very very good!

thank you very much!