All,
I'm trying to figure out how to use a standard button component to trigger a locator rather than a DOJO component
I was given a hint to try
on(dom.byId("buttonID"), "click", locate);
...but I can't get that to work.
UPDATE: I've attached some code with the suggestion by jskinner-esristaff from comments below - solution is working great. Thank you!!!
Thanks!
Solved! Go to Solution.
Hi Matthew,
Your code is correct, you will just need to reference the "dojo/on" module. Ex:
require([
"esri/map", "esri/tasks/locator", "esri/graphic",
"esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
"esri/symbols/Font", "esri/symbols/TextSymbol",
"dojo/_base/array", "esri/Color",
"dojo/number", "dojo/parser", "dojo/dom", "dijit/registry", "dojo/on",
"dijit/form/Button", "dijit/form/Textarea",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
],
function (
Map, Locator, Graphic,
InfoTemplate, SimpleMarkerSymbol,
Font, TextSymbol,
arrayUtils, Color,
number, parser, dom, registry, on)
Hi Matthew,
Your code is correct, you will just need to reference the "dojo/on" module. Ex:
require([
"esri/map", "esri/tasks/locator", "esri/graphic",
"esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
"esri/symbols/Font", "esri/symbols/TextSymbol",
"dojo/_base/array", "esri/Color",
"dojo/number", "dojo/parser", "dojo/dom", "dijit/registry", "dojo/on",
"dijit/form/Button", "dijit/form/Textarea",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
],
function (
Map, Locator, Graphic,
InfoTemplate, SimpleMarkerSymbol,
Font, TextSymbol,
arrayUtils, Color,
number, parser, dom, registry, on)
Jake Skinner, I've added the code I'm working with - also adding what you've suggested, but still no luck.
Looks like there were a couple of errors.
1. In you 'outFields' parameter, the field needs to have quotes, i.e. "grades"
2. I would recommend using map.centerAndZoom to zoom to the results
One thing I'm not sure is how to call the zoomTo function from the table. You may want to start a new thread for this.
Here is the code I was able to get to work:
<!DOCTYPE html>
<html>
<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>Geocode Details</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
color: #353129;
}
#map {
margin: 0;
padding: 0;
}
#footerPane {
border: none;
height: 300px;
}
</style>
<script src="http://js.arcgis.com/3.9/"></script>
<script>
var locator, map;
require([
"esri/map", "esri/tasks/locator", "esri/SpatialReference", "esri/graphic",
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/Font",
"esri/symbols/TextSymbol", "esri/geometry/Point", "esri/geometry/Extent",
"esri/geometry/webMercatorUtils", "dojo/_base/array", "esri/Color", "dojo/number",
"dojo/parser", "dojo/dom", "dojo/json", "dijit/registry", "dojo/on",
"dijit/form/Button", "dijit/form/Textarea", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojo/domReady!"
],
function(
Map, Locator, SpatialReference, Graphic,
SimpleLineSymbol, SimpleMarkerSymbol, Font,
TextSymbol, Point, Extent,
webMercatorUtils, arrayUtils, Color, number,
parser, dom, JSON, registry, on
) {
parser.parse();
map = new Map("map", {
basemap : "streets",
center : [-93.5, 41.431],
zoom : 5
});
locator = new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
on(dom.byId("noDojo"), "click", locate);
//Draw and zoom to the result when the geocoding is complete
locator.on("address-to-locations-complete", function(evt) {
map.graphics.clear();
arrayUtils.forEach(evt.addresses, function(geocodeResult, index) {
//create a random color for the text and marker symbol
var r = Math.floor(Math.random() * 250);
var g = Math.floor(Math.random() * 100);
var b = Math.floor(Math.random() * 100);
var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([r, g, b, 0.5]), 10), new Color([r, g, b, 0.9]));
var pointMeters = webMercatorUtils.geographicToWebMercator(geocodeResult.location);
var locationGraphic = new Graphic(pointMeters, symbol);
var font = new Font().setSize("12pt").setWeight(Font.WEIGHT_BOLD);
var textSymbol = new TextSymbol((index + 1) + ".) " + geocodeResult.address, font, new Color([r, g, b, 0.8])).setOffset(5, 15);
//add the location graphic and text with the address to the map
map.graphics.add(locationGraphic);
map.graphics.add(new Graphic(pointMeters, textSymbol));
});
var ptAttr = evt.addresses[0].location;
map.centerAndZoom(ptAttr, 19);
showResults(evt.addresses);
});
function showResults(results) {
var rdiv = dom.byId("resultsdiv");
rdiv.innerHTML = "<p><b>" + results.length + " Matching Results:</b></p>";
var content = [];
//start table
content.push("<table border='0'><tr>");
arrayUtils.forEach(results, function(result, index) {
var x = result.location.x.toFixed(5);
var y = result.location.y.toFixed(5);
content.push("<tr><td>");
content.push("<input type='button' id='zoomButton' value='Z' onclick='zoomTo(" + y + "," + x + ")'/>");
content.push("</td><td>");
content.push("<legend><b>" + (index + 1) + ". " + "<a target='window' href='http://test.com/" + result.attributes.LangCode + "'>" + result.address + "</a></b></legend>");
content.push("</td></tr>");
});
content.push("</tr></table>");
rdiv.innerHTML += content.join("");
}
//Perform the geocode. This function runs when the "Locate" button is pushed.
function locate() {
var address = {
SingleLine : dom.byId("address").value
};
var options = {
address : address,
outFields : ["grade"]
};
//optionally return the out fields if you need to calculate the extent of the geocoded point
locator.addressToLocations(options);
}
function zoomTo(lat, lon) {
var point = new Point(lon, lat, {
wkid : "4326"
});
/*var wmpoint = webMercatorUtils.geographicToWebMercator(point);
map.centerAt(wmpoint);*/
map.centerAndZoom(point, 19)
}
function showThing(thing) {
alert(thing);
}
function clearDiv() {
document.getElementById('resultsdiv').innerHTML = "";
}
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="gutters:false, design:'sidebar'"
style="width:50%;height:100%;">
<div>
Address :
<input type="text" id="address" size="60" value="380 New York St, Redlands, CA, 92373"/>
<!-- <button id="locate" data-dojo-type="dijit/form/Button">
Locate
</button> -->
<button id="noDojo">
Locate me without Dojo!
</button>
</div>
<div id="map"></div>
<div id="footerPane">
<div id="resultsdiv"></div>
<button onclick="clearDiv()">
Clear Div
</button>
</div>
</div>
</body>
</html>
Matt,
there is an issue in your locate function. The following error pops-up:
Uncaught ReferenceError: grade is not defined
when I remove your
outfield: [grade]
it seems to work.
I'm sorry, I got my samples mixed up and added that by mistake...
jskinner-esristaff your solution worked great. Thank you!
and thanks timw1984dev for pointing this out!
hey matthew,
please consider marking Jake's reply as the 'answer' to this thread when you have a minute.
... I was busy going through all my GeoNet notifications...!!!