Painel multi-cidades

Multi-City Dashboard

Combine o endpoint /locate para geocodificacao com /weather para cada cidade e monte um painel comparativo de clima em tempo real. O /locate converte nomes de cidades em coordenadas (lat/lon), e o /weather retorna as condicoes atuais para cada localizacao.

Combine the /locate endpoint for geocoding with /weather for each city to build a real-time weather comparison dashboard. /locate converts city names to coordinates (lat/lon), and /weather returns current conditions for each location.

1. Geocoding com /locate / Geocoding with /locate

Primeiro, resolva nomes de cidades para coordenadas usando /locate:

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

async function geocode(city) {
  const url = `${BASE}/locate?q=${city}&limit=1&key=${API_KEY}`;
  const res = await fetch(url);
  const data = await res.json();
  return data[0]; // { name, lat, lon, country, state }
}

const sp = await geocode('São Paulo');
console.log(sp.lat, sp.lon); // -23.5506 -46.6334

2. Buscar clima de multiplas cidades / Fetch weather for multiple cities

Use Promise.all para buscar o clima de varias cidades em paralelo:

const cities = ['São Paulo,BR', 'Rio de Janeiro,BR', 'Curitiba,BR', 'Brasília,BR'];

async function getWeather(city) {
  const url = `${BASE}/weather?q=${city}&units=metric&lang=pt_br&key=${API_KEY}`;
  const res = await fetch(url);
  return res.json();
}

// Fetch all cities in parallel
const results = await Promise.all(
  cities.map(city => getWeather(city))
);

console.log(results); // Array of 4 weather objects

3. Resposta do /locate / /locate response

Exemplo de resposta para /locate?q=São Paulo&limit=1:

[
  {
    "name": "São Paulo",
    "local_names": {
      "pt": "São Paulo",
      "en": "São Paulo"
    },
    "lat": -23.5506,
    "lon": -46.6334,
    "country": "BR",
    "state": "São Paulo"
  }
]

4. Exemplo completo / Complete example

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

const cities = ['São Paulo,BR', 'Rio de Janeiro,BR', 'Curitiba,BR', 'Brasília,BR'];

async function getWeather(city) {
  const url = `${BASE}/weather?q=${city}&units=metric&lang=pt_br&key=${API_KEY}`;
  const res = await fetch(url);
  return res.json();
}

async function buildDashboard() {
  const results = await Promise.all(
    cities.map(city => getWeather(city))
  );

  const dirs = ['N','NE','E','SE','S','SW','W','NW'];

  const rows = results.map(d => {
    const temp = Math.round(d.main.temp);
    const feels = Math.round(d.main.feels_like);
    const icon = d.weather[0].icon;
    const desc = d.weather[0].description;
    const windKmh = Math.round(d.wind.speed * 3.6);
    const windDir = dirs[Math.round(d.wind.deg / 45) % 8];

    return `<tr>
      <td>${d.name}</td>
      <td><img src="${BASE}/icon/${icon}.png" width="32"></td>
      <td>${temp}°C</td>
      <td>${feels}°C</td>
      <td>${d.main.humidity}%</td>
      <td>${windKmh} km/h ${windDir}</td>
      <td style="text-transform:capitalize">${desc}</td>
    </tr>`;
  }).join('');

  document.getElementById('dashboard').innerHTML = `
    <table>
      <thead>
        <tr>
          <th>Cidade</th><th></th><th>Temp</th>
          <th>Sensação</th><th>Umidade</th>
          <th>Vento</th><th>Condição</th>
        </tr>
      </thead>
      <tbody>${rows}</tbody>
    </table>`;
}

buildDashboard();

Back to Weather API docs