Fake Geocoding with CABQ Open Data

15 Jan

Geocoding addresses is hard. For starters, there tend to be very few free services. The services that are free also tend to limit the number of queries you can make in a day or at a time. So what is a community developer to do? In this article, I will show you how to use Albuquerque Open Data to create a fake geocoding service.

Open Data

Browsing the Albuquerque Open Data site, I noticed they have published address points. Clicking it, we can choose a REST service for this data. If you look at the available fields in the data you will see one called GeoAddress. I used the ESRI form to grab some sample data to see what was in the field. From the looks of it, it was a concatenation of streetnumber, streetname, streetdesignation and streetquadrant. We will use this to build our geocoder.

The Map and Widget

Before I start with the details, here is an image of the final application with the address for Chipotle entered.

The Final Geocoding Application.

The Final Geocoding Application.

 

To create the above application, we need to style the widget that allows the user to type an address and press enter or click the submit button. Below is the CSS required and then the HTML for the widget.

#AddressSearchBox{
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid #000;
-moz-border-radius: 15px;
border-radius: 15px;
height:40px;
width:350px;
padding-top:10px;
padding-left:5px;
position: absolute;
left: 40%;
top: 3px;
z-index: 100000;
}

<div style=”text-align: center”>
<div style=”text-align: left; margin: 0 auto; width: 50%;”>
<div id=”AddressSearchBox”> <center><b>Address:</b><input type=’text’ id=’addr’ name=’to’ onkeypress=’handleKeyPress(event)‘><button onclick=’GeocodeAddress()‘>Search</button><center></div>
</div>
</div>

The HTML contains functions for when the user presses enter and if they click the button. Those functions will be created in our Leaflet.js map.

The handleKeyPress function will just check if the user pressed the enter key and then call the GeocodeAddress function. We put this in because many users hit enter instead of clicking the UI buttons.

function handleKeyPress(e){
var key=e.keyCode || e.which;
if (key==13){
GeocodeAddress();
}}

The application functionality all happens in the GeocodeAddress function. Because this is not a real geocoding service, we are using a MapServer service to query a field of addresses and then grabbing the result. Our query will look for the feature which has a GeoAddress equal to what the user submitted. The user entered address must be in all CAPS. For this to work, the match must be exact. As I mentioned, this is not a real geocoding service, but a way to fake one. The code below queries the service, gets the result, adds a marker to the map and zooms in.

function GeocodeAddress(){

var params = “where=GeoAddress='”+document.getElementById(“addr”).value+”‘&f=json&outSR=4326&outFields=*”;
var url = “http://coagisweb.cabq.gov/arcgis/rest/services/public/cadastral/MapServer/6/query&#8221;
http=new XMLHttpRequest();
http.open(“POST”, url, true);
http.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
var result= JSON.parse(http.responseText);
L.marker([result.features[0].geometry.y,result.features[0].geometry.x]).addTo(map);
map.setView([result.features[0].geometry.y,result.features[0].geometry.x],18);

}}
http.send(params);
}

It is by no means perfect, but it is a quick and dirty way to find an address if a real geocoding service has not been provided. In my next post, I will show you how to geocode address when a service has been provided.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: