How to append result to Geocoder text box using ArcGIS JavaScript API?

Question 1

I want to append result of a custom search in a Geocoder text box in ArcGIS JavaScript API by overriding the default result.

I have written the below code for this, but I am not getting a satisfactory result.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
 html, body, #map
 {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
 }
 #search
 {
 display: block;
 position: absolute;
 z-index: 3;
 top: 20px;
 left: 75px;
 }
 .spotlight
 {
 z-index: -1;
 position: absolute;
 left: 50%;
 top: 50%;
 border-radius: 50%;
 opacity: 0;
 box-shadow: inset rgba(0,0,0,0.25) 0px 0px 20px 20px, rgba(0,0,0,0.25) 0px 0px 0px 1000px;
 transition: all 1000ms;
 -moz-transition: all 1000ms;
 -webkit-transition: all 1000ms;
 }
 .spotlight-active
 {
 z-index: 2;
 opacity: 1;
 }
</style>
<script src="http://js.arcgis.com/3.11/"></script>
<script type="text/javascript">
 require([
 "esri/map",
 "esri/dijit/Geocoder",
 "esri/graphic",
 "esri/symbols/SimpleMarkerSymbol",
 "esri/geometry/screenUtils",
 "dojo/dom",
 "dojo/dom-construct",
 "dojo/query",
 "dojo/_base/Color",
 "esri/tasks/locator",
 "esri/geometry/Polygon",
 "dojo/_base/array",
 "dojo/domReady!"
 ], function (
 Map, Geocoder,
 Graphic, SimpleMarkerSymbol, screenUtils,
 dom, domConstruct, query, Color, Locator, Polygon, arrayUtils
 ) {
 var _RLCCspatialReference = new esri.SpatialReference({ "wkt": 'classified' });
 //var _RMapsExt = new esri.geometry.Extent(-4086033.961945721, -806460.9357572012, 3756052.906228016, 5050597.693910059, _RLCCspatialReference);
 var _RMapsExt = new esri.geometry.Extent(-2498256.744659858, 887180.8538370342, 2243086.071359108, 4139445.6917000436, _RLCCspatialReference);
 // create a map and instance of the geocoder widget here
 var map = new esri.Map("map", { logo: false, nav: false, wrapAround180: true });
 map.spatialReference = _RLCCspatialReference;
 map.fullExtent = _RMapsExt;
 map.initialExtent = _RMapsExt;
 //http://10.66.26.33:6080/arcgis/rest/services/Locator_Comb_Prd/GeocodeServer/
 //http://10.66.26.33:6080/arcgis/rest/services/Locator_Combined/GeocodeServer 
 var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://xxx.rix.com/arcgis/rest/services/Rmaps_Updated/MapServer");
 map.addLayer(tiledMapServiceLayer);
 map.setScale(14000000);
 map.setExtent(_RMapsExt, true);
 var gc = [{
 url: "http://10.66.26.33:6080/arcgis/rest/services/Locator_Comb_Prd/GeocodeServer",
 name: "Locator_Comb_Prd",
 singleLineFieldName: "SingleLine"
 }];
 var geocoder = new Geocoder({
 map: map,
 arcgisGeocoder: false,
 geocoders: gc,
 autoNavigate: false,
 autoComplete: true,
 showResults: true,
 geocoders: gc,
 geocoderMenu: false,
 }, dom.byId("search"));
 //"search" dom.byId("search")
 geocoder.startup();
 //map.on("load", enableSpotlight);
 geocoder.on("select", showLocation);
 geocoder.on("FindResults", showLocation);
 //geocoder.on("clear", removeSpotlight);
 dojo.connect(geocoder, 'onAutoComplete', function (results) {
 $("#search_input").autocomplete({
 source: function (request, response) {
 $.support.cors = true;
 $.ajax({
 dataType: "json",
 type: 'POST',
 url: 'http://11.66.22.44/Geocoder/Query.aspx',
 crossdomain: true,
 timeout: 100000,
 cache: true,
 data: { RequestType: "AutoComplete", AutoCompleteValue: $("#search_input").val() },
 success: function (data) {
 //$('input.suggest-user').removeClass('ui-autocomplete-loading'); // hide loading image
 if (data != null) {
 response(data);
 }
 },
 error: function (data) {
 alert("error:" + data.statusText);
 //$('input.suggest-user').removeClass('ui-autocomplete-loading');
 }
 });
 },
 minLength: 3,
 open: function () {
 },
 close: function () {
 },
 focus: function (event, ui) {
 },
 select: function (event, ui) {
 }
 });
 //console.log('autocomplete', results);
 });
 function showLocation(evt) {
 var point = null;
 //if (evt.result.feature.geometry.type == "point") {
 //}
 //else if(evt.result.feature.geometry.type == "polygon") {
 //}
 if (evt.result.feature.geometry.type == "point" && evt.result.feature.geometry.x != 0 && evt.result.feature.geometry.y != 0) {
 point = evt.result.feature.geometry;
 map.graphics.clear();
 var symbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_SQUARE).setColor(new Color([255, 0, 0, 0.5]));
 var graphic = new Graphic(point, symbol);
 map.graphics.add(graphic);
 map.infoWindow.setTitle("Search Result");
 map.infoWindow.setContent(evt.result.name);
 map.infoWindow.show(evt.result.feature.geometry);
 }
 else {
 map.graphics.clear();
 locator = new Locator("http://11.66.22.33:6080/arcgis/rest/services/Locator_Comb_Prd/GeocodeServer");
 locator.on("address-to-locations-complete", showResults);
 var address = {
 "SingleLine": evt.result.name
 };
 var resultName = evt.result.name;
 locator.outSpatialReference = map.spatialReference;
 var options = {
 address: address,
 outFields: ["Loc_name"]
 };
 locator.addressToLocations(options);
 function showResults(evt) {
 var symbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_SQUARE).setColor(new Color([255, 0, 0, 0.5]));
 //var infoTemplate = new InfoTemplate(
 // "Location",
 // "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}"
 //);
 //symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
 //symbol.setColor(new Color([153, 0, 51, 0.75]));
 var geom;
 arrayUtils.every(evt.addresses, function (candidate) {
 if (candidate.location.type == "point" && candidate.location.x != 0 && candidate.location.y != 0) {
 console.log(candidate.score);
 if (candidate.score > 80) {
 console.log(candidate.location);
 var attributes = {
 address: candidate.address,
 score: candidate.score,
 locatorName: candidate.attributes.Loc_name
 };
 geom = candidate.location;
 point = geom;
 var graphic = new Graphic(point, symbol);
 //var graphic = new Graphic(geom, symbol, attributes, infoTemplate);
 //add a graphic to the map at the geocoded location
 map.graphics.add(graphic);
 //add a text symbol to the map listing the location of the matched address.
 //var displayText = candidate.address;
 //var font = new Font(
 // "16pt",
 // Font.STYLE_NORMAL,
 // Font.VARIANT_NORMAL,
 // Font.WEIGHT_BOLD,
 // "Helvetica"
 //);
 //var textSymbol = new TextSymbol(
 // displayText,
 // font,
 // new Color("#666633")
 //);
 //textSymbol.setOffset(0, 8);
 //map.graphics.add(new Graphic(geom, textSymbol));
 map.infoWindow.setTitle("Search Result");
 map.infoWindow.setContent(resultName);
 map.infoWindow.show(point);
 return false; //break out of loop after one candidate with score greater than 80 is found.
 }
 }
 else {
 var polygonGeom = new Polygon(candidate.location.spatialReference);
 polygonGeom.addRing(candidate.location.rings[0]);
 geom = polygonGeom.getCentroid();
 point = geom;
 console.log(candidate.score);
 if (candidate.score > 80) {
 console.log(candidate.location);
 var attributes = {
 address: candidate.address,
 score: candidate.score,
 locatorName: candidate.attributes.Loc_name
 };
 //geom = candidate.location;
 point = geom;
 var graphic = new Graphic(point, symbol);
 //var graphic = new Graphic(geom, symbol, attributes, infoTemplate);
 //add a graphic to the map at the geocoded location
 map.graphics.add(graphic);
 //add a text symbol to the map listing the location of the matched address.
 //var displayText = candidate.address;
 //var font = new Font(
 // "16pt",
 // Font.STYLE_NORMAL,
 // Font.VARIANT_NORMAL,
 // Font.WEIGHT_BOLD,
 // "Helvetica"
 //);
 //var textSymbol = new TextSymbol(
 // displayText,
 // font,
 // new Color("#666633")
 //);
 //textSymbol.setOffset(0, 8);
 //map.graphics.add(new Graphic(geom, textSymbol));
 map.infoWindow.setTitle("Search Result");
 map.infoWindow.setContent(resultName);
 map.infoWindow.show(point);
 return false; //break out of loop after one candidate with score greater than 80 is found.
 }
 }
 });
 if (geom !== undefined) {
 map.centerAndZoom(geom, 14);
 }
 }
 }
 if (point != undefined || point != null) {
 map.centerAndZoom(point, 14);
 }
 //var spotlight = map.on("extent-change", function (extentChange) {
 // var geom = screenUtils.toScreenGeometry(map.extent, map.width, map.height, extentChange.extent);
 // var width = geom.xmax - geom.xmin - 400;
 // var height = geom.ymin - geom.ymax - 400;
 // var max = height;
 // if (width > height) {
 // max = width;
 // }
 // var margin = '-' + Math.floor(max / 2) + 'px 0 0 -' + Math.floor(max / 2) + 'px';
 // query(".spotlight").addClass("spotlight-active").style({
 // width: max + "px",
 // height: max + "px",
 // margin: margin
 // });
 // spotlight.remove();
 //});
 }
 //function enableSpotlight() {
 // var html = "<div id='spotlight' class='spotlight'></div>"
 // domConstruct.place(html, dom.byId("map_container"), "first");
 //}
 //function removeSpotlight() {
 // query(".spotlight").removeClass("spotlight-active");
 // map.infoWindow.hide();
 // map.graphics.clear();
 //}
 }); 
