Practical 4 - Embedding Ocean Products in your website

Three ways to load content on a web page are demonstrated here: show a chart, embed a PDF, or embed a whole web page.

In an operational CliDEsc setup, these files can be generated automatically while keeping the same filename and location. The website code does not need to change each time the product is updated.

Climate Averages - Normal Period

            // Packages used: none. Plain HTML and JavaScript, nothing to install.

                // There is no fetch here either. The plotter has already drawn the map, so we are
                // given a finished picture - setting src makes the browser download it.

                const image = document.getElementById('climate-image')
                cosnt status = document.getElementById('climate-image-status')

                // The load event tells us the picture has arrived
                image.onload = () => {
                status.textContent = 'Image loaded.'
                }

                // If the URL is wrong the picture never arrives, so say so
                image.onerror = () => {
                status.textContent = 'Could not load that image. Check the URL.'
                }

                // Setting src last means the two handlers above are ready before it loads
                image.src = 'assets/Climate_Averages_J91843.png'

Agriculture Report

Open the Agriculture Report in a new tab

            // Packages used: none. Every browser already has a built-in PDF viewer.

                <!-- A PDF is not fetched or parsed either. We only say where it lives,
                twice, and let the browser's own PDF viewer do the rest. -->

                <!-- Way 1 - a link. target="_blank" opens it in a new browser tab.
                rel="noopener" is a safety habit whenever you use target="_blank". -->
                <a href="assets/agriculture_report_J82209_2.pdf" target="_blank" rel="noopener">Open the
                agriculture PDF</a>

                <!-- Way 2 - the same PDF inside our page. This is an iframe, not an img,
                because a PDF has pages to scroll rather than being one picture. -->
                <iframe src="assets/agriculture_report_J82209_2.pdf" title="Agriculture Report
                PDF"></iframe>

                const url = 'assets/agriculture_report_J82209_2.pdf'
                const frame = document.getElementById('climate-pdf')
                const link = document.getElementById('climate-pdf-link')
                const status = document.getElementById('climate-pdf-status')
                link.href = url
                link.hidden = false
                frame.src = url
                status.textContent = 'PDF loaded. You can scroll through it below, or open it in a new tab.'

Days Without Rainfall Map

Here is a map showing the number of days without rainfall in the Pacific Islands. It's still fully clickable, and you can zoom and pan it.

Open the map in a new tab

            // Packages used: none. An iframe is part of HTML itself.
                <!-- One tag is the whole trick. The other site loads and runs inside this
                box, keeping its own scrolling, buttons and map controls. -->
                <iframe id="climate-map" title="Days Without Rain Map"></iframe>

                // And in practical-4.js, the same one line as the PDF:
                const frame = document.getElementById('climate-map')
                const link = document.getElementById('climate-webpage-link')
                const status = document.getElementById('climate-webpage-status')

                link.href = 'assets/Station_NoRain.html'
                link.hidden = false

                status.textContent = 'Map loading...'
                frame.src = 'assets/Station_NoRain.html'
                frame.onload = () => {
                status.textContent = 'Map loaded.'
                }

Exercise 1 - Plot data from a station

Choose whether your station is a tide gauge or a wave buoy, paste its URL, then press Plot data.

Press Plot data to begin.

Exercise 2 - Show a map image

Two parts of the URL below are worth changing, then press Show image:

time=2026-08-02 - the date of the map.
region=6 - the country. Look up the numbers in the country list.

Press Show image to begin.

Exercise 3 - Embed a PDF

Paste the address of a tide calendar PDF, then press Show PDF. You get both a link that opens it in a new tab and a copy embedded in the page.

Press Show PDF to begin.

Exercise 4 - Embed a whole web page

Below is the Bureau of Meteorology's printable tide table for Port Vila . Paste any page address, then press Show page.

aac=INT_TP027 and region=VUT - which station.
date=4-8-2026 and days=7 - the week to show.

If the box stays blank, that site has told the browser it will not be embedded. Use the link instead - it is not a fault in your page.

Press Show page to begin.