{"id":2,"date":"2024-07-22T07:12:42","date_gmt":"2024-07-22T07:12:42","guid":{"rendered":"https:\/\/www.chessbuoy.com\/?page_id=2"},"modified":"2026-04-22T12:11:23","modified_gmt":"2026-04-22T12:11:23","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/www.chessbuoy.com\/?page_id=2","title":{"rendered":"Real-Time Buoy Monitoring \u2013 BOB Fleet"},"content":{"rendered":"\n<p>Track the real-time location and latest data points of our buoy fleet as it monitors the different locations where they are deployed. Currently, BOB is deployed at the Yasuura Aquaculture Region (BOB and Big BOB).<\/p>\n\n\n\n<p>The fleet&#8217;s current positions are displayed on the map below. You can explore their recent movements and get an overview of where each buoy is located. Click on a marker for detailed coordinates and live data.<\/p>\n\n\n\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\" \/>\n<script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"><\/script>\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n    <title>Live Sensor Data Map &#8211; Buoys<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet\/1.9.4\/leaflet.css\" \/>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\" \/>\n    <style>\n        body {\n            font-family: Arial, sans-serif;\n            margin: 0;\n            padding: 24px;\n            background: linear-gradient(180deg, #08111f 0%, #0d1b2a 100%);\n            color: #eaf2ff;\n        }\n\n        .page-title {\n            text-align: center;\n            font-size: 30px;\n            font-weight: 700;\n            margin-bottom: 10px;\n            color: #ffffff;\n        }\n\n        .page-subtitle {\n            text-align: center;\n            color: #b8c8e6;\n            margin-bottom: 24px;\n            font-size: 15px;\n        }\n\n        #map {\n            height: 600px;\n            width: 100%;\n            margin-bottom: 28px;\n            border-radius: 20px;\n            overflow: hidden;\n            border: 1px solid rgba(255,255,255,0.08);\n            box-shadow: 0 10px 30px rgba(0,0,0,0.22);\n        }\n\n        .dashboard-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n            gap: 24px;\n            margin-top: 10px;\n        }\n\n        .data-container {\n            padding: 22px;\n            background: rgba(255,255,255,0.05);\n            border: 1px solid rgba(255,255,255,0.08);\n            border-radius: 18px;\n            margin-bottom: 0;\n            cursor: pointer;\n            transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;\n            box-shadow: 0 8px 24px rgba(0,0,0,0.18);\n        }\n\n        .data-container:hover {\n            transform: translateY(-3px);\n            background: rgba(255,255,255,0.07);\n            box-shadow: 0 12px 30px rgba(0,0,0,0.25);\n        }\n\n        .data-container h2 {\n            margin-top: 0;\n            margin-bottom: 18px;\n            color: #ffffff;\n            font-size: 22px;\n            text-align: center;\n        }\n\n        .data-container h2 a {\n            color: inherit;\n            text-decoration: none;\n        }\n\n        .data-container h2 a:hover {\n            text-decoration: underline;\n        }\n\n        .sensor-data {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n            gap: 16px;\n        }\n\n        .data-box {\n            background: rgba(255,255,255,0.05);\n            padding: 16px;\n            border-radius: 14px;\n            border: 1px solid rgba(255,255,255,0.06);\n            box-shadow: 0 4px 12px rgba(0,0,0,0.12);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            min-height: 120px;\n            justify-content: center;\n        }\n\n        .data-box h3 {\n            margin: 8px 0 6px 0;\n            color: #dfeaff;\n            font-size: 1rem;\n            font-weight: 600;\n        }\n\n        .data-icon {\n            font-size: 2.2em;\n            color: #4ea3ff;\n            margin-bottom: 8px;\n        }\n\n        .data-value {\n            font-size: 1.35em;\n            font-weight: bold;\n            color: #ffffff;\n            text-align: center;\n            word-break: break-word;\n        }\n\n        .last-update {\n            text-align: right;\n            color: #b8c8e6;\n            font-size: 0.9em;\n            margin-top: 16px;\n        }\n\n        @media (max-width: 768px) {\n            body {\n                padding: 14px;\n            }\n\n            #map {\n                height: 420px;\n            }\n\n            .page-title {\n                font-size: 24px;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"page-title\">Live Buoy Data Dashboard<\/div>\n    <div class=\"page-subtitle\">Real-time monitoring from Mitsuguchi Bay and the Yasuura coastal region<\/div>\n\n    <div id=\"map\"><\/div>\n\n    <div class=\"dashboard-grid\">\n        <!-- Small BOB -->\n        <div class=\"data-container\" id=\"buoy1\">\n            <h2><a href=\"https:\/\/www.chessbuoy.com\/?page_id=84\" target=\"_blank\">Small BOB<\/a><\/h2>\n            <div class=\"sensor-data\">\n                <div class=\"data-box\">\n                    <i class=\"fas fa-thermometer-half data-icon\"><\/i>\n                    <h3>Temperature<\/h3>\n                    <div id=\"temperature1\" class=\"data-value\">Loading&#8230;<\/div>\n                <\/div>\n                <div class=\"data-box\">\n                    <i class=\"fas fa-water data-icon\"><\/i>\n                    <h3>EC<\/h3>\n                    <div id=\"ec1\" class=\"data-value\">Loading&#8230;<\/div>\n                <\/div>\n                <div class=\"data-box\">\n                    <i class=\"fas fa-tint data-icon\"><\/i>\n                    <h3>TDS<\/h3>\n                    <div id=\"tds1\" class=\"data-value\">Loading&#8230;<\/div>\n                <\/div>\n                <div class=\"data-box\">\n                    <i class=\"fas fa-umbrella-beach data-icon\"><\/i>\n                    <h3>Salinity<\/h3>\n                    <div id=\"salinity1\" class=\"data-value\">Loading&#8230;<\/div>\n                <\/div>\n                <div class=\"data-box\">\n                    <i class=\"fas fa-flask data-icon\"><\/i>\n                    <h3>pH<\/h3>\n                    <div id=\"ph1\" class=\"data-value\">Loading&#8230;<\/div>\n                <\/div>\n            <\/div>\n            <div class=\"last-update\">\n                Last updated: <span id=\"lastUpdate1\">&#8211;<\/span>\n            <\/div>\n        <\/div>\n\n        <!-- Big BOB -->\n        <div class=\"data-container\" id=\"buoy2\">\n            <h2><a href=\"https:\/\/www.chessbuoy.com\/?page_id=296\" target=\"_blank\">Big BOB<\/a><\/h2>\n            <div class=\"sensor-data\">\n                <div class=\"data-box\">\n                    <i class=\"fas fa-thermometer-half data-icon\"><\/i>\n                    <h3>Temperature<\/h3>\n                    <div id=\"temperature2\" class=\"data-value\">Loading&#8230;<\/div>\n                <\/div>\n                <div class=\"data-box\">\n                    <i class=\"fas fa-water data-icon\"><\/i>\n                    <h3>EC<\/h3>\n                    <div id=\"ec2\" class=\"data-value\">Loading&#8230;<\/div>\n                <\/div>\n                <div class=\"data-box\">\n                    <i class=\"fas fa-tint data-icon\"><\/i>\n                    <h3>TDS<\/h3>\n                    <div id=\"tds2\" class=\"data-value\">Loading&#8230;<\/div>\n                <\/div>\n                <div class=\"data-box\">\n                    <i class=\"fas fa-umbrella-beach data-icon\"><\/i>\n                    <h3>Salinity<\/h3>\n                    <div id=\"salinity2\" class=\"data-value\">Loading&#8230;<\/div>\n                <\/div>\n                <div class=\"data-box\">\n                    <i class=\"fas fa-flask data-icon\"><\/i>\n                    <h3>pH<\/h3>\n                    <div id=\"ph2\" class=\"data-value\">Loading&#8230;<\/div>\n                <\/div>\n            <\/div>\n            <div class=\"last-update\">\n                Last updated: <span id=\"lastUpdate2\">&#8211;<\/span>\n            <\/div>\n        <\/div>\n\n        <!-- Big BOB 2 -->\n        <div class=\"data-container\" id=\"buoy3\">\n            <h2><a href=\"https:\/\/www.chessbuoy.com\/?page_id=452\" target=\"_blank\">Big BOB 2<\/a><\/h2>\n            <div class=\"sensor-data\">\n                <div class=\"data-box\">\n                    <i class=\"fas fa-thermometer-half data-icon\"><\/i>\n                    <h3>Temperature<\/h3>\n                    <div id=\"temperature3\" class=\"data-value\">Loading&#8230;<\/div>\n                <\/div>\n                <div class=\"data-box\">\n                    <i class=\"fas fa-flask data-icon\"><\/i>\n                    <h3>pH<\/h3>\n                    <div id=\"ph3\" class=\"data-value\">Loading&#8230;<\/div>\n                <\/div>\n            <\/div>\n            <div class=\"last-update\">\n                Last updated: <span id=\"lastUpdate3\">&#8211;<\/span>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet\/1.9.4\/leaflet.js\"><\/script>\n    <script>\n        const map = L.map('map').setView([34.37835, 132.69216], 10);\n\n        const satellite = L.tileLayer(\n            'https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/World_Imagery\/MapServer\/tile\/{z}\/{y}\/{x}',\n            {\n                attribution: 'Tiles &copy; Esri'\n            }\n        ).addTo(map);\n\n        const streets = L.tileLayer(\n            'https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png',\n            {\n                attribution: '\u00a9 OpenStreetMap contributors'\n            }\n        );\n\n        L.control.layers({ \"Satellite\": satellite, \"Streets\": streets }).addTo(map);\n\n        const buoyIcon = L.icon({\n            iconUrl: 'https:\/\/www.chessbuoy.com\/wp-content\/uploads\/2025\/07\/bobmed.png',\n            iconSize: [30, 45],\n            iconAnchor: [15, 45]\n        });\n\n        const buoyIconHover = L.icon({\n            iconUrl: 'https:\/\/www.chessbuoy.com\/wp-content\/uploads\/2025\/07\/bobmed.png',\n            iconSize: [36, 54],\n            iconAnchor: [18, 54]\n        });\n\n        const buoys = [\n            {\n                name: 'Small BOB',\n                channelId: '2774745',\n                readApiKey: 'OE9ER80P0H2293YF',\n                fixed: false,\n                marker: null,\n                containerId: 'buoy1',\n                pageUrl: 'https:\/\/www.chessbuoy.com\/?page_id=84'\n            },\n            {\n                name: 'Big BOB',\n                channelId: '3094559',\n                readApiKey: 'LMBG3KVVU55GBHN3',\n                fixed: false,\n                marker: null,\n                containerId: 'buoy2',\n                pageUrl: 'https:\/\/www.chessbuoy.com\/?page_id=296'\n            },\n            {\n                name: 'Big BOB 2',\n                channelId: '2788373',\n                readApiKey: '8O6R6C70M4R2HLSK',\n                fixed: false,\n                marker: null,\n                containerId: 'buoy3',\n                pageUrl: 'https:\/\/www.chessbuoy.com\/?page_id=452'\n            }\n        ];\n\n        buoys.forEach((buoy) => {\n            const container = document.getElementById(buoy.containerId);\n            if (container) {\n                container.addEventListener('click', () => {\n                    window.open(buoy.pageUrl, '_blank');\n                });\n            }\n        });\n\n        async function updateBuoyData(buoy, suffix) {\n            try {\n                const response = await fetch(`https:\/\/api.thingspeak.com\/channels\/${buoy.channelId}\/feeds\/last.json?api_key=${buoy.readApiKey}`);\n                const data = await response.json();\n\n                const temperature = data.field3 ?? '-';\n                const ec = data.field4 ?? '-';\n                const tds = data.field5 ?? '-';\n                const salinity = data.field6 ?? '-';\n                const ph = data.field7 ?? '-';\n                const updateTime = new Date().toLocaleString();\n\n                const lat = parseFloat(data.field1);\n                const lng = parseFloat(data.field2);\n\n                if (!isNaN(lat) && !isNaN(lng)) {\n                    if (buoy.marker) {\n                        buoy.marker.setLatLng([lat, lng]);\n                    } else {\n                        buoy.marker = L.marker([lat, lng], { icon: buoyIcon }).addTo(map);\n                        buoy.marker.on('click', () => {\n                            window.open(buoy.pageUrl, '_blank');\n                        });\n                        buoy.marker.on('mouseover', () => buoy.marker.setIcon(buoyIconHover));\n                        buoy.marker.on('mouseout', () => buoy.marker.setIcon(buoyIcon));\n                    }\n                }\n\n                const tempEl = document.getElementById(`temperature${suffix}`);\n                const ecEl = document.getElementById(`ec${suffix}`);\n                const tdsEl = document.getElementById(`tds${suffix}`);\n                const salEl = document.getElementById(`salinity${suffix}`);\n                const phEl = document.getElementById(`ph${suffix}`);\n                const lastEl = document.getElementById(`lastUpdate${suffix}`);\n\n                if (tempEl) tempEl.textContent = `${temperature}\u00b0C`;\n                if (ecEl) ecEl.textContent = `${ec} \u00b5S\/cm`;\n                if (tdsEl) tdsEl.textContent = `${tds} ppm`;\n                if (salEl) salEl.textContent = `${salinity} PSU`;\n                if (phEl) phEl.textContent = `${ph}`;\n                if (lastEl) lastEl.textContent = updateTime;\n\n            } catch (err) {\n                console.error(`Error fetching data for ${buoy.name}:`, err);\n            }\n        }\n\n        function fitMapToMarkers() {\n            const points = buoys\n                .map(b => b.marker ? b.marker.getLatLng() : null)\n                .filter(Boolean);\n\n            if (points.length > 0) {\n                const bounds = L.latLngBounds(points);\n                map.fitBounds(bounds, { padding: [50, 50], maxZoom: 12 });\n            }\n        }\n\n        async function updateAllBuoys() {\n            for (let i = 0; i < buoys.length; i++) {\n                await updateBuoyData(buoys[i], i + 1);\n            }\n            fitMapToMarkers();\n        }\n\n        updateAllBuoys();\n        setInterval(updateAllBuoys, 600000);\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Track the real-time location and latest data points of our buoy fleet as it monitors the different locations where they are deployed. Currently, BOB is deployed at the Yasuura Aquaculture Region (BOB and Big BOB). The fleet&#8217;s current positions are displayed on the map below. You can explore their recent movements and get an overview &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.chessbuoy.com\/?page_id=2\" class=\"more-link\">Read more<span class=\"screen-reader-text\"> &#8220;Real-Time Buoy Monitoring \u2013 BOB Fleet&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inspiro_hide_title":false,"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.chessbuoy.com\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.chessbuoy.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.chessbuoy.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.chessbuoy.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.chessbuoy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":43,"href":"https:\/\/www.chessbuoy.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":478,"href":"https:\/\/www.chessbuoy.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/478"}],"wp:attachment":[{"href":"https:\/\/www.chessbuoy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}