Our forecast weather tiles are missing as the result of changes from a security update. We are working to get them working again. Thank you for your patience.

Add a forecast to your website

You can now add a free SwellMap 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

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

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

Still confused on how to implement it?

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