Chart of the Future related concepts in Google Maps/Earth

Web interfaces have rapidly become the platform of the future!

This blog entry will attempt to collate some of the Google map related projects that are consistent with the Vislab's Chart of the Future project and stuff related to the Navy's "Nav of the Future" project.

Bathymetry colored according to depths (info about it):

Submarine view/controls in 3D:

Dual-Maps (or linked/tethered views)

Path Planning tool: Automate Grid Creation (bathy surveys)

Depth Profiles

Notice to Mariners for Queensland:

ChUM (LNMs and MODUs/Broadcast Warnings)

ChartWorld service delivers eNtM

I saw this article in Hydro International about ChartWorlds electronic Notice to Mariner service that includes paper chart tracings and corrections for all other publications previously delivered in the paper NtM format.

Here is what it says about eNtM's on the ChartWorld website:

ChartWorld eNtM delivers digital Notices to Mariners (NtMs) on a weekly basis. The service includes paper chart tracings and corrections for all other publications previously delivered in the paper NtM format.

eNtMis integrated with ChartWorld’s digital chart catalogue ChartBrowser. The outstanding user-friendliness of the tool, combined with low volume data transmission and attractive monthly fees, is a breakthrough method on the market. Each vessel is provided with a complete database of digital NtMs of the last three years. This enables the crew to autonomously manage its paper chart and nautical publications inventory aboard. eNtM can be used as a stand-alone product or along with the compliant eSeries service, ChartWorld’s solution for ECDIS.

ChartWorld’s sales director Stephan Dimke comments: “ChartWorld eNtM is designed for professional navigation, in an intuitive and consistent manner. We want to help the officer on board to work more efficiently and enhance safety on board. With eNtM ChartWorld is offering the cheapest digital NtM solution in combination with the lowest data volume rate. ChartWorld is offering free trials for each shipping company so that you can convince yourself of our superior service.”

I've  been working on the idea of adding NGA products including the Notice to Mariner information to the ChUM interface due to a request from the Navy (you can see a demo version here) to see MODU's (mobile oil drilling units) and Broadcast warnings.

Local Notice to Mariners Web-based Google Map Mashup (ChUM)

ChUM 

Chart Update Mashup

I've been working on this project for the past few months and now am ready to blog about it!

After first learning about Local Notice to Mariners and getting completely confused with where it was, how to find it, and how to understand it, I took my notes then came up with the idea to create a web accessible one-stop shop to make it trivial for mariners to view the critical chart corrections in context with a nautical chart.

After realizing how  and how often charts are updated and that it is important to keep both paper and electronic charts up to date, this project seemed like it could really benefit mariners in a big way. This is such a big deal that the Alliance for Safe Navigation's website has a pop-up upon entering the site that says:

