topic Re: js api: Is there a way to trigger the geocoder widget to search autmatically in ArcGIS JavaScript Maps SDK Questions

js api: Is there a way to trigger the geocoder widget to search autmatically

JeffSauder — Wed, 12 Aug 2015 15:32:24 GMT

I am calling a js app from another page, and I want to pass in an address string. I am able to do that and populate the text box in the geocoder widget, but I don't know of a way to trigger the search. The user has to press the search button to get the map to zoom to the address location.

I basically need to find a way to trigger the "select" event, but so far haven't been able to figure that out. I am fairly new to javascript, so I may be overlooking something. Or maybe there's a better tool to do this with?

Re: js api: Is there a way to trigger the geocoder widget to search autmatically

RobertScheitlin__GISP — Wed, 12 Aug 2015 21:11:55 GMT

Jeff,

The Geocoder Dijit has a find method that you need to execute.

Geocoder | API Reference | ArcGIS API for JavaScript

Re: js api: Is there a way to trigger the geocoder widget to search autmatically

JeffSauder — Wed, 12 Aug 2015 22:50:29 GMT

Hi Robert,

Thanks for the info. I did see that before, but it says the return type is Promise. I haven't been able to find any info on that or code samples, is there any site or samples that could point me in the right direction.

Thanks,

Jeff

Re: js api: Is there a way to trigger the geocoder widget to search autmatically

KellyHutchins — Sat, 11 Dec 2021 08:48:19 GMT

Here's an example showing how to do this using the Search Widget. The Search widget is a new widget added at 3.13.

<!DOCTYPE html>
<html>
<head>
  <title>Create a Map</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
  <style>
    html, body, #mapDiv{
      padding: 0;
      margin: 0;
      height: 100%;
    }
    #searchDiv{
      position: absolute;
      top:30px;
      right:30px;
    }
  </style>
  
  <script src="http://js.arcgis.com/3.14/"></script>
  <script>


    require(["esri/map", "esri/urlUtils", "esri/dijit/Search", "dojo/domReady!"], function(Map,urlUtils, Search) {


            
      var map = new Map("mapDiv", {
        center: [-56.049, 38.485],
        zoom: 3,
        basemap: "streets"
      });


      //setup search
      var search = new Search({
        map:map
      },"searchDiv");
      search.startup();
      //get the search term from the url param and automatically search


      var urlParams = urlUtils.urlToObject(document.location.href);


      if(urlParams.query && urlParams.query.search_location){
        var searchKeyword = urlParams.query.search_location;
        search.search(searchKeyword);




      }




    });
  </script>


</head>
<body class="claro">
  <div id="mapDiv"></div>
  <div id="searchDiv"></div>
</body>
</html>

Re: js api: Is there a way to trigger the geocoder widget to search autmatically

JeffSauder — Thu, 20 Aug 2015 17:53:27 GMT

Kelly,

Thanks for the info, that widget is better for what I am doing than the geocoder. It "works", but with one major flaw. When I set the address in code, it runs the select but zooms to a location outside of the map area (as verified by the location tool on the measure widget), but when I click on the search widget itself it will zoom to the correct area. I had the object written to the log in the console and the x,y locations are correct but the wieget zooms to another area for some reason. I set the value of the textbox on the widget, then run the search, so the value of the address is in the textbox. It zooms to the wrong area, but I can then click the search widget and it will zoom to the right area. I thought maybe it was a spatial reference issue but I can't find anywhere to set that for this widget. Also, everything works fine when manually executing the widget, just not automatically.

Thanks,

Jeff

Re: js api: Is there a way to trigger the geocoder widget to search autmatically

KellyHutchins — Thu, 20 Aug 2015 17:57:11 GMT

Jeff sounds like it could be a spatial reference issue of some sort. Do you have a code example showing how you are using search? Are you using the Esri World locator? Which basemap are you using? A custom one? If so can you share the URL or SR details?

Re: js api: Is there a way to trigger the geocoder widget to search autmatically

JeffSauder — Thu, 20 Aug 2015 18:08:35 GMT

Hi Kelly,

