![Page 1: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/1.jpg)
SAFOD Core Viewer
An online visual core sample databaseand administrative tool
![Page 2: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/2.jpg)
Core Materials DatabaseCore Materials Database
An onlineAn online web-based approach using theweb-based approach using theGoogle Google Maps APIMaps API
Brian BlackmanSr Web Developer
4 May 2009Wakulla Springs, FL
Introduction
![Page 3: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/3.jpg)
Acknowledgements
EarthScope is funded by the NationalScience Foundation.
EarthScope is being operated and maintained as a collaborative effortwith UNAVCO and IRIS, with funding contributions from the USGS,NASA, and several other national and international organizations.
San Andreas Observatory at Depth (SAFOD) is being operated andmaintained by UNAVCO with all core materials managed by IODP and
the Gulf Coast Repository at Texas A&M University.
The SAFOD Sample Committee conducts cyclical reviews of samplerequests from principal investigators and submits recommendations for
approval to the NSF.
Acknowledgements
![Page 4: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/4.jpg)
• Core Viewer Background• System Functionality• Technological Infrastructure• Necessary Technical Skill Set• Database Design and Development• Google Maps API and Core Imagery• Putting it all together• Custom Implementations
Overview
![Page 5: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/5.jpg)
• Off-line Core Sample Request Process• Core Altas PPT (size 60 MB or more)• Sample Request Form Document• Request Cataloging by Data Products Mngr• Distribution to SAFOD Review Committee• Time-sensitivity For Sample Request Processing• Disparate Review Committee Members• Sample Request Controls
BackgroundSAFOD Core Sample Request Processing:
![Page 6: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/6.jpg)
Background
• Core Section Imagery Visual Feature with SampleRequest Annotation
• Data Input Capabilities• Collaborative Feature• Data Validation• Administrative Capabilities• User Authentication Feature• Dynamic Sample Review and Approval Capability
Online Solution Requirements:
![Page 7: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/7.jpg)
House Map Construction Site Map
Visual Component Solution: Custom Google Mapimplementation utilizing high resolution imagery.
Background
![Page 8: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/8.jpg)
Google Map Image CutterThe Google Maps Image Cutter takes a large image and cuts it intolots of 256x256 pixel images. At the top level there is only one 256pixel square which is a smaller copy of the original image. At the nextlevel, there are four 256 pixel squares, then sixteen, sixty four and twohundred and fifty six. This corresponds to 256, 512, 1024, 2048 and4096 pixel square images spread over the map tiles. The applicationautomatically chooses the depth of the maximum zoom level tocorrespond to the original size of the image, so zooming in any furtherwould make the image bigger and cause it to pixelate.
UCL CENTRE FOR ADVANCED SPATIAL ANALYSISUnited Kingdom
http://www.casa.ucl.ac.uk/software/googlemapimagecutter.asp
Background
![Page 9: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/9.jpg)
SAFOD Core Viewer Committee Review ComponentVersion 1.0
Background
![Page 10: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/10.jpg)
BackgroundSAFOD Core Viewer Suite
Sample Request Component
Committee Review Component
Sample Taken Component
Sample Data Component
![Page 11: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/11.jpg)
System Functionality
• Core Section Imagery within Google Maps Interface• Data Driven Polyline Annotation of Points of Interest• Data Driven Marker Info Bubble• Visual Digitization of Polygon and Circle Shapes• Show/Hide Controls of Polygon and Circle Shapes• Hole/Run Core Section Selection• Four (4) Levels of Zoom Magnification• Polygon and Circle Annotation of Original Locations if
Modified by Committee
Core Viewer Feature Functionality
![Page 12: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/12.jpg)
System Functionality
• User Registration with PI Group Association• User Authentication and Identification on Request Data• Dynamic Access to PI Group Digitized Sample
Requests• Sample Request Data Form with Pre-populate Feature• User Comments on Sample Requests• Edit and Delete of Sample Request Data• Core Viewer Digitization of Submitted Sample Requests• PI Group Member Information and Administration• User Profile Management• Printer Friendly User Comments Viewing
Sample Request Feature Functionality
![Page 13: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/13.jpg)
System Functionality
• Committee Member User Authentication• Request Cycle Selection• Review of All Sample Requests per Hole/Run Section• Re-Digitizing of Existing Sample Requests within the
Core Viewer• Identification of Requests Recommended for Approval• User Comments per Sample Requests• View Access to PI Group Research Profile• View Access to all Sample Request Handling and
Analysis Data
Committee Review Feature Functionality
![Page 14: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/14.jpg)
System Functionality
• IODP User Authentication• Import of Approved Sample Request Records• Re-Digitizing of Polygon to Local of Sample Taken• Creation of New Sample Taken Records for Multiple
Samples per Sample Request• Data Entry of Interval and Mass• User Comments Entry• Upload of Sample Taken Imagery
Sample Taken Feature Functionality
![Page 15: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/15.jpg)
System Functionality
• IODP User Authentication• Sample Taken Selection• Science Data Entry• User Comments Entry• Resource Reference List Entry
Sample Data Feature Functionality
![Page 16: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/16.jpg)
Technology
• Dedicated System (SUNOS, Linux, MS Server, Apple)• Web Server (Apache, MS ISS, Websphere, Weblogic)• Relation Database Software (MySQL, Postgres, MS
SQL, Oracle)• Server Side Application Environment (PHP, JAVA, MS ASP.NET, Perl)
SAFOD Core Viewer Infrastructure:• SUN T2K• Apache Web Server• MySQL• PHP (CodeIgniter MVC Framework)
Internet Based Application Infrastructure
![Page 17: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/17.jpg)
Technology
• Presentation View Logic (JavaScript)• Presentation Communications (AJAX)• Server Business Logic ( Controller - MVC )• Server Data Access ( Model - MVC )• Server Data Access (MySQL)• Server Presentation Build Logic ( View - MVC )
Internet Based Application Architecture
![Page 18: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/18.jpg)
Technology
• HTML, CSS, and JavaScript Development• Google Maps API ( JavaScript )• Server Development (PHP, Java, MS, other)• XML ( Data Delivery )• Database Design ( Normalization of Data )• Database Development ( Implementation )• Server Management ( System Admin )• Framework Implementation ( CodeIgniter, Cake, .Net,
Websphere, WebLogic )
Technical Skill Sets
![Page 19: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/19.jpg)
Database
• Identify All Data Requirements• Define Individual Data Elements• Group Data Elements• Identify or Create Relationship Between Groups• Create Join Data Groups where Necessary• Review and Refine Data Groups• Eliminate Redundant Data Where Possible• Build In Extensibility• Define Primary and Foreign Keys• Define Indexes on Fields Most Often used In Query
Relational Database Design
![Page 20: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/20.jpg)
Database
• Install Chosen Database on Server• Install Client Interface or Use Command
Line• Create Database Schema• Create Database Tables• Add Fields, Keys, and Indexes• Add Extensibility ( Views, Stored
Procedures, etc )
Relational Database Development
![Page 21: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/21.jpg)
Google Maps API
• Key Registration http://code.google.com/apis/maps/signup.html
• Add Key to HTML Header <script src="http://maps.google.com/maps?file=api&v=2&key=ABXYZAA1EgixrJMsPsAlymlF5T2IhR-
Wc2HscPmAVjHFRKnwBGQQg97hhQXhVXoQ07_xw7SbiOZRgrr6t6iDQ" type="text/javascript"></script>
• Add a MAP Div to your HTML <div id="map" style="height: 387px; width:100%"></div>
• Add JavaScript Implementation of API <script type="text/javascript"> if (GBrowserIsCompatible()) { safodMapProjection = new GMercatorProjection(19);
map = new GMap2(document.getElementById("map"), {mapTypes:[sec_01]}) . . . } else { alert("Sorry, the Google API is not compatible with this browser"); } </script>
Base Line Implementation
![Page 22: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/22.jpg)
Google Maps API
• Cut Core Images ( Google Map Cutter )• Upload New Images to Core Section Folder• Add Image Handler Routine // ===================================================================== // ====== Custom Tile Image Handler Function for Google Maps API ========== // ====== Images generated from GMapImageCutter Java App ================ // ====== All Image Tiles are 256px X 256px =============================
function customGetTileURL(a,b) { //converts tile x,y into keyhole string var c=Math.pow(2,b); var d=a.x; var e=a.y; var f="t"; for(var g=0;g<b;g++){ c=c/2; if(e<c){ if(d<c){f+="q"} else{f+="r";d-=c} } else{ if(d<c){f+="t";e-=c} else{f+="s";d-=c;e-=c} }
} return url+f+".jpg” }
Core Imagery Instead of Map
![Page 23: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/23.jpg)
Google Maps API
• Provide Dynamic Reference of Image Folder to Google Map API
if (GBrowserIsCompatible()) { // ============================================================ // ===== Create the GTileLayer ===== // ===== adn apply the CustomGetTileUrl to it var tilelayers = [new GTileLayer(copyrightCollection,1,4)]; tilelayers[0].getTileUrl = customGetTileURL;
// ============================================================ // ===== Create the GTileLayer ===== // ===== adn apply the CustomGetTileUrl to it safodMapProjection = new GMercatorProjection(19);
• Dynamic URL Bulding
/image/safod/hole_E_run_1_sec_1_tiles
url = "/images/es_data_page/safod_core_data/" + tileURL + section + "_tiles/";
Core Imagery Instead of Map
![Page 24: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/24.jpg)
Google Maps API
• Database Containing Digitized Google Latitude Longitude Values• Coordinates Assigned to Array Object• Shape Routine Called with Parameters
drawPolygon(rectAr, piColor, infoWin, markerPoint);
//============================================================// ====== Polygon Construction Method ===== function drawPolygon(points, color, infoWin, markerPoint) { polObj=new GPolygon(points, color, 3, 1, color, 0.03); map.addOverlay(polObj);
GEvent.addListener(polObj, "click", function() { map.openInfoWindowHtml(markerPoint, infoWin);
});
xlylMarkerAr[shapeAr.length] = new GMarker(points[1], {draggable: true, bouncy: true}); xryrMarkerAr[shapeAr.length] = new GMarker(markerPoint, {draggable: true, bouncy: true});
}
Data Driven Polyline Annotation
![Page 25: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/25.jpg)
Putting it TogetherApplication Components
![Page 26: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/26.jpg)
Sample Requests Component
Putting it Together
![Page 27: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/27.jpg)
Putting it TogetherSample Requests Component
![Page 28: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/28.jpg)
Putting it TogetherSample Requests Component
![Page 29: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/29.jpg)
Putting it TogetherSample Taken Component
![Page 30: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/30.jpg)
Custom Implementations
LiDAR ImageryCore Imagery
![Page 31: SAFOD Core Viewer - National Oceanic and Atmospheric ... · Overview •Off-line Core Sample Request Process •Core Altas PPT ... Version 1.0 Background. Background SAFOD Core Viewer](https://reader035.vdocuments.us/reader035/viewer/2022070802/5f02d32c7e708231d4063220/html5/thumbnails/31.jpg)
Questions?