Sunday, October 26, 2014

ESRI Geocoding Widget Using the REST API and JavaScript




Geocoder Widget with the termination dislpayed.

Geocoder Widget with the termination dislpayed.


I requirement to geocode in my scheme apps and I definite to try composition my own geocoder using my ArcServer geocoding assist and the ESRI REST API. I have prefabricated digit version: digit that exclusive requires including the css and js files and digit that requires a line of cipher to initialize. The ordinal digit allows me to alter the geocoder I poverty to use. The geocoder requres a Leaflet.js transpose – exclusive to add the marker. If you poverty to ingest a assorted duty library, meet modify the cipher in the JavaScript start after the line if(http.readyState == 4 && http.status == 200) {. The http.responseText module include a JSON progress of the results. Do whatever you poverty with them.


To use the prototypal one, the HTML looks as follows:

<html>

<head><title>DMDVIEW REST Services</title>

<link rel=”stylesheet” href=”geocoder.css” />

<link rel=”stylesheet” href=”http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css&#8221; />

<style>

html, body, #map {

padding: 0;

margin: 0;

height: 100%;

}


</style>

</head>

<body>

<div id=”map”></div>

<script src=”http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js”></script&gt;

<script src=”geocoderMap.js”></script>

<script>


var transpose = L.map(‘map’, {

center: [35.10418, -106.62987],

zoom: 9

});


L.tileLayer(‘http://{s}.tile.osm.org/{z}/{x}/{y}.png’).addTo(map);


</script>

</body>

</html>


 


The CSS:


#AddressSearchBox{

background-color: rgba(255, 255, 255, 0.5);

border: 1px solidified #000;

-moz-border-radius: 15px;

border-radius: 15px;

height:40px;

width:350px;

padding-top:10px;

padding-left:5px;

position: absolute;

left: 40%;

top: 0px;

z-index: 100000;

}

#first{

text-align: center;

}

#second{

text-align: left;

margin: 0 auto;

width: 50%;

}


 


The JavaScript start does every the work. It creates the nested <div>’s to the HTML, formats them and then lets you start an come and either puch the fix or advise enter. The termination is a saucer on the transpose at the prototypal termination with the popup open, displaying the termination name. Just add your ArcServer geocoding assist address and you crapper include a geocoder widget with 2 includes.


Here is the JavaScript:


(function() {


var b = document.getElementsByTagName(‘body’)[0];

var prototypal = document.createElement(‘div’);

var ordinal = document.createElement(‘div’);

var addressSearchBox = document.createElement(‘div’);


first.id = “first”;

second.id = “second”;

addressSearchBox.id = “AddressSearchBox”;


b.appendChild(first);

first.appendChild(second);

second.appendChild(addressSearchBox);


var book = “<center><b>Address:</b><input type=’text’ id=’addr’ name=’to’><button id=’search’ >Search</button><center>”

addressSearchBox.innerHTML=text;


var textbox = document.getElementById(“addr”);

var fix = document.getElementById(“search”);


function GeocodeAddress(){

addressFromAddressSearchBox=document.getElementById(“addr”).value;

var params = “Street=”+addressFromAddressSearchBox+”&f=json&outSR=4326″;

var url = “http://YourArcServerName/ArcGIS/rest/services/YourGeolocatorServiceName/GeocodeServer/findAddressCandidates&#8221;;

if (window.XMLHttpRequest)

{

http=new XMLHttpRequest();

}

else

{

http=new ActiveXObject(“Msxml2.XMLHTTP”);

}


http.open(“POST”, url, true);

http.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);

http.onreadystatechange = function() {//Call a duty when the land changes.

if(http.readyState == 4 && http.status == 200) {

var thexy= JSON.parse(http.responseText);

var yousearchedfor = L.marker([thexy.candidates[0].location.y,thexy.candidates[0].location.x]).addTo(map).bindPopup(‘<h3>’+addressFromAddressSearchBox+'</h3>’).openPopup();

map.setView([thexy.candidates[0].location.y,thexy.candidates[0].location.x],18);

}//end if

}

http.send(params);

}

button.onclick=function geocode(){

GeocodeAddress();


}


textbox.onkeypress=function handleKeyPress(e){

var key=e.keyCode || e.which;

if (key==13){

GeocodeAddress();


}}


}

());


 


I mentioned that I had a ordinal warning that allowed you to alter the assist at separate time, or meet ingest the default. This warning requires a line of cipher in your HTML:


new geocoder();


or


new geocoder(“http://the assist you poverty to use.com/arcgis/services/rest/….”);


 


the CSS is the same. The exclusive modify is in the JavaScript. Here is the code:


( function( window, undefined, url ) {


function geocoder(url) {

this.url=url;

url = typeof url !== ‘undefined’ ? url : “http://YourArcServer/ArcGIS/rest/services/YourServiceName/GeocodeServer/findAddressCandidates&#8221;;

var b = document.getElementsByTagName(‘body’)[0];

var prototypal = document.createElement(‘div’);

var ordinal = document.createElement(‘div’);

var addressSearchBox = document.createElement(‘div’);


first.id = “first”;

second.id = “second”;

addressSearchBox.id = “AddressSearchBox”;


b.appendChild(first);

first.appendChild(second);

second.appendChild(addressSearchBox);


var book = “<center><b>Address:</b><input type=’text’ id=’addr’ name=’to’><button id=’search’ >Search</button><center>”

addressSearchBox.innerHTML=text;


var textbox = document.getElementById(“addr”);

var fix = document.getElementById(“search”);

function GeocodeAddress(){

addressFromAddressSearchBox=document.getElementById(“addr”).value;

var params = “Street=”+addressFromAddressSearchBox+”&f=json&outSR=4326″;


if (window.XMLHttpRequest)

{

http=new XMLHttpRequest();

}

else

{

http=new ActiveXObject(“Msxml2.XMLHTTP”);

}


http.open(“POST”, url, true);

http.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);

http.onreadystatechange = function() {//Call a duty when the land changes.

if(http.readyState == 4 && http.status == 200) {

var thexy= JSON.parse(http.responseText);

var yousearchedfor = L.marker([thexy.candidates[0].location.y,thexy.candidates[0].location.x]).addTo(map).bindPopup(‘<h3>’+addressFromAddressSearchBox+'</h3>’).openPopup();

map.setView([thexy.candidates[0].location.y,thexy.candidates[0].location.x],18);

}//end if

}

http.send(params);

}


button.onclick=function geocode(){

GeocodeAddress();

}


textbox.onkeypress=function handleKeyPress(e){

var key=e.keyCode || e.which;

if (key==13){

GeocodeAddress();

}}


}


window.geocoder = geocoder;


} )( pane );


People who read this post also read :



No comments :

Post a Comment