Select to view content in your preferred language

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

3822
8
Jump to solution
08-12-2015 08:32 AM
JeffSauder
Regular Contributor

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?

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

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>

View solution in original post

8 Replies
RobertScheitlin__GISP
MVP Emeritus

Jeff,

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

Geocoder | API Reference | ArcGIS API for JavaScript

0 Kudos
JeffSauder
Regular Contributor

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

0 Kudos
KellyHutchins
Esri Frequent Contributor

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>
JeffSauder
Regular Contributor

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

0 Kudos
KellyHutchins
Esri Frequent Contributor

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?

0 Kudos
JeffSauder
Regular Contributor

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,%20Ar...

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 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 src="js/map.js"></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 id="titlePane" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Measurement', closable:'false', open:'false'">

   <div id="measurementDiv"></div>

   <!--<span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span> -->
   </div>

   <div id="geoDiv"></div>

   </div>

   </div>

</div>

</body>

</html>

0 Kudos
KellyHutchins
Esri Frequent Contributor

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>
JeffSauder
Regular Contributor

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!

0 Kudos