</script>
<script type="text/javascript">
 $(function () {
 $("#map").css("height", $(window).height());
 $("#map").css("width", $(window).width());
 //map_root
 $("#map_root").css("height", $(window).height());
 $("#map_root").css("height", $(window).width());
 });
</script>
</head>
<body>
 <form id="form1" runat="server">
 <div id="search">
 </div>
 <div id="map" style="width: 100%; height: 100%;">
 </div> 
 </form>
</body>
</html>

anyone any suggestion?

Question 2

Thanks for posting the code. But a suggestion is to cut down greatly on the amount posted, and only include the important sections. Eg the CSS, HEAD, background layer (etc) are irrelevant to the question. You can include a link to jsfiddle to show the rest. People are more likely to answer if they don't have to wade through pages of code.

Question 3

These are single page applications and even though i post them in jsfiddle they are not going to show any results as services used in them are not exposed to internet. More over simply copy pasting this code to HTML would give a better understanding to GIS developers/Experts than in Jsfiddle.

Question 4

Please see How to create a Minimal, Complete, and Verifiable example, specifically The more code there is to go through, the less likely people can find your problem. Streamline your example.

Question 5

Yes i found solution to this problem basically I can append the data which i am receiving using Jquery.

After all it is just an HTML!

But still there can be a better solution please do post it.

