Tiles de mapas meteorologicos GFS

GFS Weather Map Tiles

O modelo GFS (Global Forecast System) gera previsoes globais a cada 6 horas. Os tiles sao processados pelo servico gfs/ e servidos como PMTiles — um formato compacto para mapas vetoriais. Este tutorial mostra como consultar o indice e montar URLs de tiles.

The GFS (Global Forecast System) model generates global forecasts every 6 hours. Tiles are processed by the gfs/ service and served as PMTiles — a compact format for vector maps. This tutorial shows how to query the index and build tile URLs.

1. Consultar indice / Query the index

O endpoint /gfs/index.json retorna metadados sobre as variaveis disponiveis, horas de previsao e escalas de cores:

const API_KEY = 'YOUR_API_KEY';
const BASE = 'https://imagery.api.insyde.one';

async function getGfsIndex() {
  const res = await fetch(`${BASE}/gfs/index.json?key=${API_KEY}`);
  return res.json();
}

const index = await getGfsIndex();
console.log(index.variables);  // ['temp', 'precip', 'clouds', ...]
console.log(index.forecast_hours); // [0, 3, 6, 9, ... 48]

2. Resposta do indice / Index response

{
  "updated": "2026-02-19T12:00:00Z",
  "cycle": "20260219_12z",
  "variables": ["temp", "precip", "clouds", "pressure", "humidity", "wind"],
  "forecast_hours": [0, 3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36, 39, 42, 45, 48],
  "tiles": {
    "temp": "temp/latest/f{hour:03d}.pmtiles",
    "precip": "precip/latest/f{hour:03d}.pmtiles",
    "wind": "wind/latest/f{hour:03d}.json"
  },
  "scales": {
    "temp": { "min": -40, "max": 50, "unit": "°C", "palette": "turbo" },
    "precip": { "min": 0, "max": 50, "unit": "mm", "palette": "blues" }
  }
}

3. Montar URL do tile / Build the tile URL

Cada variavel tem um arquivo PMTiles por hora de previsao. O padrao e f000.pmtiles ate f048.pmtiles (passos de 3h):

function getTileUrl(variable, forecastHour) {
  const h = String(forecastHour).padStart(3, '0');
  const ext = variable === 'wind' ? 'json' : 'pmtiles';
  return `${BASE}/gfs/${variable}/latest/f${h}.${ext}?key=${API_KEY}`;
}

// Examples:
getTileUrl('temp', 0);   // /gfs/temp/latest/f000.pmtiles
getTileUrl('temp', 24);  // /gfs/temp/latest/f024.pmtiles
getTileUrl('wind', 6);   // /gfs/wind/latest/f006.json

4. Variaveis disponiveis / Available variables

Variavel / Variable	Formato / Format	Unidade / Unit	Descricao / Description
`temp`	PMTiles	°C	Temperatura a 2m / 2m temperature
`precip`	PMTiles	mm	Precipitacao acumulada / Accumulated precipitation
`clouds`	PMTiles	%	Cobertura de nuvens / Cloud cover
`pressure`	PMTiles	hPa	Pressao ao nivel do mar / Sea-level pressure
`humidity`	PMTiles	%	Umidade relativa / Relative humidity
`wind`	JSON	m/s	Componentes U/V do vento / Wind U/V components

5. Integrar com MapLibre GL / MapLibre GL integration

import maplibregl from 'maplibre-gl';
import { Protocol } from 'pmtiles';

// Register PMTiles protocol
const protocol = new Protocol();
maplibregl.addProtocol('pmtiles', protocol.tile);

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
  center: [-50, -15],
  zoom: 3,
});

map.on('load', () => {
  const tileUrl = getTileUrl('temp', 0);

  map.addSource('gfs-temp', {
    type: 'vector',
    url: `pmtiles://${tileUrl}`,
  });

  map.addLayer({
    id: 'temp-fill',
    type: 'fill',
    source: 'gfs-temp',
    'source-layer': 'temp',
    paint: {
      'fill-color': ['interpolate', ['linear'], ['get', 'value'],
        -20, '#313695',
        0,   '#74add1',
        15,  '#fee090',
        30,  '#f46d43',
        45,  '#a50026',
      ],
      'fill-opacity': 0.6,
    },
  });
});

Dica: Use o campo scales do indice para mapear valores para cores automaticamente. Cada variavel tem min/max e paleta sugerida.
Tip: Use the scales field from the index to map values to colors automatically. Each variable has min/max and a suggested palette.

6. Animar horas de previsao / Animate forecast hours

let currentHour = 0;

async function animateForecasts() {
  const index = await getGfsIndex();

  for (const hour of index.forecast_hours) {
    const url = getTileUrl('temp', hour);

    // Update the map source URL
    map.getSource('gfs-temp').setUrl(`pmtiles://${url}`);

    // Wait 500ms between frames
    await new Promise(r => setTimeout(r, 500));
  }
}

animateForecasts();

Back to Imagery API docs