​
{z}/{x}/{y}.png
// Returns tile as PNG image
{ "message": "Request must include 'timestamp' query parameter"}
{ "message": "Variable 'FakeVariable' does not exist" }
{ "message": "Internal Server Error" }
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 Modelconst modelName = "SofarOperationalWaveModel"const variableName = "significantWaveHeight";const cmap = "turbo";const sofarApiToken = "383d59964809ca8c6438867e590f16";​// get closest available hourconst 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 +"×tamp=";​$.get( modelTimesEndpoint, function( data ) {// upon loading a valid model time, use that as a starting pointconst timestamp = moment(data.outputTimes[0]);​// Add 30 hours of available times to the slider. 1 day ago to 6 hours in the futureconst dates = [];const startDate = timestamp.subtract(1, "day");for (let i = 0; i < 5; i++) {dates.push(startDate.add(6, "hour").toISOString());}​// update info boxdocument.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 idstyle: "mapbox://styles/jonsen/ck8i301kh0cy31ipfi7y8j6bb",center: [-74.5, 40], // starting positionzoom: 2, // starting zoom});​// Function that updates the map data based on the current slider timestampfunction 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 23updateDate(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>
​