Add a forecast to your website

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.

To add the SwellMap plugin to your website:

1. Download the SwellMap JQuery library zip file and extract the contents to a suitable folder. Download jquery.swellmap.zip
2. 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>

3. 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>

4. 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" />

5. Add a blank div element in your web page that will contain the forecast. Specify the div id so you can call it in the JQuery.

<div id="piha"></div>

6. Call swellmap() on the div element using the JQuery protocol.

<script type="text/javascript">
    $(document).ready(function () {
        $("#piha").swellmap({
            site: "Piha",
            activity: "Surfing"
        });
    });
</script>
                        

Options

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 }
    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 } 
}
                

Still confused on how to implement it?

If you are still not sure how to implement the plugin check out the following examples:

1. Example as used in SwellMap.
2. Various examples using JQuery options and CSS styling.