This is a project for weather data visualization.
There are two main parts of the project:
(async () => {
// MAPBOX initialization START
mapboxgl.accessToken = "--key--";
const map = new mapboxgl.Map({
container: "map",
style: {
version: 8,
name: "Empty",
sources: {},
layers: [],
},
});
map.addControl(new mapboxgl.NavigationControl(), "bottom-right");
await map.once("load");
// WXTILES initialization START
const { WxTilesLogging, WxAPI, CustomWxTilesLayer } = window.wxtilesmbox;
// WxTilesLogging(true); // log WxTiles info to console if needed
const dataServerURL = "https://tilesdev.metoceanapi.com/data/";
const requestInit = {
headers: new Headers({'x-api-key': 'your_key_here'}),
};
// Get the API ready - should be ONE per application
const wxapi = new WxAPI({ dataServerURL, requestInit });
// Define the dataset and variable
const datasetName = "gfs.global";
const variable = "wind.speed.eastward.at-10m"; // Vector example
// Create a dataset manager (may be used for many layers from this dataset)
const wxdatasetManager = await wxapi.createDatasetManager(datasetName);
// Create a layer
const wxsource = wxdatasetManager.createSourceLayer(
{ variable },
{
id: "wxsource",
attribution: "WxTiles",
}
);
map.addSource(wxsource.id, wxsource);
await new Promise((resolve) => map.once("idle", resolve));
// Add wxlayer using CustomWxTilesLayer. Implements GLSL shader for vector field animation
map.addLayer(new CustomWxTilesLayer("wxlayer", wxsource.id), "baseL");
})();
(async function step(n: number = 0) {
await wxsource.updateCurrentStyleObject({
isolineText: false,
blurRadius: ~~(10 * Math.sin(n / 500) + 10),
}); // await always !!
requestAnimationFrame(step);
})();
await wxsource.setTimeStep(1); // 1 - index of the time step in the dataset
or
await wxsource.setTimeStep("2020-01-01T00:00:00Z"); // '2020-01-01T00:00:00Z' - time step in the dataset
or
await wxsource.setTimeStep(2345323454); // time in seconds since 1970-01-01T00:00:00Z
or
await wxsource.setTimeStep(new Date("2020-01-01T00:00:00Z")); // Date object
await wxsource.updateCurrentStyleObject({ units: "m/s", levels: undefined }); // set levels to undefined - to automatically calculate the levels from the dataset
// load the time step number 10 to the cache but do not render it
const prom = wxsource.preloadTime(10);
// do stuff asyncronously
// ...
await prom; // wait for the time step to finish loading
// now set the time step to 10
await wxsource.setTime(10); // will be fast rendered from the cache
const abortController = new AbortController();
console.log("setTime(5)");
const prom = wxsource.setTime(5, abortController);
abortController.abort(); // aborts the request
await prom; // await always !! even if aborted
console.log("aborted");
const timeStep = wxsource.getTime();
map.on("mousemove", (e) => {
if (!wxsource) return;
const pos = position(e); //
const tileInfo: WxTileInfo | undefined = wxsource.getLayerInfoAtLatLon(
pos.wrap(),
map
);
if (tileInfo) {
console.log(tileInfo);
}
});
await wxsource.updateCurrentStyleObject({ levels: undefined }); // reset levels if existing in the style
const levels = wxsource.getCurrentStyleObjectCopy().levels || []; // get current/default/any levels
// generate a new color map from the levels
const colMap: [number, string][] = levels.map((level) => [
level,
"#" + Math.random().toString(16).slice(2, 8) + "ff",
]);
let busy = false;
map.on("mousemove", async (e) => {
if (!wxsource || busy) return;
busy = true;
const tileInfo: WxTileInfo | undefined = wxsource.getLayerInfoAtLatLon(
position(e),
map
);
if (tileInfo) {
await wxsource.updateCurrentStyleObject({
colorMap: [...colMap, [tileInfo.inStyleUnits[0], "#ff000000"]],
});
console.log(tileInfo);
}
busy = false;
});
The WxCreateLegend function is used to generate a color legend for weather map visualizations. This legend helps represent weather data with corresponding colors, making it easier to interpret the map.
Pass the legendSize and style to the WxCreateLegend function to generate the legend. The function returns a WxLegend object containing:
size: The number of color steps.colors: A Uint32Array of color values.ticks: An array of WxTick objects representing data points and their corresponding colors.units: The units of the data.showBelowMin / showAboveMax: Whether values outside the range are shown.Here’s an example of creating a temperature legend:
const style: WxColorStyleStrict = {
colorMap: [
[0, "#0000FF"], // blue at 0°C
[15, "#00FF00"], // green at 15°C
[30, "#FF0000"], // red at 30°C
],
showBelowMin: true,
showAboveMax: true,
units: "°C",
fill: "gradient",
};
const legend = WxCreateLegend(100, style);
console.log(legend);
This creates legend with:
The WxColorStyleStrict interface defines the configuration for styling visualizations. It includes properties for controlling colors, gradients, isolines, vectors, streamlines, and more. Below is a detailed explanation of each property.
name: The name of the style.parent: The name of a parent style to inherit properties from (optional).fill: Defines how tiles are filled:"none": No fill, leaves the tile transparent."solid": Solid fill, no gradient between levels."gradient": Gradient fill between levels.isolineColor: Defines the color of isolines:"none": Do not render isolines."fill": Use the value of fill for each pixel."inverted": Use the inverted value of fill for each pixel.#RGB, #RRGGBB, or #RRGGBBAA: Use a specific web color.isolineText: If true, render text values on isolines.isolineTextSizeEm: Font size of isoline text values in em units.isolineTextBackground: If true, render a solid background behind isoline text values.vectorType: Defines how vectors are represented:"none": Do not render vectors."arrows": Use arrows to represent winds/currents."barbs": Use barbs to represent winds/currents.vectorColor: Defines the color of vectors:"none": Do not render vectors."fill": Use the value of fill for each pixel."inverted": Use the inverted value of fill for each pixel.#RGB, #RRGGBB, or #RRGGBBAA: Use a specific web color.vectorFactor: Scaling factor for vector length.streamLineColor: Defines the color of streamlines:"none": Do not render streamlines."fill": Use the value of fill for each pixel."inverted": Use the inverted value of fill for each pixel.#RGB, #RRGGBB, or #RRGGBBAA: Use a specific web color.streamLineSpeedFactor: Scaling factor for streamline length.streamLineGridStep: Step to seed streamlines. Smaller values create more streamlines.streamLineSteps: Number of steps in each streamline.streamLineStatic: If true, render streamlines as static lines. If false, render as animated lines.showBelowMin: If true, fill values below the minimum range.showAboveMax: If true, fill values above the maximum range.colorScheme: Name of the color scheme from the default set.colors: Custom array of colors to use for interpolation (optional).colorMap: Array of [level, color] tuples to map specific data values to colors (optional).levels: Array of levels to build the legend. If not provided, 10 levels are calculated evenly based on the data.blurRadius: Radius for the BOX filter (used for blurring).addDegrees: Additional rotation of wind or current vectors by a specified angle in degrees.units: Units of the style (e.g., °C for temperature).extraUnits: Additional units to extend the default set (optional).mask: Defines masking behavior:"none": No masking."sea": Make sea areas transparent."land": Make land areas transparent.gl: Configuration for WebGL rendering:animationSpeed: Speed of animations.noiseTexturePow: Power of noise texture.vectorFieldFactor: Scaling factor for vector fields.animationIntensity: Intensity of animations.wavesCount: Number of waves to render.Default styles can be found here
Generated using TypeDoc