Map Tiles

Working example of interacting with the Map Tiles marine weather endpoint.

Example Map

Use Mapbox GL JS to display model data served by the Sofar Ocean Map Tile API. The example features a dropdown menu that allows you to select from several of the supported marine weather data variables. You can run this example either by using the embedded demo or opening the code below in a local browser.

Demo

Code

index.html
<!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>Sofar Model:</b> <label id="model-name"></label> <br>
    <b>Variable:</b> 
        <select name="variables" id="variable-name">
            <option value="">-- select a variable --</option>
            <option>significantWaveHeight</option>
            <option>meanPeriod</option>
            <option>peakPeriodWindWaves</option>
            <option>significantWaveHeightWindWaves</option>
        </select>
    <br>
</div>

<script>
    // CONSTANTS
    // This particular demo accesses four variables' data from the Sofar Wave Model
    const modelName     = "Wave";
    const cmap          = "turbo";
    const sofarApiToken = "383d59964809ca8c6438867e590f16";

    // update info box
    document.getElementById("model-name").textContent = modelName;

    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 addSofarTiles(variableID) {
      const sofarTileURL = 
        "https://api.sofarocean.com/marine-weather/v1/models/" +
        modelName +
        "/tile/{z}/{x}/{y}.png?colormap="
        + cmap + 
        "&token=" +
        sofarApiToken +   
        "&variableID=" +
        variableID;
  
      map.addSource("sofar-tiles", {
        type: "raster",
        tiles: [sofarTileURL],
        tileSize: 256,
        attribution: "Sofar Ocean Technologies"
      });

      map.addLayer({
        id: "sofar-tiles",
        type: "raster",
        source: "sofar-tiles",
        minzoom: 0,
        maxzoon: 10
      });
    }

    // add a listener to update the map whenever a new
    // variable is selected from the HTML element
    document.getElementById("variable-name").addEventListener("change", (e) => {
      const newVariable = e.target.value;

      if (map.getLayer("sofar-tiles")) map.removeLayer("sofar-tiles");
      if (map.getSource("sofar-tiles")) map.removeSource("sofar-tiles");

      addSofarTiles(newVariable);
    });
</script>

</body>

</html>

PreviousHindcast DataNextGlossary

Last updated