I have all the js code below, it's not much. I don't have a locator set. I am using a custom dynamic map and a custom tiled aerial service.

The url string I use is:

http://localhost:63342/GilbertMeasure/Measure.html?addr=50%20E%20Civic&20Center%20Dr%20Gilbert,%20Arizona

javascript:

var map;

require([

"dojo/dom",

"esri/Color",

"dojo/keys",

"dojo/parser",

"esri/config",

"esri/sniff",

"esri/map",

"esri/units",

"esri/SnappingManager",

"esri/dijit/Measurement",

"esri/layers/FeatureLayer",

"esri/renderers/SimpleRenderer",

"esri/tasks/GeometryService",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleFillSymbol",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/layers/ArcGISTiledMapServiceLayer",

"esri/dijit/Search",

"esri/urlUtils",

"dojo/promise/all",

"esri/dijit/Scalebar",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dijit/TitlePane",

"dijit/form/CheckBox",

"dojo/domReady!"
], function(

dom, Color, keys, parser,

esriConfig, has, Map,Units, SnappingManager, Measurement, FeatureLayer, SimpleRenderer, GeometryService, SimpleLineSymbol, SimpleFillSymbol,ArcGISDynamicMapServiceLayer,Tiled,Search,urlUtils,

all

) {

parser.parse();

//This sample may require a proxy page to handle communications with the ArcGIS Server services. You will need to
//replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic
//for details on setting up a proxy page.
esriConfig.defaults.io.proxyUrl = "/proxy/";

esriConfig.defaults.io.alwaysUseProxy = false;

//This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications
esriConfig.defaults.geometryService = new GeometryService("http://www.gilbertmapping.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");

map = new Map("map",

{

center: [-111.742, 33.308],

zoom: 1
}

);

var lyrDyn = new ArcGISDynamicMapServiceLayer("http://www.gilbertmapping.com/arcgis/rest/services/GilbertH2OConsExt/MapServer");

lyrDyn.setVisibleLayers([0,1,2,3]);

var lyrAerial = new Tiled("http://www.gilbertmapping.com/arcgis/rest/services/Aerials/Gilbert2015/MapServer",{ minScale: 2000 });

map.addLayers([lyrAerial,lyrDyn]);

var srch = new Search({

   map: map
   }, "geoDiv"
   );

srch.startup();

var urlParams = urlUtils.urlToObject(document.location.href);

if (urlParams.query && urlParams.query.addr) {

var sAddr = urlParams.query.addr;

srch.set("value", sAddr);

srch.search();

//.then(function(response){
// console.log(response);
};

//window.alert(sAddr);

var measurement = new Measurement({

map: map,

defaultAreaUnit: Units.SQUARE_FEET,

defaultLengthUnit: Units.FEET

}, dom.byId("measurementDiv"));

measurement.startup();

measurement.hideTool("distance");

//measurement.hideTool("location");
});

html:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

<title>Measure Tool</title>

<style>

html,body {

height:100%;

width:100%;

margin:0;

}

body {

background-color:#FFF;

overflow:hidden;

font-family:"Trebuchet MS";

}

#map {

border:solid 2px #808775;

-moz-border-radius:4px;

-webkit-border-radius:4px;

border-radius:4px;

margin:5px;

padding:0px;

}

#titlePane{

width:240px;

}

.claro .dijitTitlePaneTitle {

background: #fff;

font-weight:600;

border: none;

border-bottom:solid 1px #29201A;

border-top:solid 1px #29201A;

}

.claro .dijitTitlePaneTitleHover {

background:#eee;

}

.claro .dijitTitlePaneTitleActive {

background:#808775;

}

.claro .dijitTitlePaneContentOuter {

border-right: none;

border-bottom: none;

border-left: none;

}

</style>

</head>

</div>

</div>

</body>

</html>

Re: js api: Is there a way to trigger the geocoder widget to search autmatically

KellyHutchins — Sat, 11 Dec 2021 08:48:22 GMT

Jeff