$.ajax({
 dataType: "json",
 type: 'POST',
 //url: 'http://11.66.22.44/Geocoder/Query.aspx',
 url: 'Query.aspx',
 //crossdomain: true,
 timeout: 500000,
 cache: true,
 data: { RequestType: "AutoComplete", AutoCompleteValue: $("#search_input").val() },
 success: function (data) {
 //$('input.suggest-user').removeClass('ui-autocomplete-loading'); // hide loading image
 var actualLength = $(".esriGeocoderResults ul").length;
 if (data != null) {
 //response(data); 
 if ($(".esriGeocoderResults ul").length == 0) {
 $(".esriGeocoderResults").append('<ul role="presentation">');
 }
 if ($("#search").hasClass("esriGeocoderResultsOpen") == false) {
 $("#search").addClass("esriGeocoderResultsOpen");
 }
 $(".esriGeocoderResults").css("display", "block");
 for (var index = 0; index < data.length; index++) {
 if ($(".esriGeocoderResults ul").text().indexOf(data[index]) == -1) {
 if (actualLength % 2 == 0) {
 $(".esriGeocoderResults ul").append('<li onClick = "locatorClick(this);" class="esriGeocoderResult esriGeocoderResultEven" title="' + data[index] + '" role="menuitem" tabindex="0" data-index="' + (actualLength) + '" data-item="true" data-text="' + data[index] + '">' + data[index] + '</li>');
 actualLength++;
 }
 else {
 $(".esriGeocoderResults ul").append('<li onClick = "locatorClick(this);" class="esriGeocoderResult esriGeocoderResultOdd" title="' + data[index] + '" role="menuitem" tabindex="0" data-index="' + (actualLength) + '" data-item="true" data-text="' + data[index] + '">' + data[index] + '</li>');
 actualLength++;
 }
 }
 }
 $(".esriGeocoderResults ul").bind();
 //alert($(".esriGeocoderResults ul").length);
 //$(".esriGeocoderResults ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
 }
 },
 error: function (data) {
 alert("error:" + data.statusText);
 //$('input.suggest-user').removeClass('ui-autocomplete-loading');
 }
 });

