Use GIS to Fill a Form

27 Feb

We use maps to answer questions and the information taken from a map may need to find its way somewhere else. In this post, I will show you how to take a map and populate form data with the properties in a GIS feature class just by clicking a location on the map.

The Application

1

The application will consist of a form with a button to launch a map. When the map opens, the user will click on a parcel. The map will make a call to an Albuquerque Open Data GIS service and retrieve the information for the parcel. The map will send the data to the form.

The Code

The form is a simple Bootstrap form.

<form class=”form-horizontal” role=”form”>
<div class=”form-group”>
<label class=”control-label col-sm-2″ for=”email”>Street Number:</label>
<div class=”col-sm-10″>
<input type=”text” class=”form-control” id=”snumber” placeholder=”Enter Street Number”>
</div>
</div>
<div class=”form-group”>
<label class=”control-label col-sm-2″ for=”pwd”>Street Name:</label>
<div class=”col-sm-10″>
<input type=”text” class=”form-control” id=”sname” placeholder=”Enter Street Name”>
</div>
</div>
<div class=”form-group”>
<label class=”control-label col-sm-2″ for=”email”>Street Designation:</label>
<div class=”col-sm-10″>
<input type=”text” class=”form-control” id=”sdes” placeholder=”Enter Street Designation”>
</div>
</div>
<div class=”form-group”>
<label class=”control-label col-sm-2″ for=”pwd”>Street Quadrant:</label>
<div class=”col-sm-10″>
<input type=”text” class=”form-control” id=”squad” placeholder=”Enter Street Quadrant”>
</div>
</div>
<div class=”form-group”>
<div class=”col-sm-offset-2 col-sm-10″>
<button type=”submit” onclick=”openMap()” class=”btn btn-default”>Open Map</button>
</div>
</div>
</form>

The button calls a JavaScript function which opens the map in a new window.

function openMap(){window.open(“fillformmap.html”,”Map”,”width=600,height=600″);}

The goal is to fill the form with data from the map. The map that opens is a standard Leaflet.js map. I use an on click function to create a buffer – just to make sure we hit a parcel – and send the buffer to the service query and ask for the parcel information back (for more information on the buffer with Turf.js see my post on Albuquerque Incidents).

map.on(“click”,function(e){

a=L.marker(e.latlng);
b=a.toGeoJSON();
buffered = turf.buffer(b,.005,”miles”);
L.geoJson(buffered).addTo(map);
var result = turf.featurecollection(buffered.features.concat(b));

g='{“rings”:’+JSON.stringify(buffered.features[0].geometry.coordinates)+’}’;

var params=”f=json&outSR=4326&outFields=*&geometryType=esriGeometryPolygon&spatialRel=esriSpatialRelIntersects&inSR=4326&geometry=”+g;

var url = “http://coagisweb.cabq.gov/arcgis/rest/services/public/fullviewer/MapServer/9/query&#8221;;
console.log(params);
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) {
console.log(http.responseText);
var result= JSON.parse(http.responseText);
……..CODE GOES HERE….
}}

http.send(params);
});

Nothing special about the code above, it is been used in several previous posts. To send the data to the form, we need to use the code below.

opener.document.getElementById(“sname”).value=result.features[0].attributes.STREETNAME;
opener.document.getElementById(“snumber”).value=result.features[0].attributes.STREETNUMBER;
opener.document.getElementById(“squad”).value=result.features[0].attributes.STREETQUADRANT;
opener.document.getElementById(“sdes”).value=result.features[0].attributes.STREETDESIGNATION;
window.close();

The above code grabs the text boxes by ID for the document that opened the map. It sets the value of those text boxes to the value returned from the map query. Now we have a completed form.

2 Sometimes clicking a map is better than filling out information by hand. I only queried a single GIS feature, but do not think that is the limit. We could easily query a number of layers to populate a form. Just add another AJAX call and pass the results.

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: