Using the USNG - The Web | Fuzzy Tolerance

Now presenting part du of our USNG series - using USNG on our web site.

First, let’s review our minimum requirements for our USNG-supporting application:

Locate and zoom to a USNG location (user input).
Display USNG location on a mouse click and/or movement.
Allow users to graphically display a USNG grid overlay on their screen.

Let's start with the last one first, as it's the easiest. If you recall in our ArcMap segment, we used some of ArcMap's built in tools to render a USNG grid for us. We're going one step easier with our web application - we're going to use some pre-made grids from the fine folks at Delta State University. Simply head there and grab the area(s) you need. I would advise clipping your area of interest out, as the data sets are pretty large. It goes down to the 100k meter level, so it should do you fine. Add it to your web map with whatever software you're using, set the scaling and labeling options as desired, and viola. Thanks Delta State!

Now we need to go with a bit of JavaScript for the rest. Here’s the script you need along with some demo functions.

This script has had a lot of contributors, which you can read about in the .js file, but they include Peter H. Dana, Larry Moore, Chuck Gantz, Grant Wang, and Doug Tallman. Thanks to everybody for keeping my JavaScript-related swearing to a minimum.*

Because every web mapping software package or API spits out coordinates a little differently, we’re going to skip that part and assume that you are getting your XY coordinates as lat-long and that in JavaScript those values are set as ‘mylat’ and ‘mylong’ respectively. We’ll also assume that the user inputs their USNG location in a text box and it gets assigned to the JavaScript variable ‘myusng’. That should give you enough to get going in whatever you’re using.

First, grab that js file and include it in your page:

<script src="usng.js" mce_src="usng.js"></script>

Now we need a little JavaScript. The two functions in the usng.js include we need are LLtoUSNG(lat, lon, precision) and USNGtoLL(usng_string,latlng). That last argument in USNGtoLL is an array to return, so we'll have to set that too.

First let’s look at taking our mylat and mylong coordinates and converting them to USNG.

myresults = LLtoUSNG(mylat, mylong, 3); alert(myresults);

Here we're making an alert box, but we could just as easily dropped the value into a tag somewhere. The last number is precision. It should be set to 1-5 and specifies the number of digits in the output coordinates. Remember we're really talking grids with USNG, so 1 = 10km grid, 2 = 1km grid, all the way down to 5 = 1m grid.

That’s that. Put it in a function, and you can now produce USNG for your lat-long coordinates, whether they are from a mouse move, a mouse click, or from user input.

Next we’ll convert USNG input by the user to lat long. Remember we have to set the latlng return as an array before we get started.

var latlng=[]; USNGtoLL(myusng,latlng); alert(latlng[0] + ' ' + latlng[1]);

There you have it. Your USNG is converted to lat-long and an alert box pops up with the results.

Included in the zip file with the usng.js is a usng.htm example with a couple of functions. Nothing to write home about, but the basic functions you’ll need for your USNG-enabled web app.

If you want to see a really cool example of USNG and the Google Maps API, check out this site by Larry Moore. If you click on the information link at the top of the page, you can download the whole site and see how it works. But, in essence, it’s calling the USNGtoLL and LLtoUSNG functions we talked about above.

*All of my JavaScript work involves swearing. I don’t know why. Browser quirks aside (shakes fist at IE) JavaScript isn’t all that hard. But set my cursor between the script tags and colorful epithets fly from my mouth unbidden. Of course, traffic lights do the same thing. Huh.