Tile Server

Sofar API
Search…
Sofar API
Authentication
Weather Object Metadata
Wave Spectra
Spotter & Smart Mooring
Tile Server
This endpoint returns raster tiles (images) of our time series weather data. The tile endpoint can be used with a mapping client, such as Leaflet.js or Mapbox, to make an interactive world map.
get
https://api.sofarocean.com
/marine-weather/v1/models/:model/tile/:zoom/:x/:y.png
Get Tile PNG
Example Usage
The following HTML code uses Mapbox GL JS to display model data served by our Tile Server API. The page features a slider that allows you to select the desired time (anywhere from 24 hours in the past, to 6 hours in the future). You can run this demo either by visiting the file in a local browser or using the code pen featured below. 
<!-- Simple example using mapbox-gl-js along with the Sofar tile api to create a map that shows data from a certain model/variable at various times-->
<!DOCTYPE html>
<html>
​
<head>
    <meta charset="utf-8" />
    <title>Sofar Tile Server Demo</title>
​
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
​
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.25.3/moment.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
​
    <link href="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.css" rel="stylesheet" />
​
    <style>
        body { margin: 0; padding: 0; font-family: sans-serif; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
        #model-info {
            position: relative;
            background-color: #eee;
            margin: 5px;
            padding: 5px;
            display: inline-block;
        }
        #map-overlay {
            position: relative;
            background-color:#eee;
            margin: 5px;
            padding: 5px;
            display: inline-block;
        }
    </style>
</head>
​
<body>
​
<div id="map"></div>
<div id="model-info">
    <b>Model:</b> <label id="model-name"></label> <br>
    <b>Variable:</b> <label id="variable-name"></label> <br>
</div>
​
<br>
<div id="map-overlay">
    <b>Inference Time:</b>
    <label id="timestamp"></label>
    <br>
    <input id="slider" type="range" min="0" max="4" step="1" value="3" />
</div>
​
<script>
    // CONSTANTS
    // link used to access the sofar api. The timestamp is appended on dynamically as the slider changes
    // This particular demo accesses significant wave height data from the Sofar Wave Model
    const modelName     = "SofarOperationalWaveModel"
    const variableName  = "significantWaveHeight";
    const cmap          = "turbo";
    const sofarApiToken = "383d59964809ca8c6438867e590f16";
​
    // get closest available hour
    const modelTimesEndpoint =
        "https://api.sofarocean.com/marine-weather/v1/models/" +
        modelName +
        "/outputTimes?token=" +
        sofarApiToken +
        "&closest=" +
        moment.utc().startOf("hour").toISOString();
​
    const linkPrefix =
        "https://api.sofarocean.com/marine-weather/v1/models/" +
        modelName +
        "/tile/{z}/{x}/{y}.png?colormap="
        + cmap +
        "&token=" +
        sofarApiToken +
        "&variableID=" +
        variableName +
        "&timestamp=";
​
    $.get( modelTimesEndpoint, function( data ) {
        // upon loading a valid model time, use that as a starting point
        const timestamp = moment(data.outputTimes[0]);
​
        // Add 30 hours of available times to the slider. 1 day ago to 6 hours in the future
        const dates = [];
        const startDate = timestamp.subtract(1, "day");
        for (let i = 0; i < 5; i++) {
            dates.push(startDate.add(6, "hour").toISOString());
        }
​
        // update info box
        document.getElementById("model-name").textContent = modelName;
        document.getElementById("variable-name").textContent = variableName;
​
        mapboxgl.accessToken = 'pk.eyJ1Ijoiam9uc2VuIiwiYSI6IkR6UU9oMDQifQ.dymRIgqv-UV6oz0-HCFx1w'
​
        let map = new mapboxgl.Map({
            container: "map", // container id
            style: "mapbox://styles/jonsen/ck8i301kh0cy31ipfi7y8j6bb",
            center: [-74.5, 40], // starting position
            zoom: 2, // starting zoom
        });
​
        // Function that updates the map data based on the current slider timestamp
        function updateDate(newIndex) {
            let currentTime = dates[newIndex];
            document.getElementById("timestamp").textContent = currentTime;
            let link = linkPrefix + currentTime;
            map.addSource("sofar-tiles", {
                type: "raster",
                tiles: [link],
                tileSize: 256,
                attribution: "Sofar Ocean Technologies"
            });
​
            map.addLayer({
                id: "sofar-tiles",
                type: "raster",
                source: "sofar-tiles",
                minzoom: 0,
                maxzoon: 10
            });
        }
​
        map.on("load", function () {
            // set to be the current time which has index 23
            updateDate(3);
            document.getElementById("slider").addEventListener("input", function (e) {
                const dateIndex = parseInt(e.target.value, 10);
​
                if (map.getLayer("sofar-tiles")) map.removeLayer("sofar-tiles");
                if (map.getSource("sofar-tiles")) map.removeSource("sofar-tiles");
                updateDate(dateIndex);
            });
        });
​
    });
</script>
​
</body>
​
</html>
Additional Information
Colormap Options
​
Hindcast Data
Weather Object Metadata
Last modified 1yr ago
Copy link
Outline
get
Get Tile PNG
Example Usage
Additional Information