Er. ßridy Er. ßridy 1396 bronze badges · Accepted Answer · 2014-10-31 13:23:04Z

Yes i found solution to this problem basically I can append the data which i am receiving using Jquery.

After all it is just an HTML!

But still there can be a better solution please do post it.

$.ajax({
 dataType: "json",
 type: 'POST',
 //url: 'http://11.66.22.44/Geocoder/Query.aspx',
 url: 'Query.aspx',
 //crossdomain: true,
 timeout: 500000,
 cache: true,
 data: { RequestType: "AutoComplete", AutoCompleteValue: $("#search_input").val() },
 success: function (data) {
 //$('input.suggest-user').removeClass('ui-autocomplete-loading'); // hide loading image
 var actualLength = $(".esriGeocoderResults ul").length;
 if (data != null) {
 //response(data); 
 if ($(".esriGeocoderResults ul").length == 0) {
 $(".esriGeocoderResults").append('<ul role="presentation">');
 }
 if ($("#search").hasClass("esriGeocoderResultsOpen") == false) {
 $("#search").addClass("esriGeocoderResultsOpen");
 }
 $(".esriGeocoderResults").css("display", "block");
 for (var index = 0; index < data.length; index++) {
 if ($(".esriGeocoderResults ul").text().indexOf(data[index]) == -1) {
 if (actualLength % 2 == 0) {
 $(".esriGeocoderResults ul").append('<li onClick = "locatorClick(this);" class="esriGeocoderResult esriGeocoderResultEven" title="' + data[index] + '" role="menuitem" tabindex="0" data-index="' + (actualLength) + '" data-item="true" data-text="' + data[index] + '">' + data[index] + '</li>');
 actualLength++;
 }
 else {
 $(".esriGeocoderResults ul").append('<li onClick = "locatorClick(this);" class="esriGeocoderResult esriGeocoderResultOdd" title="' + data[index] + '" role="menuitem" tabindex="0" data-index="' + (actualLength) + '" data-item="true" data-text="' + data[index] + '">' + data[index] + '</li>');
 actualLength++;
 }
 }
 }
 $(".esriGeocoderResults ul").bind();
 //alert($(".esriGeocoderResults ul").length);
 //$(".esriGeocoderResults ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
 }
 },
 error: function (data) {
 alert("error:" + data.statusText);
 //$('input.suggest-user').removeClass('ui-autocomplete-loading');
 }
 });

Stack Exchange Network

How to append result to Geocoder text box using ArcGIS JavaScript API?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

How to append result to Geocoder text box using ArcGIS JavaScript API?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions