Obsidian Weather Snippet

openWeather.js

async function start(city) {
  const apiKey = 'your_api_key';
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
  const quoteData = await requestUrl({ url });
  console.log(quoteData);
  if (quoteData.status >= 400 && request.throw) {
    console.log(quoteData);
    return `*Something went wrong!*`;
  }

  const data = quoteData.json;

  let temp;
  let feels_like;
  let humidity;
  let pressure;
  let chance_of_rain;
  let conditions;

  temp = Math.round(data.main.temp);
  feels_like = Math.round(data.main.feels_like);
  humidity = data.main.humidity;
  pressure = data.main.pressure;
  chance_of_rain = data.rain ? (data.rain['1h'] || data.rain['3h']) : 0;
  conditions = data.weather ? data.weather[0].description : '';
  
  // Get the weather icon code from the API
  const iconCode = data.weather ? data.weather[0].icon : '';

  // Function to create the SVG icon using the icon code
  const createIcon = (iconCode) => {
    const iconUrl = `http://openweathermap.org/img/w/${iconCode}.png`;
    // return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="64" height="64"><image href="${iconUrl}" width="64" height="64"/></svg>`;
    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 84" width="84" height="84"><image href="${iconUrl}" width="90" height="90"/></svg>`;

  };

  const weatherIcon = createIcon(iconCode);

  return `<div style="display: flex; justify-content: center;">
          <div style="display: flex; align-items: center;">
  <div style="margin-top: 10px;">${weatherIcon}</div>
  <div style="display: flex; flex-direction: column; justify-content: center;">
    <div style="font-size: 24px;margin-left: 12px; text-align: center;">${city}: ${temp}°C (${feels_like}°C)</div>
    <div style="font-size: 18px; text-align: center;">💧${humidity}% ${pressure}hPa ☂️ ${chance_of_rain}% <span style="text-transform: capitalize; font-size: 20px; font-weight: bold; color: var(--color-accent); font-variant: small-caps;">${conditions}</span></div>
  </div>
</div>
</div>`;

}

module.exports = start;

Requirements

• Obsidian
• Templater Plugin
• API key from openweathermap.org

Usage

<% tp.user.openWeather("city") %> where symbol is the city you are interested in such as Hiroshima.