Map Tiles
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.
index.html
1
<!DOCTYPE html>
2
<html>
3
4
<head>
5
<meta charset="utf-8" />
6
<title>Sofar Tile Server Demo</title>
7
8
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
9
10
<script src="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.js"></script>
11
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.25.3/moment.js"></script>
12
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
13
14
<link href="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.css" rel="stylesheet" />
15
16
<style>
17
body { margin: 0; padding: 0; font-family: sans-serif; }
18
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
19
#model-info {
20
position: relative;
21
background-color: #eee;
22
margin: 5px;
23
padding: 5px;
24
display: inline-block;
25
}
26
#map-overlay {
27
position: relative;
28
background-color:#eee;
29
margin: 5px;
30
padding: 5px;
31
display: inline-block;
32
}
33
</style>
34
</head>
35
36
<body>
37
38
<div id="map"></div>
39
<div id="model-info">
40
<b>Sofar Model:</b> <label id="model-name"></label> <br>
41
<b>Variable:</b>
42
<select name="variables" id="variable-name">
43
<option value="">-- select a variable --</option>
44
<option>significantWaveHeight</option>
45
<option>meanPeriod</option>
46
<option>peakPeriodWindWaves</option>
47
<option>significantWaveHeightWindWaves</option>
48
</select>
49
<br>
50
</div>
51
52
<script>
53
// CONSTANTS
54
// This particular demo accesses four variables' data from the Sofar Wave Model
55
const modelName = "Wave";
56
const cmap = "turbo";
57
const sofarApiToken = "383d59964809ca8c6438867e590f16";
58
59
// update info box
60
document.getElementById("model-name").textContent = modelName;
61
62
mapboxgl.accessToken = 'pk.eyJ1Ijoiam9uc2VuIiwiYSI6IkR6UU9oMDQifQ.dymRIgqv-UV6oz0-HCFx1w'
63
64
let map = new mapboxgl.Map({
65
container: "map", // container id
66
style: "mapbox://styles/jonsen/ck8i301kh0cy31ipfi7y8j6bb",
67
center: [-74.5, 40], // starting position
68
zoom: 2, // starting zoom
69
});
70
71
// Function that updates the map data based on the current slider timestamp
72
function addSofarTiles(variableID) {
73
const sofarTileURL =
74
"https://api.sofarocean.com/marine-weather/v1/models/" +
75
modelName +
76
"/tile/{z}/{x}/{y}.png?colormap="
77
+ cmap +
78
"&token=" +
79
sofarApiToken +
80
"&variableID=" +
81
variableID;
82
83
map.addSource("sofar-tiles", {
84
type: "raster",
85
tiles: [sofarTileURL],
86
tileSize: 256,
87
attribution: "Sofar Ocean Technologies"
88
});
89
90
map.addLayer({
91
id: "sofar-tiles",
92
type: "raster",
93
source: "sofar-tiles",
94
minzoom: 0,
95
maxzoon: 10
96
});
97
}
98
99
// add a listener to update the map whenever a new
100
// variable is selected from the HTML element
101
document.getElementById("variable-name").addEventListener("change", (e) => {
102
const newVariable = e.target.value;
103
104
if (map.getLayer("sofar-tiles")) map.removeLayer("sofar-tiles");
105
if (map.getSource("sofar-tiles")) map.removeSource("sofar-tiles");
106
107
addSofarTiles(newVariable);
108
});
109
</script>
110
111
</body>
112
113
</html>
Last modified 6mo ago