For every SwellMap forecast available you can add it to your web page.
As you can see on the right, it's a great way to see what the surfing, fishing and general weather conditions are currently like.
Download the SwellMap JQuery zip file jquery.swellmap.zip and extract the contents to a suitable folder.
If you havent already been using JQuery, add the JQuery library to the <HEAD> element of your page.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
Add the jquery.swellmap.js file by adding following line to the <HEAD> element of your page:
<script type="text/javascript" src="swellmap/js/jquery.swellmap.js"></script>
Add the jquery.swellmap.css file by adding the following line to the <HEAD> element of your page:
<link rel="stylesheet" type="text/css" href="swellmap/css/jquery.swellmap.css" />
Add a blank div element to your web page that will contain the forecast. Specify the div id so you can call it in the JQuery.
<div id="piha"></div>
Call swellmap() on the div element using the JQuery protocol.
<script type="text/javascript">
$(document).ready(function () {
$("#piha").swellmap({
site: "Piha",
activity: "Surfing"
});
});
</script>
defaults = {
site: 'Piha', // Location name
activity: 'surfing', // Activity { 'surfing' | 'boating' | 'general' }
title: true, // Display name of location { true | false }
smaplink: 'View 7 day forecast', // Dislay text for link to SwellMap { Specify text }
border: false // Wrap information in a nice container
time: true, // Display time of forecast { true | false }
showerror: true, // If there is no data show error { true | false }
rating: true, // Display rating { true | false }
summary: true, // Display summary { true | false }
hide: ["hs","gstma","hs_sea","dpm_sea"],// List of variables to hide { ["var1", "var2", ...] }
tides: true, // Display tide times { true | false }
seatemp: false // Display sea temp { true | false }
}
If you are still not sure how to implement the plugin check out the following examples: