Local OpenWeatherMap

Javascript plugin to display weather on your website with OpenWeaterMap API.

You can specified JSON file or directly the JSON API of OpenWeatherMap.

Demo

Installation

1. Install Local Weater using: npm install local-openweathermap
2. Get an API-Key form openweathermap

Configuration

const weater = new Weather('.weather', {
    weatherType: 'weather',
    lang: 'fr',
    cityId: '3009566',
    units: 'metric',
    appid: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    icoPath: 'images/',
    icoFormat: 'svg',
    icoWidth: 60,
    icoHeight: 60,
});

Options can be also call with data attributes. Language option are not added with data attribute.

<div class="weather" data-json-path="json/weather.json" data-ico-path="images/" data-units="metric" data-weather-type="weather" data-ico-format="svg" data-ico-width="30" data-ico-height="30"></div>

Options

• weatherType: string
  A string that define the type of weather, daily or forecast over a maximum of 5 days.
  value: weather, forecast
  default: forecast

• forecastDays: integer
  In the case where you choose weatherType to forecast, indicates the number of days to be displayed
  default: 3
  Max: 5

• appid: string
  The OpenWeatherMap key. In this case, no need jsonPath option.

• jsonPath: string
  The path to a local json file. In this case, no need appid option.

• lang: string
  OpenWeatherMap language option
  default: en

• cityId: integer
  The id of the city. Must be found directly in the url after à search on https://openweathermap.org

• units: string
  OpenWeatherMap units format of temperature. Fahrenheit = imperial, Celsius = metric, Kelvin = standard
  value: imperial, metric, standard
  default: metric

• icoPath: string
  Path to the image folder, by default use OpenWeatherMap images.
  default: https://openweathermap.org/img/w/

• icoFormat: string
  Format of the images
  default: png

• icoWidth: integer
  Width attribute of the images
  default: 50

• icoHeight: integer
  Height attribute of the image
  default: 50

  Todo

  • Add template in configuration.
  • Color management in the case of SVG files.
  • Refactor language