"Getting chart updates is inexpensive and easy"

 (They also have on their home page a text box that allows you to enter your chart number and it will take you directly to the OCS Local Notice to Mariner table...I show that below, and I didn't find out about this website until well after I started my project!)

You can find the working prototype of my application here:
http://vislab-ccom.unh.edu/~briana/ncapiui-v2/

Background 

If you do a search for Local Notice to Mariners the first link you'll find (or at least I did as of today) is:

http://www.navcen.uscg.gov/?pageName=lnmMain

Then you have to click on the area you are interested in: District 1 for me.

Then you get:

You find the latest one and the pdf will look something like this (the one marked with "New!") - the chart corrections section (IV):

Not super intuitive (at least to the newbie), and since I didn't memorize the chart for my area of interest I would need to go look up the chart.  

I just want to mention that in that initial search for Local Notice to Mariners, the first one that doesn't have a navcen.uscg.gov website is the Office of Coast Survey link:

http://ocsdata.ncd.noaa.gov/ntm/Terms.aspx

Which brings you directly to this:

(BTW, it took me a while to figure out the relationship between the navcen website and the ocs website, I wasn't sure why it was being posted differently in two places at first)

So, I hit accept and get this page:

But I have the same problem, I don't really know what chart number I need, just know the area, at least this page gives a link to a Catalog, so I follow the link:

http://www.charts.noaa.gov/InteractiveCatalog/nrnc.shtml

And I zoom to and select my area of interest:

Now I see that Chart 13285 is highlighted! Now that I know my chart number I'm temped to go directly back to the previous page where it asked me what chart number I wanted to search for, but instead I read the whole page to see if there is something there. It takes some reading, but I see below some seemingly related links:

• View Online
• Notice Listing
• Download RNC
• Order Paper Chart

All I want to do is view the chart online and view the associated Local Notice to Mariners. So I click the View Online link to see the chart:

This interface isn't my first choice, I was able to completely loose the map (I guess by zooming out too much), I can't make it full screen so I'm loosing lots of real-estate and can never get a large area very big.

Not if I want to see the updates for this chart since it's last printed edition I can either go back to my previous link from the catalog viewer, or if I'm patient I can see that now in the upper right corner there are three related links:

• Download RNC
• Notice Listing
• Find A Chart Site

This time I click on Notice Listing and a new pages opens up to this:

Nice a table, much better than that pdf table, but in the Disclaimer below it you'll notice it states:

1. It is not a substitute for that pdf we found earlier.
2. The info in the table is derived from the CRIT database (Critical Chart Corrections only...which is just section IV of the pdf)
3. The updates only go back as far as Jan 2000.

I'm expecting the columns to sort when I click on them, instead I get information about what each header means (yes all of the columns link to the same page).

Because I struggled with this for a while, listed above is definitely the shortened, organized version of my struggles. (But I wanted to spare you the gory details).

Proof of Concept

All of this got me thinking, it would really be much more effective if the information was given in context so I could sort through the stuff that I wanted and be more in control. That's what we expect from the awesomeness of the web these days right?  

So, I just took everything I've shown above (except the pdf) and put it all together in the context of a Google Map (using V3 of the api so it will be mobile ready). Tried to put it all together in an intuitive, easy to use and access way so viewing charts with updates would be a one-stop-shop.

BTW, I also added the Coast Pilot which you would normally have to access at:

http://www.nauticalcharts.noaa.gov/nsd/cpdownload.htm

And all the lat/long positions and some of the locations are geo-coded so if you click on the links they will take you to that location in Google Maps.

The Future of Local Notice to Mariners

Hopefully, this work will inspire some dialog within the respective departments about tagging data so it can be useful to developers (who will in turn make it useful for the public), and making sure that EVERYTHING that can be will be Geo-Tagged! Right now it is all done by my code behind the scenes, how fast and great would it be if it was already done!

NOTE: the disclaimers from OCS still apply to this data/web proof-of-concept...it is their data!

Let me know what you think about this project!

You can find the working prototype of my application here:
http://vislab-ccom.unh.edu/~briana/ncapiui-v2/

NOAA puts QR codes on nautical charts

QR codes on the Print on Demand NOAA Nautical Charts!
Check out the experiment here!

Yeah, this is super cool, bringing the charts the supplementary data they need for safe navigation!

I asked NOAA why I couldn't access this via their website (the home page, news page or research page) directly and they said that it was still in development and when it has progressed to a beta testing phase, OCS will announce it to the public.

A Google Map Style Drop-Down

I had been wanting to make one of these for a while, saw this post on stack overflow:
Add custom control to a Google Map that's a dropdown
and decided to put the time in to do it!
It should look like this:

---

My Box

Option 1

Option 2

On/Off

---

Here's the code...I'll update to making it generically and with jQuery soon!


<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps V3 style controls</title>
    <style type="text/css">
.container{
  width: 85px;
  z-index: 1;
  margin: 5px;
  cursor: pointer;
  text-align: left;
  z-index: 0;
}

.dropDownControl{
direction: ltr;
overflow-x: hidden;
overflow-y: hidden;
text-align: left;
position: relative;
font-family: Arial, sans-serif;
-webkit-user-select: none;
font-size: 13px;
padding-top: 1px;
padding-right: 6px;
padding-bottom: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: rgb(113, 123, 135);
border-right-color: rgb(113, 123, 135);
border-bottom-color: rgb(113, 123, 135);
border-left-color: rgb(113, 123, 135);
border-image: initial;
-webkit-box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px;
box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px;
color: rgb(0, 0, 0);
padding-left: 6px;
font-weight: bold;
background-image: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: rgb(255, 255, 255);
background-position: initial initial;
background-repeat: initial initial; 
z-index: 2;
}

.dropDownArrow{
-webkit-user-select: none;
border-width: 0px;
border-style: initial;
border-color: initial;
border-image: initial;
padding: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
  position: absolute;
right: 6px;
top: 50%;
margin-top: -2px;
width: 7px;
height: 4px;
}

.dropDownOptionsDiv{
background-color: white;
z-index: 0; /*need this to make the box look cool, but this stops the hover and title from working on items in the box! */
padding-top: 2px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: rgb(113, 123, 135);
border-bottom-color: rgb(113, 123, 135);
border-left-color: rgb(113, 123, 135);
border-image: initial;
border-top-width: 0px;
border-top-style: initial;
border-top-color: initial;
-webkit-box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px;
box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px;
position: relative;
text-align: left;
display: none;
}

.dropDownItemDiv{
font-family: Arial, sans-serif;
-webkit-user-select: none;
font-size: 13px;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: rgb(255, 255, 255);
color: black;
/*font-weight: bold;*/
}
.dropDownItemDiv:hover, .checkboxContainer:hover{
background-color: rgb(235, 235, 235);
z-index: 1;

}
.dropDownControl:hover{
background: -webkit-linear-gradient(top,rgb(255,255,255),rgb(230,230,230));
}
.separatorDiv{
margin-top: 1px;
margin-right: 0px;
margin-bottom: 1px;
margin-left: 0px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(235, 235, 235);
}
.checkboxContainer{
font-family: Arial, sans-serif;
-webkit-user-select: none;
font-size: 11px;
padding-top: 1px;
padding-bottom: 3px;
padding-left: 5px;
direction: ltr;
text-align: left;
background-color: rgb(255, 255, 255);
white-space: nowrap;
padding-right: 8px;
color: rgb(0, 0, 0);
}
.checkboxSpan{
box-sizing: border-box;
position: relative;
line-height: 0;
font-size: 0px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
display: inline-block;
background-color: rgb(255, 255, 255);
border-width: 1px;
border-style: solid;
border-color: initial;
border-image: initial;
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
width: 13px;
height: 13px;
vertical-align: middle;
-webkit-box-shadow: none;
box-shadow: none;
border-color: rgb(198, 198, 198); 
}


.blankDiv{
position: absolute;
left: 1px;
top: -2px;
width: 13px;
height: 11px;
overflow-x: hidden;
overflow-y: hidden;
display: none; /*when = block -> this is the "check" symbol*/
}

.blankImg{
position: absolute;
left: -52px;
top: -44px;
-webkit-user-select: none;
border-width: 0px;
border-style: initial;
border-color: initial;
border-image: initial;
padding: 0px;
margin: 0px;
-webkit-user-drag: none;
width: 68px;
height: 67px;
}

.checkboxLabel{
vertical-align: middle;
cursor: pointer;
}


    </style>

  </head>
  <body>
  <div class="container">
   <div class="dropDownControl" id="ddControl" title="A custom drop down select with mixed elements" onclick="(document.getElementById('myddOptsDiv').style.display == 'block') ? document.getElementById('myddOptsDiv').style.display = 'none' : document.getElementById('myddOptsDiv').style.display = 'block';"">
   My Box
   <img class="dropDownArrow" src="http://maps.gstatic.com/mapfiles/arrow-down.png" />
   </div>
   <div class = "dropDownOptionsDiv" id="myddOptsDiv">
   <div class = "dropDownItemDiv" id="mapOpt"  title="This acts like a button or click event" onClick="alert('option1')">
   Option 1
   </div>
   <div class = "dropDownItemDiv" id="satelliteOpt" title="This acts like a button or click event" onClick="alert('option2')">
   Option 2
   </div>
   <div class="separatorDiv"></div>
   <div class="checkboxContainer" title="This allows for multiple selection/toggling on/off" onclick="(document.getElementById('terrainCheck').style.display == 'block') ? document.getElementById('terrainCheck').style.display = 'none' : document.getElementById('terrainCheck').style.display = 'block';">
   <span role="checkbox" class="checkboxSpan ">
   <div class="blankDiv" id="terrainCheck">
   <img class="blankImg" src="http://maps.gstatic.com/mapfiles/mv/imgs8.png" />
   </div>
   </span>  
   <label class="checkboxLabel">On/Off</label>  
   </div>
   </div>
  </div>      
  </body>
</html>

Documentation really is (freaking) Awesome!

Here is an awesome presentation on how AWESOME documentation is!

Remember it doesn't matter that it's targeting Ruby code...this applies to everything!
There is something out there for every kind of code!

Using MS Word to extract metadata from a report

I have been dealing with metadata here at the center for the past 6 years and have seen it slowly evolve from a painful and tedious process of copy-and-pasting to generate hundreds of files, to what it is today...a more robust, automated system where metadata is mined directly from the raw data files.

There was still one missing piece to the automated system of metadata creation, and after my last cruise to the Necker Ridge I've come up with one solution for it!  The missing piece has always been that wordy part of the metadata...the one that deals with the attribute accuracy reports, the abstracts and the process descriptions.  These things can't generally be mined from the original data.

After this particular cruise I was reading and reformatting the cruise report and it dawned on me...there is all the metadata I've been after!  (Why it took me 6 years to finally really read the report is beyond me!)  I just needed a way to tag it and save the tagged portions so I could do as I please with them.

I also needed to do this "tagging" in such a way that NO ONE was intimidated or overwhelmed by it!  So, that meant just doing it in word, since this seems to be how most of the reports are written up.

This tagging will actually be user defined XML that when saved as XML is the exact format that the XSD specifies.  Ahhh, XSD, so someone with some XML experience will have to set the whole thing up...but, once it's done...it's done forever!

1. First set up an XSD (an XML schema) to define the layout of the document.
2. Go to Word Options -> Popular and click on: show developer tab in the ribbon.
3. Select the Developer tab and click on Structure.  That will show a side bar (on the right) for the XML structure.
4. Click the link in the XML Structure window (Templates and Add-Ins)
1. Click the Add Schema button and find the desired XSD.
2. Fill in the Schema Settings with any URI (just a tag name can be anything descriptive), and an alias (to shorten the URI if desired).
3. You will then see it in the list of Available XML Schemas, Check the schema to make sure it is being used. 
4. Also, you will probably want to check "Validate document against attached schemas"
5. After you click OK you will see a list of elements available to "apply to your current selection"...now you are ready to "tag" any part of your report (thus marking it up with XML)!
6. When it is all marked up, select "Save As.." and choose Word 2003 XML Document (*.xml)
1. At this point you can also apply a Transform (XSLT) and it will save transformed!
2. Make sure you select "Save data only" if you only want the tagged data in the .xml file.

You will then see the desired marked up XML document!  All from the known familiar Word document!

With this we are now able to auto generate the core metadata items from the raw data and the textual part of the metadata can now be harvested directly from the cruise report, one simple command to call the python script that pulls it all together and we have XML metadata for each of our hundreds of files ready to be archived at NGDC!