Looks like we need to make sure the map is loaded before searching for the value. Here's a revised version of your app showing how this would work.

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
  on iOS devices-->
   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
   <title>Measure Tool</title>
   <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
   <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
   <style>
   html,body {
   height:100%;
   width:100%;
   margin:0;
  }
   body {
   background-color:#FFF;
   overflow:hidden;
   font-family:"Trebuchet MS";
  }
   #map {
   border:solid 2px #808775;
   -moz-border-radius:4px;
   -webkit-border-radius:4px;
   border-radius:4px;
   margin:5px;
   padding:0px;
  }
   #titlePane{
   width:240px;
  }
  .claro .dijitTitlePaneTitle {
   background: #fff;
   font-weight:600;
   border: none;
   border-bottom:solid 1px #29201A;
   border-top:solid 1px #29201A;
  }
  .claro .dijitTitlePaneTitleHover {
   background:#eee;
  }
  .claro .dijitTitlePaneTitleActive {
   background:#808775;
  }
  .claro .dijitTitlePaneContentOuter {
   border-right: none;
   border-bottom: none;
   border-left: none;
  }
   </style>
   <script src="http://js.arcgis.com/3.13/"></script>
   <script>


var map;
require([
   "dojo/dom",
   "esri/Color",
   "dojo/keys",
   "dojo/parser",

   "esri/config",
   "esri/sniff",
   "esri/map",
   "esri/units",
   "esri/SnappingManager",
   "esri/dijit/Measurement",
   "esri/layers/FeatureLayer",
   "esri/renderers/SimpleRenderer",
   "esri/tasks/GeometryService",
   "esri/symbols/SimpleLineSymbol",
   "esri/symbols/SimpleFillSymbol",
   "esri/layers/ArcGISDynamicMapServiceLayer",
   "esri/layers/ArcGISTiledMapServiceLayer",
   "esri/dijit/Search",
   "esri/urlUtils",

   "dojo/promise/all",
   "esri/dijit/Scalebar",
   "dijit/layout/BorderContainer",
   "dijit/layout/ContentPane",
   "dijit/TitlePane",
   "dijit/form/CheckBox",
   "dojo/domReady!"
], function(
  dom, Color, keys, parser,
  esriConfig, has, Map,Units, SnappingManager, Measurement, FeatureLayer, SimpleRenderer, GeometryService, SimpleLineSymbol, SimpleFillSymbol,ArcGISDynamicMapServiceLayer,Tiled,Search,urlUtils,
  all
) {
    parser.parse();




     esriConfig.defaults.geometryService = new GeometryService("http://www.gilbertmapping.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");
   
     map = new Map("map",{
      center: [-111.742, 33.308],
      zoom: 1
     });
   


     map.on("load", function(){
       var srch = new Search({
        map: map
       }, "geoDiv");


       srch.startup();
     
       var urlParams = urlUtils.urlToObject(document.location.href);
     
       if (urlParams.query && urlParams.query.addr) {
        var sAddr = urlParams.query.addr;
        srch.set("value", sAddr);
        srch.search();
       };
     });


     var lyrDyn = new ArcGISDynamicMapServiceLayer("http://www.gilbertmapping.com/arcgis/rest/services/GilbertH2OConsExt/MapServer");
     lyrDyn.setVisibleLayers([0,1,2,3]);
     var lyrAerial = new Tiled("http://www.gilbertmapping.com/arcgis/rest/services/Aerials/Gilbert2015/MapServer",{ minScale: 2000 });
   
     map.addLayers([lyrAerial,lyrDyn]);
   




  });
   </script>
   </head>

<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false"
   style="width:100%; height:100%;">
   <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
   <div style="position:absolute; right:20px; top:10px; z-Index:999;">
   </div>
   <div id="geoDiv"></div>
   </div>
   </div>
</div>
</body>
</html>

Re: js api: Is there a way to trigger the geocoder widget to search autmatically

JeffSauder — Thu, 20 Aug 2015 19:47:42 GMT

Thank you Kelly, that did it. I just recently started doing javascript, I forgot about using the map load event to make sure the map was fully initialized first. Thank you very much, this is exactly whet I need!