nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

JS_GilbertAZ

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?

Find more posts tagged with

Accepted answers

khutchins

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>

All comments

JS_GilbertAZ

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>

khutchins

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?

JS_GilbertAZ

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

khutchins

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>

JS_GilbertAZ

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

RobertScheitlin__GISP

Jeff,

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

Geocoder | API Reference | ArcGIS API for JavaScript

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.