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?
Solved! Go to Solution.
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>
Jeff,
The Geocoder Dijit has a find method that you need to execute.
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
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>
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
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?
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:
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>
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>
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!