Implementing Weather Widgets, Maps, and Charts using the NWS/NOAA FREE Weather API
The intent is to make this relatively modular and easy to use in any project or page.
https://cjmet.github.io/WeatherKitty/
Github Copilot was used during the development of this project.
GHCND Note:
- The History APIs were taken out by the fall Hurricanes. While they are partially back online now, they still suffer from frequent outages, and congestion.
CodeKy Notes:
- I created a locked branch for CodeKy.
- See the CodeKy Branch and the project.md for CodeKy Specific Info.
- Request an API Key if corsproxy.io is misfiring.
- It looks like they are actively updating and modifying, so I added an optional cors.sh API key.
- I'll replace Census with GNIS later. Then perhaps much later add it back in with a server-side api.
- The demo runs slowly in LiveServer, I recommend using:
- https://cjmet.github.io/WeatherKitty/
- npm run dev
- npx vite
-
Required: Secure https and Location are Required.
-
Valid for locations in the United States Only. The primary API is from the United States National Weather Service.
- Location can be provided by browser permissions, GeoIP, or GeoAddress.
- GeoIP and GeoAddress have limited API Usage, additional usage may require an API Key, License, or Subscription.
-
Install as a git submodule. I'll make this a node module later.
git submodule add https://github.com/cjmet/WeatherKitty.git WeatherKittypulling a submodule inside another repository
- pull the parent
- git submodule init
- git submodule update
-
Add WeatherKitty.mjs to your scripts in your html file
-
Insert one of the weather-kitty html elements into your html.
- Note: You must use both opening and closing tags.
-
<weather-kitty>- Widget, including Current Conditions and Forecast -
<weather-kitty-current>- Current Conditions -
<weather-kitty-forecast>- Forecast -
<weather-kitty-geoaddress>- Manual Location Input. -
<weather-kitty-week>- Forecast 7-day matrix for the next week. -
<weather-kitty-radar-local>- Local Radar map. -
<weather-kitty-radar-national>- National Radar map. -
<weather-kitty-map-forecast>- Forecast map. -
<weather-kitty-map-alerts>- Alerts map. -
<weather-kitty-chart type="keyword">- Weather Charts. NOTE: Charts may require a defined or contained size. -
<weather-kitty-tooltip>- Tooltip tags if you need to style them. -
<weather-kitty-status>- API Status Widget.Additional Status Subwidgets
<wk-status-nws"><wk-status-aws"><wk-status-ncei"><wk-status-ncdc">
For ease of editing and customization
.WeatherKitty- The main Widget.WeatherKittyBlock- Current Conditions and Forecast Blocks..WeatherKittyImage- Weather Background Images.WeatherKittyText- Weather Text.WeatherKittyChart- Weather chart containers.WeatherKittyGeoAddress- Manual location input container.WeatherKittyMapForecast- Forecast Map.WeatherKittyMapRadar- Radar Map.WeatherKittyMapAlerts- Alerts Map.WeatherKittyStatus- API Status Widget.wk-status-signal- Used for the stoplights in the Status Indicator- and more. See the dev tools inspector for more classes.
<weather-kitty-chart type="value" MaxDataPoints="value" pixelsPerDataPoint="value" trimData="value" width="value" height="value" noData="value">
NOTE: Charts may require flex, grid, a defined size, or a contained size. Charts will attempt to size to their parent container. This can sometimes cause issues with dynamic undefined sizing. This can include grid or flex all the way to the root.
- "value" - is the data type you want to chart. Not all data types are available for all locations. See below for a partial list of data types.
- "auto" - sets the value for you, and keeps the charts sized to the viewport.
- "default" - sets the value to a reasonable number suited for most charts.
- "max" - sets the value to as many points as the charts can reasonably handle. Approximately 32,000.
- "value" - sets the value.
- "auto" - sets the value for you, and keeps the charts sized to the viewport.
- "default" - the same as "small".
- "small" - about 4 pixels.
- "medium" - about 14 pixels.
- "large" - about 24 pixels.
- "value" - sets the value.
- "truncate" - truncates excess data. the default.
- "reversetruncate" - same as truncate but backwards.
- "hide" - will hide the chart when no data is available.
- "value" - this will override the width, but the chart may still scale to fill the area, or may expand for additional data points.
- "value" - this will override the width, but the chart may still scale to fill the area.
<weather-kitty-chart type="TEMP" MaxDataPoints="max" pixelsPerDataPoint="default" trimData="avg">
Chart Types:
- elevation, temperature, dewpoint, windDirection, windSpeed, windGust, barometricPressure, seaLevelPressure, visibility, maxTemperatureLast24Hours, minTemperatureLast24Hours, precipitationLastHour, precipitationLast3Hours, precipitationLast6Hours, relativeHumidity, windChill, heatIndex, ...
- TMAX, TMIN, PRCP, SNOW, SNWD, PGTM, WDFG, WSFG, WESD, FRGT, THIC, ACMH, ACSH, PSUN, TSUN, WDFM, WSFM, AWND, FMTM, TAVG, ADPT, ASLP, ASTP, AWBT, RHAV, RHMN, RHMX, TEMP, TMXN, ...
- ... and more. Set Log.SetLogLevel(LogLevel.Info); and then see the live dev console for more info. I'll add a GetAvailableChartTypes() later.
- TEMP - tries to determine the larger temperature dataset for a station, which is hopefully the most relevant.
- TMXN - average of TMAX and TMIN where available
-
Art, Ascii Art, Logos, Trademark, etc.: (c) 2024
Angel Hornet, All Rights Reserved.
-
Software is Licensed: MPL 2.0 or newer
-
api.weather.gov: "Intended to be open data, free to use for any purpose". Limit: 1 call per second.
-
bowser.js: MIT License.
-
chart.js: MIT License.
-
corsproxy.io: Unknown License. Limit: Unknown Limit, assume limit 1 call per second.
- INSECURE. YOU ARE TRUSTING the proxy not to exploit Data or XSS in both directions.
-
fflate: MIT License.
-
ipapi.co: Unknown License. Limit: 35 calls per hour.
-
GHCND: Public Data. Limit: Unknown Limit, assume 1 call per second.
-
proxy.cors.sh:API KEY REQUIRED. MIT License. Limit 500k/mth, 5mb, 500gb, approx 1 per 6 seconds.- INSECURE. YOU ARE TRUSTING the proxy not to exploit Data or XSS in both directions.
- WARNING there does not appear to be an easy way to cancel this subscription. Cancellation and Updates Pending.
https://www1.ncdc.noaa.gov/pub/data/ghcn/daily/readme.txt https://www1.ncdc.noaa.gov/pub/data/ghcn/daily/ghcnd-stations.txt https://www1.ncdc.noaa.gov/pub/data/ghcn/daily/by_station/ https://www1.ncdc.noaa.gov/pub/data/ghcn/daily/by_station/USW00014739.csv.gz Menne, M.J., I. Durre, R.S. Vose, B.E. Gleason, and T.G. Houston, 2012: An overview of the Global Historical Climatology Network-Daily Database. Journal of Atmospheric and Oceanic Technology, 29, 897-910, doi:10.1175/JTECH-D-11-00103.1. To acknowledge the specific version of the dataset used, please cite: Menne, M.J., I. Durre, B. Korzeniewski, S. McNeill, K. Thomas, X. Yin, S. Anthony, R. Ray, R.S. Vose, B.E.Gleason, and T.G. Houston, 2012: Global Historical Climatology Network - Daily (GHCN-Daily), Version 3. [indicate subset used following decimal, e.g. Version 3.12]. NOAA National Climatic Data Center. http://doi.org/10.7289/V5D21VHZ [access date].