Coastal Observing Research and Development Center

HFRADAR Maps API

Do you want HFRADAR vectors on your map app.? We thought you might, so we built an API that allows you to access and query our tile base on your own.

With the inclusion of just a script tag and the Google Maps API, you can add your own vector overlays. Keep reading to see how.

The basics

First, you'll need a page, a map, and our API. View Simple Demo. View Complete Demo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example: Simple Map</title> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAageDAhxOGYlkvDJRgZKB9BSiGdt0AdhEoQ2TICUsJSLSueATeRQJrt-TRi-2efR6bAW1h4NHrRsaiw" type="text/javascript"></script> <script type="text/javascript" src="http://cordc.ucsd.edu/js/RTV/RTVTileLayer.js"></script> <script type="text/javascript"> /** * Initialize the Google map. */ function initialize() { if( !GBrowserIsCompatible() ) { alert("Browser not compatible."); return false; } /** * boiler-plate Google Maps code. */ var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(38.0, -98.0), 3); map.setUIToDefault(); /** * Get an overlay hander so we can attach an event listener. */ var overlay = new GTileLayerOverlay(new RTVTileLayer()); /** * Whenever tile layer state changes, map needs refreshing. */ GEvent.bind(overlay.getTileLayer(),'statechange',overlay,overlay.refresh); /** * Add the vector layer as overlay. */ map.addOverlay( overlay ); } </script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 500px; height: 300px;"></div> </body> </html>

Configuration

If you're looking for more than just 6km resolution averaged over 25 hours, than you probably won't be happy with the defaults for very long. Don't panic, we've added several options for you to get to your place of customized zen.

The following methods are implemented on the RTVTileLayer object. You'll need to get a handler for this object before calling these methods.

var rtv = new RTVTileLayer(); rtv.setColorRange(0,100); var overlay = new GTileLayerOverlay(rtv); map.addOverlay(overlay); GEvent.bind(overlay.getTileLayer(),'load',overlay,overlay.refresh);
Setter methods
Method Return Description
setOpacity(float opacity) bool Assign the opacity/transparency of the overlay. 1=> completely opaque, 0=> completely transparent.
setColorRange(int lo, int hi) bool Assign the color scale range you wish to use. Default is 0-50 cm/s, but valid range is from 0-250 cm/s. lo < hi.
setColorScheme(int scheme) bool Assign the color scheme/palette to use. Valid input is 0..5. Default is 4.
setResolution(string res) bool Assign the resolution to display. Valid input is (500m|1km|2km|6km).
setAveraged(bool set=true) bool Assign state: show averaged currents
setHourly(bool set=true) bool Assign state: show hourly currents
setTimestamp(int timestamp) bool Assign state: show vectors valid at this timestamp.
Getter methods
Method Return Description
getLatestTimestamp() int Returns the epoch timestamp of the most recent tile layer available for the current settings. You may need to subtract an hour from this if your sites have longer than average latency.
getVectorData(GLatLng latlng, function callback) bool Allows point-click identification of features. Pass a GLatLng object and a callback function, the callback will be executed when the feature query has completed. Parameter to the callback is a javascript object literal {"lat":value,"lng":value,"u":value,"v":value}. You can use this object to access the exact lat,lon nearest the point clicked, along with the surface current's U and V vector components (in cm/s).
getOpacity() float Return the opacity assigned for the RTV layer. Range: [0,1].
getColorScheme() int Returns the color scheme in use.
getColorbarUrl(width=220,height=30) string Returns a URL to a colorbar that represents the data range being displayed. The colorbar width must be a multiple of 4. If not, the width is reduced to the nearest multiple.
getPrefix() string Returns the tile letter prefix used by the tile layer.
getTimestamp() int Returns the epoch timestamp of the currently displayed layer.
Events
Event Bound to Parameters Description
load RTVTileLayer timestamp Triggered when the RTVTileLayer is fully initialized. The timestamp is the most recently available layer for the current configuration.
statechange RTVTileLayer none Triggered whenever a setting is changed, requiring that the map be refreshed. This event needs to be listened for so that the tiles are updated whenever a setting is changed.
timechange RTVTileLayer timestamp This event is triggered by the setTimestamp method. If the time is changed, a listener might want to display the new time. This method allows for an event-based display listener, rather than setting the display whenever one sets the time.