Maps Project

The maps project is an effort to integrate AW real-time water data with an online map API in order to produce a browsable streamflow information page. We have the capability through the search interface on the website to produce JSON output of real-time streamflow. In theory, it would be easy for an independent developer to interface with the state and produce a map marking runnable streams in real-time.

What follows is a collection of documents on how to interface with this information and some must-have been like-to-have features.

Interface

Queries look like this:

http://www.awa.org/content/River/!mapxml/sr/?rivername=Gau&state=stWV&level=any&include=on&atleast=II&atmost=V%2B&sr=River+Search&searchriver=River+Search

It's:

http://<machine name>/<content>/<component>/<format (!mapxml for this)>/<function or state (sr for search)>

The parameters are the same ones as you see on the AW search page. Just use the URL format above, but pass the parameters the same way. (The form posts to 10-year-old code that doesn't know how to reformat the contents).

Geoboxing URLs

http://test.paddlesource.com/content/River.geo-summary.funk.mapxml?geoN=34&geoS=36&geoE=-79&geoW=-84

Should be self explanatory. the JSON is an array of arrays of data. Data that has a geoMarker field is good for making into a marker. Don't use the numeric fields in the raw river data, they will eventually be removed so the entire thing goes faster. I also need to add an index to the lat/lon fields in the database. Eventually I want to move to a OpenGIS complient DB.

Code Flow

  • The server will initialize the map with a starting position and zoom level and a URL to query for information. The URL will be relevant to the data being examined. For example, on the River detail page, you will get a URL that will give you mostly river markers that relate to the host page; where on River summary you will get a URL to query river levels. etc….
  • The URL will use a standard method for querying geographic information; this will probably consist of some standardized boxing parameters.
  • The results of a call to that URL with the boxing parameters is a JSON stream that will evaluate to an array of simple structures. The structures will use some unique members that can be used to trivially convert the structure into a map marker. Imagine something like
arr[] =
{
   marker[0]=
     marker.geoLat = 37.5
     marker.geoLon = 12.5
     marker.geoIcon = 'smile'
     marker.geoBubble = '<a href="#">eat here</a>'
     marker.geoHint = 'mama'
    marker.geoType = 'event'
    marker.eventLocation = 'NOVA'
    marker.eventType = 'Rodeo'
  ...
}

But these members will also contain some additional information for summarizing in a table, if you need it.

  • In the GENERAL case, all you will need to do is popup the map component, intialize it with the server provided lat,lon, zoom, and view, then grab the data via AJAX from URL and do your magic marker structure to geographic marker drawing.
  • In the add additional crazy widget functionality consider registering a data processing handler with the map on page initialization. (something like this:
<table id='river_detail_summary' >
... blank table waiting to be filled. ....
</table>

<form onsubmit='urlfilter()' >
 ...terribly interactive form for filtering data ...
</form>

<script>
  var tabledrawer = class
{
   geoMarkerUpdate =  function( markers )
   {
      // iterate through markers and update table.
   }

  geoMarkerClear = function( markers )
  {
      // iterate through markers and clear them from the table, they have fallen off the map.
    }
}

function urlfilter( )
{
  // go through the form then grab the map url and add a parameter then force an update.
 if( geomapobj )
 {
      url = geomapobj.getQueryURL;
      url.addParam( 'filter3', $('filter3').value);
      geomapobj.refresh();
   }
 return 0;
}

   if( geomapobj ) // check if the map has been defined
   {
      geomapobj.registerDrawer( tabledrawer );
   }
</script>


)
  • We can extend the map fun with weather, county, and “zoom to this city”…. after we get going.

PM Comments

My public links might be a good place to see how I orient myself toward browser-side development. Most of them are related to AW maintenance.

http://del.icio.us/rgroth

Shoot for loose coupling between the map and other components that might need updating.

Everything you need to know about JSON is right here:

http://www.json.org/js.html

Debugging

IE debugging is annoying, but what you do is check the “enable script debugger” under internet options/advanced. You have to install the script debugger which is at www.microsoft.com/scripting. Then you reboot and cross you fingers. When you load up the debugger you should be able to attach to IE and set breakpoints. Otherwise, you'll have to use alert boxes to see where the script is getting stuck.'

Interfacing with TerraServer

Terra server link & discussion, i don't know the current status: http://www.dasnet.org/node/101

Join AW and support river stewardship nationwide!